:root {
    font-size: 62.5%;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    font-size: 1.6rem;
    background: #333333 ;
    background-repeat: none;
    background-position: center;
 background-size:cover;
 
 background-attachment: fixed;

}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.one h1{
    font-family:"hammersmith one";
    font-size:1.3rem;
    color:white;
}
.contain{
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    margin-top:20px;
}
.section-1{
    width:700px;
    border:4px solid white;
    border-radius:15px;
    padding:0.5em;
    padding-left:1em;
    display:flex;
    flex-direction: column;
    gap:1em;
    box-shadow:0px 0px 5px white;
    background:#333333 ;
}
.section-1 h2{
    font-family:kaushan script;
    letter-spacing:0.1em;
    color:lightgray;
}
.searchBox{
display:flex;
justify-content: space-around;
}
input[type='text']{
    background:transparent;
    font-family:'hammersmith one';
    outline:none;
    padding:0.5em;
    border:none;
    color:white;
    width:400px;
    border-bottom:2px solid lightgray;
}
input[type='text']::placeholder{
    color: rgb(135, 113, 113);
}
#searchBtn{
    width:60px;
    border:2px solid yellow;
    border-radius:5px;
    box-shadow:0px 0px 5px yellow;
    font-family:'hammersmith one';
    background:darkgray;
    color:rgb(3, 1, 1);
    transition:0.3s;
}
#searchBtn:hover{
    transform: translateY(-5px);
}

.one{
   
display:flex;

flex-direction:column;
justify-content: space-around;
gap:3em;
padding:2em;

}
.img{
    display:flex;
    justify-content:center;

}
.one .img img{
    width:200px;
    object-fit: contain;
    border:4px solid rgb(225, 203, 203);
    box-shadow:0px 0px 6px;
    border-radius:10px;


}
.head{
    display:flex;
    justify-content:space-around;
    font-family:'kaushan script';
   
    gap:5em;
    color:lightgray;
}
.two{

    width:600px;
}
.mix{
    display:flex;
    justify-content:space-around;
}
.list ul li{
    font-family:poppins;
    list-style: circle;
    color:silver;
    font-size:1.3rem;
}
.recipe{
    color:gold;
    font-family:poppins;
    width:60ch;
    border-left: 2px solid silver;
    font-size:1.4rem;
    padding-left:0.8em;
}
@media (max-width:697px){
    .section-1{
        width:500px;
    }
    input[type='text']{
        width:300px;
    }
    .recipe{
        font-size:1.1rem;
    }
    .list ul li{
        font-size:1.1rem;
    }
    .mix{
        gap:0.5em;
    }
}
@media (max-width:513px){
    .section-1{
        width:390px;
    }
    input[type='text']{
        width:250px;
    }
    .recipe{
        font-size:0.8rem;
        width:75ch;
    }
    .list ul li{
        font-size:1rem;
    }
    .mix{
        gap:0.5em;
    }
    .head{
        font-size:1.2rem;
        gap:2em;
    }
}
@media (max-width:400px){
    .section-1{
        width:290px;
    }
    input[type='text']{
        width:150px;
    }
    .recipe{
        font-size:0.6rem;
        width:80ch;
    }
    .list ul li{
        font-size:0.6rem;
    }
    .mix{
        gap:0.5em;
    }
    .head{
        font-size:0.8rem;
        gap:2em;
    }
}