body{
    background: url(assets/images/bg-main2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgb(253, 206, 206);;
}

* button{
    min-width: 18rem;
}

/*=== All about header styles are below and within ===*/
header button::before,
header button::after{
    content: "";
    display: block;
    background-color: white;
    width: 2.1rem;
    height: 0.2rem;
    transition: transform 0.3s;
}
header button::after{
    width: 1.8rem;
}
header button .toggle-bar{
    height: 0.2rem;
    margin: .4rem 0;
    transition: transform 0.3s;
}
header input:checked ~ button .toggle-bar{
    transform: scale(0);
}
header input:checked ~ button::before{
    width: 2rem;
    transform: rotate(-45deg) translate(-5px, 10px);
   
}
header input:checked ~ button::after{
    transform: rotate(45deg) translate(-5px, -10px);
    width: 2rem;
}
header nav {
    transform: translateX(100%);
    transition: all 1s;
    z-index: 1;
   
}
header input:checked ~ nav{
    display: block;
    transform: translateX(0%);
    
}
header nav ul li{
    border-bottom: 1px solid transparent;
    padding: .2rem 0;
    transition: .5s;
}
header nav ul li:nth-child(3){
    border-bottom: 1px solid white;
}
header nav ul li:hover{
    border-bottom: 1px solid white;
}


@media only screen and (min-width: 768px){
    header nav {
        transform: translateX(0%);
        transition: all 1s;
       
    }
    header nav ul li{
        border: 1px solid transparent;
        padding: .2rem 1rem;
    }
}
/*=== All about header styles are above and within ===*/


/*=== All about footer styles are below and within ===*/
footer .center article li{
    border-bottom: 2px solid transparent;
    width: fit-content;
    transition: border 0.5s;
}
footer .center article li:hover{
    border-bottom: 2px solid white;
}
footer .socials ul li{
    width: 30px;
    height: 30px;
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border 0.5s;
}
footer .socials ul li:hover{
    border: 2px solid white;
}
/*=== All about footer styles are above and within ===*/