*{
    margin: 0;
    padding: 0;
}
header{
    text-align: center;
    position: fixed;
    width: 100%;
    border-bottom: 2px solid rgb(254, 216, 139);
    padding-bottom: 20px;
    background-color: rgb(253, 249, 244);
    z-index: 99999999;
}
li{
    display: inline-block;
    margin: 10px;
    padding: 5px;
    
}
a{
    text-decoration: none;
    color: turquoise;
    font-size: 24px;
}
a:visited{
    color: turquoise;
}
a:hover{
    text-decoration: none;
}
h1{
    color: rgb(251, 208, 123);
    font-size: 95px;
    margin-bottom: -20px;
    
}
h2{
    color: turquoise;
    font-size: 72px;

}
#opener{
    background-color: rgb(253, 249, 244);
    height: 100vh;
    overflow: hidden;
    padding: 20px;

}
.opening{
    width: 400px;
    /*padding: 100px 0 0 100px; */
    position: absolute;
    top: 250px;
    right: 110px;
    z-index: 999;
    transition: transform 0.3s ease-in-out; 



}
.opening:hover{
    transform: translateY(-10px) rotate(25deg);
}
.opening:hover h1{
    color:  rgb(255, 170, 0);
}
.opening .leckerli-one-regular{
    color: turquoise;
}
.opening h1{
    font-size: 96px;
}
.falling{
    background-image: url(images/fallling.png);
    height: 600px;
    width: 800px;
    background-size: contain;
    position: absolute;
    top: 150px;
    right: -650px;
    z-index: 998;
    transform: rotate(-15deg);
    background-repeat: no-repeat;
    
}
.falling:hover{
    transition: ;
   
}
.cube{
    background-image: url(images/cheddar.png);
    height: 600px;
    width: 800px;
    background-size: contain;
    position: absolute;
    top: 300px;
    left: 0px;
    z-index: 997;
    transform: scaleX(-1);
    background-repeat: no-repeat;
    overflow: hidden;
}
#Types{
    background-color: rgb(204, 255, 250);
    height: 1050px;
}

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
text-align: center;
width: 85%;
margin: 0 auto;
}
.div1 { grid-area: 1 / 1 / 2 / 6; 
    background-image: url(images/grated.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div2 { grid-area: 2 / 1 / 3 / 2; 
    background-image: url(images/blue.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div3 { grid-area: 2 / 2 / 3 / 3; 
    background-image: url(images/brie.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div4 { grid-area: 2 / 3 / 3 / 4; 
    background-image: url(images/parm.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div5 { grid-area: 2 / 4 / 3 / 5; 
    background-image: url(images/mozzarella.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div6 { grid-area: 2 / 5 / 3 / 6; 
    background-image: url(images/manchego.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div7 { grid-area: 3 / 1 / 4 / 2; 
    background-image: url(images/gruyere.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div8 { grid-area: 3 / 2 / 4 / 3; 
    background-image: url(images/feta.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div9 { grid-area: 3 / 3 / 4 / 4; 
    background-image: url(images/gouda.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div10 { grid-area: 3 / 4 / 4 / 5; 
    background-image: url(images/cheddarblock.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 
.div11 { grid-area: 3 / 5 / 4 / 6;
    background-image: url(images/goat.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} 

.parent > div { /*all the divs inside the class name parent*/
    height: 300px;
    /* display flex property to center the contents both vertically and horizotally */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    
}
.div1 h2{
    color:  rgb(40, 144, 132);
    text-decoration: ;
    font-size: 78px;
}
h4{
    color: turquoise;
    font-size: 30px;
}
.div2:hover {
  transform: scale(1.2); 
}
.div3:hover {
  transform: scale(1.2); 
}
.div4:hover {
  transform: scale(1.2); 
}
.div5:hover {
  transform: scale(1.2); 
}
.div6:hover {
  transform: scale(1.2); 
}
.div7:hover {
  transform: scale(1.2); 
}
.div8:hover {
  transform: scale(1.2); 
}
.div9:hover {
  transform: scale(1.2); 
}
.div10:hover {
  transform: scale(1.2); 
}
.div11:hover {
  transform: scale(1.2); 
}
#Pairings{
    background-color: rgb(253, 249, 244);
    padding-bottom: 100px ;
}

.parent2 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
text-align: center;
width: 85%;
margin: 0 auto;
}
.title{
    height: 150px;
    text-align: center;
    padding-top: 50px;
}
.Honey { grid-area: 1 / 1 / 2 / 3; 
    background-image: url(images/honey.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out; 

}
.Honey:hover{
    transform: rotate(20deg);
}
.honey { grid-area: 1 / 3 / 2 / 6; 

}
.Fruit { grid-area: 2 / 1 / 3 / 4; 

}
.fruit { grid-area: 2 / 4 / 3 / 6; 
    background-image: url(images/fig.png), url(images/pear.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out; 

}
.fruit:hover{
    transform: rotate(-20deg);
}
.Jam { grid-area: 3 / 1 / 4 / 3; 
    background-image: url(images/Jam.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out; 

}
.Jam:hover{
    transform: rotate(20deg);
}
.jam { grid-area: 3 / 3 / 4 / 6; 

}
.Wine { grid-area: 4 / 4 / 5 / 6; 
    background-image: url(images/Wine.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out; 

}
.Wine:hover{
    transform: rotate(-20deg);
}
.wine { grid-area: 4 / 1 / 5 / 4; 


}
.parent2 > div { /*all the divs inside the class name parent*/
    height: 300px;
    /* display flex property to center the contents both vertically and horizotally */
    display: flex;
    justify-content: center;
    align-items: center;
}
h3{
    font-size: 48px;
    color: turquoise;
}
#Closing{
    min-height: 100vh;
    background-color: rgb(204, 255, 250);
    position: relative;
    overflow: hidden;
}
.principles{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 100px ;
}

.closer{
    text-align: center;
    width: 75%;
    /*padding: 100px 0 0 100px; */
    /*position: absolute;
    top: 3500px;
    left: 110px;*/
    z-index: 999;
    transition: transform 0.3s ease-in-out;
    
}
.closer:hover{
    transform: scale(1.2);
}
.Cheeses{
    background-image: url(images/Cheeses.png);
    bottom: -200px;
    width: 120%;
   
    background-size: cover;
    position: absolute;
    /*top: 3500px;
    right: -150px;
    z-index: 998;*/
    background-repeat: no-repeat;
    background-position: bottom center;
    opacity: 0.60;
    height: 1000px;

}
.closer .leckerli-one-regular{
    color: turquoise;
}
.closer .spicy-rice-regular{
    color: rgb(255, 170, 0);
}


/*fonts*/
.spicy-rice-regular {
  font-family: "Spicy Rice", serif;
  font-weight: 400;
  font-style: normal;
}
.leckerli-one-regular {
  font-family: "Leckerli One", cursive;
  font-weight: 400;
  font-style: normal;
}