*{margin: 0;
padding: 0;}

html{
    max-width: 100vw;
    overflow-x: hidden;
    }

body{
    font-family: 'Roboto', sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
}


:root{

    --main-green-color: #21b2bd; 
    --blue-color: #3087ff; 
    --pastel-color: #f7f7f7; 
    --purple-color: #7e45bc; 
    --red-color: rgb(182, 36, 36); 
    --backgroundImg :url(../images/Diamond-Sunset.svg);

}

/* =======================
common info
=========================*/

.top-image{
    background-image: var(--backgroundImg);
    height: 30vh;
    width: 100vw;
    color: transparent;
}

nav{
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 20px;
    right: 10vw;
    width: 90vw;
}

nav li{
    display: inline;
    margin-left: 20px;
}

nav li a{
    text-decoration: none;
    color: white;
    border-bottom: 1px solid transparent;
    transition: color 1s, border-bottom 1s ;
}

nav li a:hover{
    color: black ;
    border-bottom: 1px solid var(--purple-color);
}


@media only screen and (max-width: 900px) {
    select#recipe,select#tool,input{
        max-width: 25%;
    }
    nav a{
        font-size: 0.8rem;
    }
}


/* ==========================
main 
============================== */

.presentation-Container{
margin-top:20px;
width: 80vw;
margin: 20vh auto;
}

.presentation-Container ul{
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    align-items: flex-start;    
}

.presentation-Container li{
    list-style-type: none;
    margin-left: 5%;
    margin-bottom: 5%;
    min-width: 200px;
    width: 20%;       
}
.presentation-Container img{
    width: 100%;     
}


/* ==========================
footer
============================== */

footer{
    background: black;
    width: 100vw;
    height: 20vh;
}