body{

    padding: 0%;
    margin: 0%;
}

html
{

    background: fixed;

    background-color: #201030;

    background-image: url(media/sketchbook.jpg);
    background-size: 40%;
    

    background-blend-mode: multiply;

    color: #c0d0d0;

    font-family: "Lexend", sans-serif;

    /*font-family: "EB Garamond", serif;*/

}

p{

    font-size: 18px;

    /*letter-spacing: 1px;

    font-weight: 500;*/

}

h1, h2, h3, h4, h5, h6{

    font-family: "EB Garamond", serif;
    font-variant-caps: small-caps;

    text-align: center;

}

h2, h3, h4, h5, h6{

    font-family: "Lexend", sans-serif;
    font-weight: 300;

}

#widescreen{

    display: flex;

    justify-content: center;
    
    flex-direction: row;


    padding-bottom: 0%;

    margin: 0 10rem 1rem;

    top: 0;

    position: sticky;

    h1{

        padding-top: 3rem;
        padding-bottom: 1rem;

    }


    img{

        width: 10rem;

    }

}

.wing{

    display: grid;

    grid-template-columns: 1fr 1fr;

}

#innerHeader{

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    background-color: rgba(40, 23, 66, 0.8);

    width: 100%;

    backdrop-filter: blur(4px);

    border-bottom: #FA0 13px solid;

    border-top: none;

}



#title {

    background-image: url("/media/young.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    line-height: 3rem;

    margin: 0%;

    

}

a
{
    color: #c0d0d0;

    transition-property: letter-spacing;
    transition-duration: 1s;

}



main{

    margin: 0 20rem;

    text-align: justify;

    padding: 2rem;

    background-color: rgba(0, 0, 0, 0.4);

    border: #100020 2px solid;


}

.left{

    transform: scaleX(-1);

}


footer{


    height: 4rem;

    margin: auto;

    display: flex;

    justify-content: center;

    img{

        width: auto;

        object-fit: contain;

    }

    text-align: center;

    backdrop-filter: blur(4px);

    font-weight: 300;

    font-variant-caps: small-caps;

    padding: 0.3rem;
    
    background-image: -moz-linear-gradient(rgba(0,0,0,0),     rgba(0, 0, 0, 0.3));

    p{

        background-color: #100020;

        width: fit-content;

        padding: 1rem;

        border: #FA0 3px solid;

        border-left: #FA0 9px double;

        border-right: #FA0 9px double;

        margin: 0%;

    }

    margin-top: 1rem;

    filter: drop-shadow(4px 4px 4px #000);


}






#mobile{

    margin: auto;

    display: none;

    position: fixed;

    top: 0%;

    width: 100vw;


    img{

        width: 8rem;

        margin: auto;

        z-index: 999;

        display: flex;

    }



    #collapsed{

        display: none;

        top: 0;

        flex-direction: column;

        justify-content: center;

        width: 100vw;

        height: 100vh;

        z-index: 997;

    }

    #title{

        padding-top: 1rem;

    }

}

#hamburger{

    color: #FA0;

    object-fit: cover;

}

header{

    z-index: 996;

    a{

        text-decoration: none;

    }

    a:hover{

        color: #cec7a1;
    
        letter-spacing: .2rem;

    
    }

}

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

    header{

        margin: 0;

    }

    #widescreen{

        margin: 0 0rem 1rem;

    }

    main{

        margin: 0 10rem ;

        background: none;

    }
    
}

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



    #widescreen{

        display: none;

        h3{

            padding: 0%;
            margin: 0%;
            line-height: 0%;

        }

    }

    main{

        margin: 0;

    }



    #mobile{

        display: block;
        flex-direction: column;
        

    }

    footer{

        height: 2rem;


        p{

            padding: 2px;

        }

    }
    
}