/*CSS Document     */


@import url(https://fonts.googleapis.com/css?family=Merriweather);
@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Sans);
@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed);
@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
@import url(https://fonts.googleapis.com/css?family=Space+Mono);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    background:rgba(0, 0, 0, 1.0);
    background-image:url("images/underwater_city.png");
	height: 100%;
	margin: 0px;
	padding: 0px;
    z-index:1;
}

#container {
    background:rgba(255, 255, 255, 0);
	position:absolute;
    left:50vw;
    margin-left:-50vw;
	width:100vw;
	height:100vh;
    z-index:2;
    border-width:0px;
    padding: 0px;
    font-size: 1vh;
    top: 0px;
    padding: 0px;
}

header {
    
    background:rgba(0, 0, 0, 1.0);
    top:0vh;
    position:absolute;
    left:50%;
    margin-left:-50vw;
    width:100vw;
    height:18vh;
    z-index:3;
    border-width:0px;
    color:rgb(255, 255, 255);
    padding: 0px;
}

#headertext {
    position:absolute;
    left:9vw;
    top:6vh;
    margin: 0px;
    padding:0px;
    font-family: "Merriweather", serif;
    font-size:4.20vh;
}

#headertext a{
    font-family: "Merriweather", serif;
    font-size:4.20vh;
    color:rgb(255, 255, 255);
    text-decoration:none;
}

#headertext a:visited{
    font-family: "Merriweather", serif;
    font-size:4.20vh;
    color:rgb(255, 255, 255);
    text-decoration:none;
}

#headertext a:hover{
    font-family: "Merriweather", serif;
    font-size:4.20vh;
    color:rgb(255, 240, 255);
    text-decoration:none;
    font-stretch:ultra-expanded;
}

#headersubtext {
    position:absolute;
    left:9vw;
    top:9vh;
    margin: 1vh;
    padding:0px;
    font-family: "Rock Salt", cursive;
    font-size:2.2vh;
}

#headerimage {
    background:rgba(0, 0, 0, 1.0);
    background-image: url("images/Self%20Portrait_FULLCOLOR500X500_TRANSPARENT-01112021-FINAL.png");
    background-repeat: no-repeat;
    background-position:center;
    background-size:contain;
    position:absolute;
    left:75vw;
    width:25vw; 
    height:18vh;
    padding:0px;
}

nav {
    display:block;
    background:rgba(50, 50, 100, 0.7);
    top:18vh;
    position:absolute;
    left:50%;
    margin: 0vw 0vw 0vw -50vw;
    width:100vw;
    height:5vh;
    z-index:3;
    border-width:0px;
    font-size:3.5vh;
    color:rgba(255, 255, 255, 1.0);
    padding-top:0.5vh;
    text-align:center;
}

nav a{
    color:rgb(255, 255, 255);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 3.5vh;
    text-decoration:none;
    padding:0 4vw 0 4vw;
}

nav a:visited{
    color:rgb(255, 255, 255);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 3.5vh;
    text-decoration:none;
}

nav a:hover{
    background-color:rgb(0, 255, 255);
    color:rgb(0,0,0);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: bold;
    font-size: 3.5vh;
    text-decoration:none;
}

article {
    background:rgba(255, 255, 255, 0.75);
    top:23.5vh;
    position:absolute;
    left:50%;
    margin-left:-41vw;
    width:82vw;
    height:70vh;
    z-index:3;
    border-width:0px;
    font-size:2vh;
    color:rgba(0, 0, 40, 1.0);
    overflow: auto;
    padding: 0px;
    font-family: "IBM Plex Sans", sans-serif;
}

article p{
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 2.2vh;
    font-weight:400;
    margin: 0px;
    padding:0px;
    text-indent:3.5vh;
}

article p a{
    color: rgb(213, 31, 219);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 2.2vh;
    font-weight:bold;
    margin: 0px;
    padding:0px;
    text-decoration:none;
}

article p a:visited{
    color:rgb(213, 31, 219);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 2.2vh;
    font-weight:bold;
    margin: 0px;
    padding:0px;
    text-decoration:none;
}

article p a:hover{
    color:rgb(255, 150, 255);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: bolder;
    font-size: 2.25vh;
    margin: 0px;
    padding:0px;
    text-decoration:none;
}

article h1{
    font-family: "IBM Plex Sans", sans-serif;
    font-stretch: extra-expanded;
    font-size: 3.4vh;
    font-weight:600;
    text-align: center;
    margin: 0px;
    padding:0px;
}

article h1 a{
    color:rgb(213, 31, 219);
    font-family: "IBM Plex Sans", sans-serif;
    font-stretch: extra-expanded;
    font-size: 3.4vh;
    font-weight:700;
    font-style:italic;
    margin: 0px;
    padding:0px;
    text-decoration:none;
}

article h1 a:visited{
    color:rgb(213, 31, 219);
    font-family: "IBM Plex Sans", sans-serif;
    font-stretch: extra-expanded;
    font-size: 3.4vh;
    font-weight:700;
    font-style:italic;
    margin: 0px;
    padding:0px;
    text-decoration:none;
}

article h1 a:hover{
    color:rgb(255, 190, 255);
    font-family: "IBM Plex Sans", sans-serif;
    font-stretch: extra-expanded;
    font-size: 3.5vh;
    font-weight:800;
    font-style:italic;
    margin: 0px;
    padding:0px;
    text-decoration:none;
}

article h2{
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 2.85vh;
    font-weight:600;
    font-stretch: condensed;
    margin: 1vh;
    padding:0px;
}

article h2 a{
    color:rgb(213, 31, 219);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 2.85vh;
    font-weight:700;
    font-stretch: condensed;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h2 a:visited{
    color:rgb(213, 31, 219);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 2.85vh;
    font-weight:700;
    font-stretch: condensed;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h2 a:hover{
    color:rgb(255, 190, 255);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 2.95vh;
    font-weight:800;
    font-stretch: condensed;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h3{
    font-family: "Montserrat", sans-serif;
    font-size: 2.2vh;
    font-weight:300;
    font-stretch: condensed;
    margin: 1vh;
    padding:0px;
}

article h3 a{
    color:rgb(213, 31, 219);
    font-family: "Montserrat", sans-serif;
    font-stretch: extra-expanded;
    font-size: 2.2vh;
    font-weight:600;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h3 a:visited{
    color:rgb(213, 31, 219);
    font-family: "Montserrat", sans-serif;
    font-stretch: extra-expanded;
    font-size: 2.2vh;
    font-weight:600;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h3 a:hover{
    color:rgb(255, 190, 255);
    font-family: "Montserrat", sans-serif;
    font-stretch: extra-expanded;
    font-size: 2.25vh;
    font-weight:700;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h4{
    font-family: "Merriweather", serif;
    font-size: 2vh;
    font-weight:500;
    margin: 1vh;
    padding:0px;
}

article h4 a{
    color:rgb(213, 31, 219);
    font-family: "Merriweather", serif;
    font-stretch: extra-expanded;
    font-size: 2vh;
    font-weight:600;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h4 a:visited{
    color:rgb(213, 31, 219);
    font-family: "Merriweather", serif;
    font-stretch: extra-expanded;
    font-size: 2vh;
    font-weight:600;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h4 a:hover{
    color:rgb(255, 190, 255);
    font-family: "Merriweather", serif;
    font-stretch: extra-expanded;
    font-size: 2.1vh;
    font-weight:700;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h5{
    font-family: "Rock Salt", cursive;
    font-stretch: ultra-expanded;
    font-size: 2.2vh;
    font-weight:700;
    margin: 1vh;
    padding:0px;
}

article h5 a{
    color:rgb(213, 31, 219);
    font-family: "Rock Salt", cursive;
    font-stretch: extra-expanded;
    font-size: 2.2vh;
    font-weight:700;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h5 a:visited{
    color:rgb(213, 31, 219);
    font-family: "Rock Salt", cursive;
    font-stretch: extra-expanded;
    font-size: 2.2vh;
    font-weight:700;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h5 a:hover{
    color:rgb(255, 190, 255);
    font-family: "Rock Salt", cursive;
    font-stretch: extra-expanded;
    font-size: 2.25vh;
    font-weight:800;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h6{
    font-family: "Rock Salt", cursive;
    font-stretch:condensed;
    font-size: 1.5vh;
    font-weight:500;
    margin: 1vh;
    padding:0px;
}

article h6 a{
    color:rgb(213, 31, 219);
    font-family: "Rock Salt", cursive;
    font-stretch:condensed;
    font-size: 1.5vh;
    font-weight:600;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h6 a:visited{
    color:rgb(213, 31, 219);
    font-family: "Rock Salt", cursive;
    font-stretch:condensed;
    font-size: 1.5vh;
    font-weight:600;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article h6 a:hover{
    color:rgb(255, 190, 255);
    font-family: "Rock Salt", cursive;
    font-stretch:condensed;
    font-size: 1.6vh;
    font-weight:700;
    font-style:italic;
    margin: 1vh;
    padding:0px;
    text-decoration:none;
}

article code{
    font-family: "Space Mono", monospace;
    font-stretch:expanded;
    font-size: 2vh;
    font-weight:300;
    margin: 1.5vh 1vh 1.5vh 8vh;
    padding:0px;
}

article figcaption{
    font-family: "Merriweather", serif;
    font-stretch:expanded;
    font-size: 1.5vh;
    font-weight:300;
    text-align:center;
}

footer {
    background:rgba(0, 0, 0, 1.0);
    top:93vh;
    position:absolute;
    left:50%;
    margin:0px 0px 0px -50vw;
    width:100vw;
    height:7vh;
    z-index:4;
    border-width:0px;
    font-family: "Merriweather", serif;
    font-size:2vh;
    font-weight:300;
    font-stretch: expanded;
    color:rgba(255, 255, 255, 1.0);
    padding: 0px;
    text-align:center;
}

hr {
    display:block;
    height:2vh;
    width:34vw;
    margin: 1vh 33vw 0px 33vw;
    border-style:none;
    overflow: hidden;
    background-image: url(images/hr_eyes.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}


/* So how about this responsive stuff, eh? */
@media (max-aspect-ratio: 1/1) {
    nav{
        height: 10vh;
    }
    nav a{
        padding:0 9vw 0 9vw;

    }
    article{
        display:flex;
        flex-direction: column;
        top: 28.5vh;
        position:absolute;
        left:50%;
        margin-left:-46vw;
        width:92vw;
        height:70vh;
        z-index:3;
        overflow: auto;
    }
}

/* So how about this responsive stuff, eh? */
/* So how about this responsive stuff, eh? */
/* So how about this responsive stuff, eh? */
/* So how about this responsive stuff, eh? */