*  {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

html, body{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;    
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url("../imgs/main-background.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
    overflow-y: auto;

}

@keyframes menuBtnSlideDown {
    from { top: -5rem; }
    to   { top: 1%; }
}

#menu-btn{
    position: fixed;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    top: 1%;
    left: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0.25rem solid cyan;
    box-shadow: 0.1rem 0.1rem 0.1rem black;
    outline: none;
    background: blue;
    color: white;
    font-size: 1em;
    transition: filter 200ms cubic-bezier(.71,1.58,.84,.84), background 200ms cubic-bezier(.71,1.58,.84,.84);
    animation: menuBtnSlideDown 2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    z-index: 101;
}

#menu-btn:active, #menu-btn:hover{
    filter: drop-shadow(0rem 0rem 0.75rem cyan);
    background: rgb(0, 22, 121);
}

#menu-btn:focus{
    box-shadow: 0rem 0rem 0.1rem 0.1rem cyan;
}

main{
    width: 100%;
    padding: 1rem;
    z-index: 1;
}

main{
    transition: transform 0.5s ease, opacity 0.5s ease;
}

main.modal-open {
    transform: translateX(100%);
    opacity: 0;
}

main h1{
    margin: 0.75rem 0.5rem;
    background: transparent;
    color: white;
    font-size: clamp(1.25em, 7vw, 3.5em);
    text-align: center;
    position: relative;
    padding: 1rem 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

main h1.visible {
    opacity: 1;
    transform: translateY(0);
}

main h1:before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    border-radius: .5rem;
    box-shadow: 0rem 0rem 0.1rem 0.1rem rgba(0,0,0,0.15);
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, rgba(255,255,255,0.5),transparent);
    backdrop-filter: blur(10rem);
    z-index: -1;
}