@import url("https://use.typekit.net/fqk1uzc.css");

/*-------------------Chips Falling-----------*/

.falling-chips {
    display: flex;
    flex-direction: column;
    align-content: right;
    position: absolute;
    margin-left: 75%;
    margin-top: 10%;
    animation-name: chip;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}


.chip-one {
    z-index: 1;
    margin-left: 10%
}

.chip-two {
    z-index: 1;
    margin-left: -15%;
}

.chip-three {
    z-index: 2;
    margin-left: 15%;
    margin-top: 5%;
}

.chip-four {
    z-index: 1;
    margin-left: -23%;
}

.chip-five {
    z-index: 1;
    margin-left: 20%;
}



/*----------------Navigation Bar----------------------*/


.navbar {
    display: flex;
    flex-wrap: nowrap;
    align-content: normal;
    justify-content: normal;
    flex-direction: row;
    padding: 1% 1.5%;
    align-items: center;
    background-color: #f9c357;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    text-decoration: none;
}

nav {
    flex: 80%;
    text-align: left;
    flex-wrap: wrap;
    
}


a {
    flex:20%;
    width: 1.4vw;
    padding: 0.2% 3%;
    margin: 1%;
    background-color: #f9c357;
    color: black;
    font-family: "futura-100", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1vw;
    text-align: center;
    border: solid;
    border-color: black;
    border-width: 2pt;
    border-radius: 8pt;
}

.homebutton {
    width: 30%;
    background: none;
    z-index: 2;
    border: none;

}

.homebutton img {
    display: block;
    width: 80%;
    
}


/*--------------------Landing Page-----------------*/

.huge_snacklin {
    background-color: #f9c357;
    align-content: center;
    z-index: 2;
}

.snacklins_logo {
    width: 80%;
    margin-left: 10vw;
}

/*-----------------------Scrolling Text-----------------------*/

.review_scroll {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    font-family: "futura-100", sans-serif;
    font-weight: 700;
    font-size: 35pt;
    color:#f9c357;
    margin: 1% 0 1% 0;
}


@keyframes loop {
        0% {transform: translateX(0%);}
        100% {transform: translateX(-100%);}
}

#continuous{
        background-color: white;
}

#container {
        width: 100%;
        display: flex;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        color: #f9c357;
        margin-top: 0%;
        
}

#container .scroll {
        background:white;
        display: flex;
        align-items: center;
        justify-content: space-around;
        white-space: nowrap;
        animation: loop 15s linear infinite;
        gap: 20px;
}

/*-----------------About Us Section----------------*/

.about_us {
    display: flex;
    flex-direction: column;
    background: url('images/SNACKLIN_aboutusimage.jpg') no-repeat center/cover;
    height: 20%;
    padding: 10%;
}

.aboutustitle {
    font-family: "futura-100", sans-serif;
    font-weight: 700;
    font-size: 25pt;
    text-align: center; 
    margin-top: 25px;
    padding: 5px 0 1px 0;
}

.aboutuscaption {
    font-family: "futura-100", sans-serif;
    font-weight: 100;
    font-size: 50pt;
    text-align: center; 
    padding: 0 80px 10px 80px;
    margin-top: -60px;
}

/*-----------------------------Icon Scrolling---------------*/


.icon_scroll {
    display: flex;
    flex-direction: row;
    margin-top: 100px;
}

@keyframes loop {
        0% {transform: translateX(0%);}
        100% {transform: translateX(-50%);}
}

#continuous_food{
        background-color: white;
}

#container_food {
        display: flex;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        margin-top: 0%;
        
}

#container_food .scroll2 {
        background:white;
        display: flex;
        align-items: center;
        justify-content: space-around;
        white-space: nowrap;
        animation: loop 15s linear infinite;
        gap: 80px;
}

/*---------------------Chips------------------*/

.chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    margin-left: 150px;
    margin-top: 120px;
    gap: 80px;
}

.bbq {
display: flex;
place-items: center;
flex-direction: column;
 width: 75%;
 height: 85%;
 background-color: #f57db2;
 border-radius: 30px;
 
}

.cheese {
display: flex;
place-items: center;
flex-direction: column;
 width: 75%;
 height: 85%;
 background-color: #ff5959;
 border-radius: 30px;
}

.nacho {
display: flex;
place-items: center;
flex-direction: column;
 width: 75%;
 height: 85%;
 background-color: #f9c357;
 border-radius: 30px;
 z-index: 1;
}



.churro {
display: flex;
place-items: center;
flex-direction: column;
 width: 75%;
 height: 85%;
 background-color: #fd3eb1;
 border-radius: 30px;
}

.teriyaki {
display: flex;
place-items: center;
flex-direction: column;
 width: 75%;
 height: 85%;
 background-color: #8d1434;
 border-radius: 30px;
}
#price {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.767);
    width: 40%;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    font-family: "futura-100", sans-serif;
    font-weight: 700;
    font-size: 25pt;
    padding: 2%;
    text-align: center;
    
}
/*-------------------------Ingredients-----------------*/

.ingredients {
    display: flex;
    flex-direction: row;
    /*align-content: center; */
    padding: 5%; 
    margin: 5% 2% 5% 2%;
    gap: 5%;
    
}

h2 {
    font-family: "futura-100", sans-serif;
    font-weight: 700;
    font-size: 18pt;
    text-align: center; 
}

#ingred {
    font-family: "futura-100", sans-serif;
    font-weight: 100;
    font-size: 14pt;
    text-align: center;
    margin-top: -3%;
}

.shipping {
    place-items: center;
}

.shippinginfo {
    margin-top: -40%;
}

.caloriesinfo {
    margin-top: -40%;
}

.mushroominfo {
    margin-top: -40%;
}

.yucainfo {
    margin-top: -40%;
}

/*-------------------Find a Store -----------------------*/

.find_a_store {
    background-color: #f9c357bd;
    margin: 10% 25% 15% 25%;
    padding: 5%;
    border-radius: 30px;
}

#stitle {
    text-align: center;
    font-family: "futura-100", sans-serif;
    font-weight: 800;
    font-size: 30pt;
}

button {
    border: 0;
    padding: 2% 7% 2% 7%;
    background-color:#ffffff;
    min-width: 20px;
    border-radius: 5px;
    align-content: center;
    margin-left: 29%;
     text-align: center;
    font-family: "futura-100", sans-serif;
    font-weight: 500;
    font-size: 15pt;
}

button:hover {
    background-color: #f9c357;
    color: rgb(255, 255, 255);
}

/*----------------------------Footer--------------------*/

.footer {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #f9c357bd;
    max-height: 50vw;
    padding: 2%;
}

.left-section {
    text-align: left;
    padding: 5%;
}

.middle-section {
    text-align: left;
    padding: 5%;
}

.right-section {
    text-align: left;
    padding: 5%;
}

#contact-header {
   font-family: "futura-100", sans-serif;
    font-weight: 800;
    font-size: 30pt;  
    text-align: left;
    margin-bottom: -10px;
}

#contact-para {
    font-family: "futura-100", sans-serif;
    font-weight: 500;
    font-size: 15pt;  
    text-align: left;   
    margin-bottom: 100px;
    line-height: 35px;
}

.socials {
    gap: 0px;
}

form {
    padding: 2%;
    border-radius: 3px;

}

input[type=text], select {
    width: 70%;
    padding: 2%;
    margin: 5px -20px;
    display: inline-block;
    border: 0.5px solid #cccccc7c;
    border-radius: 5px;
    /*box-sizing: content-box;*/
    background-color: rgba(255, 255, 255, 0.514);
    font-family: "futura-100", sans-serif;
    font-weight: 500;
    font-size: 12pt;
}

.socials {
    display: flex;
    flex-direction: row; 
}

#copyright {
    font-family: "futura-100", sans-serif;
    font-weight: 100;
    font-size: 12pt; 
    margin-top: 25%;
}