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


/* --- Header ---*/
body {
    margin: 0;
    height: 100vh;
    background-size: 100% auto;
    background-color: #5f9995;
}

h1 {
    font-size: 80pt;
    color: #005336;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    text-align: left;
    flex: 55%;
    margin-top: 50px;
}

.About {
    font-size: 55pt;
    color: #7a243e;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    flex: 25%;
    margin-top: 27px;
    float: left;
    margin-left: 30px;
}

.Shop{
    font-size: 55pt;
    color: #7a243e;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    flex: 30%;
    margin-top: 50px;
    float: right;
    margin-right: 25px;
}

.Ingredients{
    font-size: 55pt;
    color: #7a243e;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    flex: 25%;
    margin-top: 27px;
    float: right;
    margin-right: 25px;
}

#header{
    align-items: center;
    display: flex;
    gap: 3vw;
}

a{
    text-decoration: none;
    outline: none;
    color: inherit;

}

/* --- Deliciously hard to describe ---*/

body{
    margin: 0;
}

.flex{
    display: flex;
}

.column1{
    flex: 50%;
}

.column2{
    flex: 50%;
    margin-left: -10%;
    margin-top: -5%;
}

.top{
    margin-left: 50px;
    margin-top: 75px;
    margin-bottom: 0;
    padding: 0;
}

.bottom{
    margin-left: 15%;
    margin-top: -15%;
    padding: 0;
}

.deliciously{
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 110px;
    color: #493f39;
    margin-left: 5%;
    margin-top: 100px;
}

/* --- Scrolling text ---*/

#single{
    padding: 5% 0;

}

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

#continuous{
background-color: #4a6e60;
padding: 5% 0;
}

#single{
width: 100%;
display:flex;
flex-direction:column;
align-content:center;
justify-content:center;
font-family:sans-serif;
font-size: 80pt ;
background-color: #4a6e60;
padding: .5%;
}

.scrolling-text { 
color: #152c41;
padding: 3% 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: loop 10s linear infinite;
font-family: "swiss-721-bt", sans-serif;
font-weight: 900;
font-style: italic;
color: #4d423c;
}

/* mascotman */

body{
    margin-top: 0;
}

.part2{
    display: flex;
}


.mascot{
    flex: 50%;
    margin-left: 175px;
    margin-top: 75px;
}

.Ingredients2{
    font-size: 55pt;
    color: #7a243e;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    flex: 25%;
    margin-top: 50px;
}

.mushroom{
    font-family: "bahnschrift", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 54px;
}

.bag{
    margin-top: 300px;
    margin-right: 250px;
}


/* mouth */

body{
    margin: 0;
}

.mouths{
    display: flex;
    align-items: center;
    margin-top: 100px;
    padding: 3%;
}

.BLUE{
    flex: 25%;
    margin-left: 100px;
}

.PINK{
    flex: 25%;
    margin-left: 25px;
}

.RED{
    flex: 25%;
    margin-left: 25px;
}

.YELLOW{
    flex: 25%;
    margin-left: 25px;

}

.info{
    display: flex;
    align-items: center;
    margin-top: -50px;
    padding: 3%;
}

.BLUE1{
    flex: 25%;
    margin-left: 100px;
}

.PINK2{
    flex: 25%;
    margin-left: 25px;
}

.RED3{
    flex: 25%;
    margin-left: 25px;
}

.YELLOW4{
    flex: 25%;
    margin-left: 25px;

}

.body{
    margin: 0;
}

.footer{
    display: flex;
    align-items: center;
    margin-top: 10%;
    background-color: #154130;
}


.About1 {
    font-size: 40pt;
    color: #7a243e;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    flex: 33%;
    margin-left: 5%;
}

.Shop2 {
    font-size: 40pt;
    color: #7a243e;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    flex: 33%;
    margin-left: -110%;
}

.Ingredients3 {
    font-size: 40pt;
    color: #7a243e;
    font-family: "rl-folklor", sans-serif;
    font-weight: 900;
    font-style: normal;
    flex: 33%;
    margin-left: 5%;
}

.copyright{
    margin-right: 100px;
}