style.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:"Poppins" , sans-serif;
    
}

body{
    background-color:lightseagreen;
    font-size: 16px;
    padding: 3em 2.8em;
    margin-top: 0;
}
h3 {
    text-align: center;
    margin-top: 1.8em;
    color: black;
    font-weight: 400;
}

.container {
    background-color: white;
    font-size: 16px;
    padding: 3em 2.8em;
    width: 90vw;
    max-width: 32em;
    position: absolute;
    transform : translate(-50%);
    left: 50%;
    color: black;
    top: 2em;
    border-radius: 0.7em;
    box-shadow: 1em 1.2em 2.5em rgba(42, 96, 114, 0.4);
}
.search-container {
    width: 100%;
    display:grid;
    grid-template-columns: 9fr 3fr;
    gap: 1rem;
    
}

.search-container input{
    font-size: 14px;
    padding: 0.6em;
    border-color: lightseagreen;
    outline: none;
    border-radius: 0.6em;
}

.search-container button{
    font-size: 14px;
    padding: 0.6em;
    background-color: lightseagreen;
    border-color: lightseagreen;
    font-weight: 500;
    border-radius: 0.5em;
}

img{
    display:block;
    width: 50%;
    margin: 2em auto 0 auto;
    margin-bottom: 10px;
}
#recipe{
    position:absolute;
    background-color: white;
    min-height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 0.6em;
    display: none;
}

#recipe pre{
white-space:break-spaces;
word-wrap :break-word;
padding: 20px 20px;
display:flexbox;
font-size: 1em;
}

#hide-recipe {
    font-size: 1em;
    position: relative;
    width: 1.8em;
    height: 1.8em;
    background-color: lightseagreen;
    border: none;
    top: 1.2em;
    left: 90%;
    border-radius: 0.3em;
    top: 10px;
}

#hide-recipe button{
    align-self: right;
}

.details{
background-color: lightseagreen;
padding: 0.6em;
text-align: center;
position: relative;
}
 /* name of the dish */
.details h2{  
    font-size: 1.5em;
    font-weight: 600;
}
/* name of the area / cuisine */
.details h4{
    font-size: 1em;
    font-weight: 400;
}

#show-recipe{
    font-size: 1em;
    position: relative;
    left: 77%;
    padding: 0.8em 0.5em;
    background-color: lightseagreen;
    border: none;
    border-radius: 0.3em;
    font-weight: 500;
}

ul{
    font-size: 1em;
    position:relative;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.8em 1.1em;
    padding: 1.2em 0 0 1.2em;
}

/* @media only screen and (max-width: 500px) {
    .container{
        font-size: 14px;  
        overflow: none; 
    }

    img{
        width: 70%;
        margin-bottom: 10px;
    }
    .search-container{
        width: 100%;  
        display: flex;
        flex-direction: column;
        
    }
    .search-container input{
         align-items: center;
         text-align: center;
        display:inline-block;
    }
    .search-container button{
        display: inline-block;
        position: relative;
        text-align: center;
    }
    
    .view-recipe-btn{
        margin-right: 30px;
        margin-bottom: 0px;
    }
    .hide-button{
        margin-right: 30px;
    }
    #hide-recipe{
        margin-block-end: 20px;
    }
} */
@media only screen and (max-width: 300px){
    .container{
        font-size: 14px; 
        overflow: none;
    }
    .details h2{
        font-size: 1.2em;
    }
    .details h4{
        font-size: 0.8em;
    }
    img{
        width: 80%;
        margin-bottom: 10px;
    }
    .search-container{
        width: 100%;
        display:flex;
        flex-direction: column;
    }
    .search-container input{
         align-items: center;
         text-align: center;
         font-size: 12px;
    }
    .search-container button{
        text-align: center;
        font-size: 12px;
    }
    
    .view-recipe-btn{
        margin-right: 30px;
        margin-bottom: 0px;
    }
    .hide-button{
        margin-right: 300px;
    }
}

@media (300px <= width <= 500px) {         
    .container{
        font-size: 14px; 
        /* overflow: none; */
        /* display: inline-block;   */
    }
    .details h2{
        font-size: 1.2em;
    }
    .details h4{
        font-size: 0.8em;
    }
    img{
        width: 80%;
        margin-bottom: 10px;
    }
    .search-container{
        /* margin: 0 auto 0 auto; */
        width: 100%;
        /* align-items: center; */
        /* margin-right: 100px; */
        display:flex;
        flex-direction: column;
    }
    .search-container input{
        text-align: center;
         align-items: center;
         font-size: 12px;
    }
    .search-container button{
        /* display: inline-block; */
        /* position: relative; */
        text-align: center;
        font-size: 12px;
    }
    
    .view-recipe-btn{
        margin-right: 30px;
        margin-bottom: 0px;
    }
    .hide-button{
        margin-right: 300px;
    }
    
}