body{

    margin: 0%;

    background-color: #544C4A;
    color: #D6CFC7;

    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;

}

#logo{

    max-width: 300px;

}

main{


    p{

    text-align: justify;

}

}

header{

    position: sticky;

    text-align: center;

    border-bottom: #D6CFC7 1px solid;

    padding: 1rem;

}


menu{

    border-bottom: #D6CFC7 1px solid;    

    margin: 0;

    text-align: center;

    position: sticky;

    bottom: 0;

    z-index: 99;

    backdrop-filter: blur(10px);

    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

    mask: linear-gradient(transparent, rgba(0,0,0,.8), 30px black, black);

    vertical-align: bottom;



}

#dropdownMenu{

    display: flex;

    flex-direction: row;

    justify-content: space-around;

    padding-top: 1rem;

}

#dropdownButton{

    display: none;

    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: #D6CFC7;

}



.icon{

    text-align: center;

}

a{

    color: #D6CFC7;

}

#contents{

    text-align: justify;
    padding: 1rem;

}


@media screen and (max-width: 80rem) {
    
    main{

        display: block;

    }

    menu{

        width: 100vw;

        padding: 0;


    }

    #dropdownMenu{

        display: none;

    }


  }


footer{



    text-align: center;
    border-top: #D6CFC7 1px solid;

}