@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root { --accent: #F14938; }

html {scroll-behavior: smooth;}

h1 {font-size: 60px;} h2 {font-size: 48px;}
nav {margin: 0px; padding: 0px 30px; width: calc(100% - 60px); height: 80px; z-index: 999; position: fixed; top: 0px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid #EEEEEE; background-color: #FFFFFF;}
nav ul {list-style: none; display: flex; gap: 20px; background-color: #FFFFFF; margin: 0; padding: 0; align-items: center;}
nav ul li a {text-decoration: none; color: inherit}



.button {padding: 12px 16px; border: none; border-radius: 12px; box-shadow: none; color: #FFFFFF; background-color: var(--accent); font-size: 14px; font-weight: 700;}

.padding-horizontal {padding-left: 30px; padding-right: 30px;}
.padding-vertical {padding-top: 24px; padding-bottom: 24px;}

/* Page Specific */
#home-vending-variety {margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: center; flex-direction: row; gap: 20px;}
#home-vending-variety li {width: 280px; border-top: 6px solid var(--accent);}

/* UI */
#hamburger {display: none; flex-direction: column; cursor: pointer;}
#hamburger span {width: 24px; height: 3px; border-radius: 9px; background: var(--accent); margin: 2.5px 0px;}
.hamburger-content.active {max-height: 100px;}
.hamburger-content {display: block; margin: 0px; padding: 0px; position: absolute; top:80px; left: 0px; max-height: 0px; width: 100%; overflow: hidden; background-color: inherit; padding: 0px; text-align: center; border-bottom: 1.5px solid #EEEEEE; transition: max-height 0.4s ease;}
.hamburger-content p {justify-content: center; margin: 0px; padding: 12px 0px;}
.hamburger-content p:hover {background-color: var(--accent); color: #FFFFFF;}
.hamburger-content p a {text-decoration: none; color: inherit;}







body {margin: 0px; padding: 0px; font-family: 'Inter'; font-size: 16px; background-color: #FFFFFF;}
footer {margin: 0px 30px; padding: 30px 0px; border-top: 1px solid #CCCCCC; font-size: 12px;}

button {padding: 12px 16px; border: none; border-radius: 12px; box-shadow: none; color: #FFFFFF; background-color: #F14938; font-size: 14px; font-weight: 700;}
button:hover {cursor: pointer;}
input[type=text], textarea {padding: 12px; box-sizing: border-box; box-shadow: none; border-radius: 8px; border: 1px solid #000000; font-size: 14px;}
input[type=password], textarea {padding: 12px; box-sizing: border-box; box-shadow: none; border-radius: 8px; border: 1px solid #000000; font-size: 14px;}

#page {margin: 80px 0px 30px 0px;}

#contact-form {margin: 0 auto; max-width: 540px;}
#contact-form > * {padding: 12px 0px;}

.a-discrete {text-decoration: none;}
.footer-legal {float: right;}

.center-text {text-align: center;}
.inherit {color: inherit;}
.maxWidth {width: 100%;}

.separator-text::after {content: "|"; margin: 0px 4px;}


.card {display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;}
.card-content {background: #FFFFFF; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden;}
.hero {display: flex; align-items: center; justify-content: space-around; vertical-align: middle; overflow: hidden;}


@media only screen and (max-width: 600px) {
    footer span {display: flex; justify-content: center;}
    nav ul {display: none;}

    #home-vending-variety {flex-direction: column;}
    #home-vending-variety li {width: calc(100%); justify-content: center; text-align: center; margin: 0 auto;} 

    #contact-form {max-width: 90%;}
    #hamburger {display: flex;}
}

@media only screen and (max-width: 800px) {
    .hero {flex-direction: column; text-align: center;}
}

@media only screen and (min-width: 600px) {
    #hamburger-content {display: none;} 
}



/* TEST */

table {text-align: left;}
tr {border: 1px solid blue;}

table thead {color: var(--accent)}


#dash-user {text-transform: capitalize;}