/* Set up */
:root{
    --dark:#0E0A0E;
    --bright:#dfe9ba;
    --red:#590000;
    --green:#07250a;
    --yellow: #FEF7D2;
    --grey: #a4a4a4;
    --orange: #e7b52a;
    --blue: #8FB2E0;
}
html,body {
    margin:0;
    padding:0;
    width:100%;
    min-height:100vh !important;
    background-color: rgba(0,0,0,0);
    color: var(--dark);
    font-family: 'Roboto Slab', serif;
}

/* Animation */
#gradient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    --gradient-color-1: var(--dark); 
    --gradient-color-2: var(--blue);  
    --gradient-color-3: var(--yellow);
    --gradient-color-4: var(--red); 
    z-index:-1;
    opacity: 1;
    transform: rotate(90);
    min-height:100% !important;
}

/* Text */
.logo{
    font-family: 'Playfair Display', serif;
}
.row .logo{
    color: var(--dark);
}

/* Content */
.container{
    z-index: 2;
    padding-top: 86px;
    width: 100%;
    /* background-color: rgba(0,0,0,0.4); */

    background-color: rgba(255,255,255,.75);
}

main{
    /* background-color: rgba(255,255,255,0.8); */
    min-height: 100vh;

}

.header{
    z-index: 2;
    transition: .5s;
    width: 100%;
    position: fixed;
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.4); */
    top: 0;
    left:0;
    height: 86px;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: row;
    background-color: rgba(255,255,255,0);
    color: var(--dark);
}
.header a{
    width: 33.33%;
    text-decoration: none;
    color: var(--dark);
}
.navbar{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.navbar a h1{
}
.navbar a{
    display: block;
    margin: auto;
    text-align: center;
    color: var(--dark);
    text-decoration: none;
    font-size: 1.2em;
    transition: .2s;
}
.navbar a:hover{
    color: #e7b52a;
}
.nav_selected{
    text-decoration: underline !important;
}

.row{
    text-align: center;
}
.row p{
    padding: 0 5%;
}


.home .row1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 100vh;
}
.home .row img{
    width: 500px;
    margin: auto;
    -webkit-filter: drop-shadow(0px 5px 5px #222222);
    filter: drop-shadow(0px 5px 5px #222222);
    /* box-shadow: 0px 0px 5px 10px rgba(0,0,0,0.2); */
    /* fill-opacity: .6;
    border-top: 120px solid #aaaaaa ;
    border-bottom: 120px solid #aaaaaa ;
    border-left: 20px solid #aaaaaa ;
    border-right: 20px solid #aaaaaa ;
    border-radius: 3px; */
}
.home .row2{
    font-family: 'Courier New', Courier, monospace;
    padding: 75px 0 250px;
    font-size: 1.3em;
}


.about h1.logo{
    text-align: center;
    font-size: 3em !important;
    margin: 0;
    padding:20px;
}
.about .row{
    display: flex;
    min-height: 70vh;
    padding: 20px 5%;
}
.about .row p{
    font-size: 1.7em;
    font-weight: 500;
    font-family: 'Courier New', Courier, monospace;
    f
    text-align: justify;
    margin: auto;
}
.about .row img{
    width: 30%;
    height: 30%;
    margin: auto;
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);

}
.about .row1{
}
.about .row2{
    flex-direction: row-reverse;
}

footer{
    display: flex;
    justify-content: space-evenly;
    background-color: rgba(0,0,0,0.4);
    color: var(--bright);
    padding: 20px;
}

/* Mobile */
@media only screen and (max-width: 600px) {
    .header .navbar{
        font-size: 65% !important;
        width: 50%;
    }
    #header h1{
        width: 50%;
    }
    .home .row img{
        width: 100% !important;
    }
    .home .row2{
        min-height: calc(100vh - 350px);
        padding: 50px 0 0 ;
        justify-content: space-around;
    }
    .about .row{
        flex-direction: column;
    }
  }