:root{
    --clr-box:#ffc881;
    --clr-nav:#ffd5d5;
    --clr-bg:#fffafa;
    --clr-b-box: #070505;
    --clr-lnk: hsl(0, 100%, 40%);
    --clr-txt:#222222;
    --clr-boxshadow: rgba(0, 0, 0, 0.6);
    --fs-sml:1rem;
    --fs-mdm:1.5rem;
    --fs-big:3rem;
    --fs-smlst:0.75rem;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
body{
    font-family: "Mali", cursive;
    width: 1000px;
    margin: auto;
    font-size: var(--fs-sml);
    background-color: var(--clr-bg);
    color: var(--clr-txt);
}
/* Header */
.header{
    padding: 1.5rem 0;
    margin: auto;
    font-weight: 600;
    text-align: center;
}
.logo{
    height: 40px;
    margin-bottom: 1rem;
}
.container{
    position:relative;
    background:var(--clr-nav);
}
nav > .bars > div{
    background:var(--clr-box);
    width:20%;
    border: solid 1px;
    position:absolute;
    height:100%;
    transition: left 0.2s ease;}
nav > .bars > div:nth-child(2){
    left:50%
}
nav ul{
    display:flex;
    justify-content: space-evenly;
    position:relative;
    z-index:1;
}
nav ul li{
    padding:0.5rem 0;
    margin:0;
    text-align: center;
    cursor: pointer;
}
/* Top Section */
.top-section{
    width: 90%;
    margin: auto;
    height: 1000%;
    margin-bottom: 2rem;
}
.top-section>header{
    margin-top: 2rem;
}
.main-h1{
    font-size: var(--fs-big);
    margin: 1rem 0;
}
.main-h2{
    font-size: var(--fs-mdm);
}
.main-h3{
    margin: 1rem 0;
}
.main-list{
    margin: 2rem 0 2rem 2rem;
}
.main-list>li{
    list-style: circle;
}
.top-section>img{
    width: 50%;
    float: right;
}
.link{
    text-decoration: underline;
    font-style: italic;
    text-decoration-color: var(--clr-lnk);
    text-decoration-thickness: 4px;
}
.mid-section{
    width: 100%;
    padding: 2rem;
    height: 100%;
}
.mid-section>article{
    display: flex;
    justify-content: space-around;
    border-radius: 16px;
    margin: 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: solid var(--clr-box) 4px;
}
.mid{
    text-align: center;
    align-self: center;
    background-image: linear-gradient(to right,  var(--clr-nav), var(--clr-box));
    padding: 1rem;
    margin-bottom: 2rem;
}
.art-des{
    border: solid 2px var(--clr-nav);
    background-color: var(--clr-b-box);
    flex: 1;
    z-index: 2;
    color: var(--clr-bg);
    padding: 0 1rem;
    margin: 2rem 0 2rem -3rem;
}
.mid-section>article>:nth-child(1){
    flex: 1;
}
.art-img{
    border-radius: 8px;
    width: 100%;
    height: auto;
    border: solid 1px var(--clr-nav);
}
.txt{
    margin: 1rem 0rem;
}
.low-section{
    padding: 0 2rem;
    margin-bottom: 2rem;
    text-align: center;
    height: 100%;
}
textarea{
    align-self: center;
    margin: 0 auto;
}
#contact{
    background-image: linear-gradient(to left,  var(--clr-nav), var(--clr-box));
    padding: 1rem;
    margin-bottom: 2rem;
}
#contactForm{
    margin-top: 1rem;
}
.search-box{
    font-family: "Mali", cursive;
    font-weight: 500;
    width: 60%;
}
#formMessage{
    font-weight: 500;
    color: var(--clr-lnk);
}
.send-btn{
    height: 2rem;
    border: solid 2px var(--clr-txt); 
    font-size: var(--fs-sml); 
    background-color: inherit;
    color: var(--clr-txt);
    font-family: "Mali", cursive;
    padding: 0 1.5rem;
    font-weight: 500;
}
footer{
    padding: 0.5rem 2rem;
}
.small-txt{
    font-size: var(--fs-smlst);
}

@media(max-width:1000px){
    :root{
        --fs-sml:0.95rem;
        --fs-mdm:1.25rem;
        --fs-big:1.5rem;
        --fs-smlst:0.65rem;
    }
    body{
        width: 90%;
    }
}
@media(max-width:850px){
    :root{
        --fs-sml:0.9rem;
    }
    .mid-section>article{
        display: block;
    }
    .art-des{
        margin: -1rem 1rem 1rem 1rem;
    }
}
@media(max-width:625px){
    :root{
        --fs-sml:0.85rem;
        --fs-mdm:1.1rem;
        --fs-big:1.45rem;
        --fs-smlst:0.6rem;
    }
    body{
        width: 90%;
    }
    .mid-section,.low-section{
        padding: 0 1rem;
    }
    .search-box{
    width: 90%;
}
}