html{
    font-family: sans-serif;
}

.content{
    width: 100%;
    margin: auto;
    margin-bottom: .5%;
}

@media screen and (max-width: 800px){
    .content{
        width: 100%;
    }
}

h1{
    margin-top: .25%;
    margin-bottom: .25%;
    color: #B1A2CA;
    font-size: 28pt;
    /*text-shadow: 0 0 3px #AAAAFF, 0 0 5px #AAAAFF;*/
}

h2{
    margin-top: .5%;
    margin-bottom: .5%;
    color: #B1A2CA;
    font-size: 20pt;
    /*text-shadow: 0 0 3px #AAAAFF, 0 0 5px #AAAAFF;*/
}

h3{
    color: #B1A2CA;
}

h4{
    color: #B1A2CA;
}

p{
    color: #D6DAF0;
}

hr{
    border-bottom: 3px solid #aeb8d5;
}

body{
    max-width: 60%;
    margin: auto;
    /*background-color: #09040d;*/
    background: linear-gradient(0deg, rgba(9,4,13,1) 0%, rgba(23, 10, 34, 1) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
}

@media screen and (max-width: 800px){
    body{
        max-width: 95%;
    }
}

#banner{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    color: green;
}

nav{
    margin-top: 1%;
    margin-bottom: 2%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.navLink:link, .navLink:visited{
    color: #B1A2CA;
    background-color: #12091b;
    padding: .5%;
    padding-top: 0.05%;
    padding-bottom: 0.05%;
    border: 1px solid #bcc0d4;
    text-decoration: none;
    box-shadow: 3px 3px #bcc0d4;
    margin-bottom: 1.5%;
    font-weight: bold;
}

.navLink:hover, .navLink:active{
    background-color: white;
    padding: .5%;
    padding-top: 0.05%;
    padding-bottom: 0.05%;
    border: 1px solid #B1A2CA;
    text-decoration: none;
    margin-bottom: 1.5%;
}

@media screen and (max-width: 800px){
    .navLink:link, .navLink:visited{
        padding: 3.5%;
        padding-top: 0.25%;
        padding-bottom: 0.25%;
    }

    .navLink:hover, .navLink:active{
        padding: 3.5%;
        padding-top: 0.25%;
        padding-bottom: 0.25%;
    }
}

a{
    color: hsl(263 27% 66% / 1);
}

li{
    margin-bottom: .5%;
    color: #D6DAF0;
}

/*li a{
    color: #B1A2CA;
    background-color: #12091b;
    padding-top: .5%;
    padding-bottom: .5%;
    padding-left: 1%;
    padding-right: 1%;
    border: 1px solid #bcc0d4;
    text-decoration: none;
    box-shadow: 1px 1px #bcc0d4;
    margin-bottom: 1%;
    font-weight: bold;
}

.li a:hover{
    color: hsl(263 27% 66% / 1);
    background-color: white;
    padding-top: .5%;
    padding-bottom: .5%;
    padding-left: 1%;
    padding-right: 1%;
    padding: 1%;
    border: 1px solid #B1A2CA;
    text-decoration: none;
    margin-bottom: 1%;
}*/

#bannerImg{
    padding: 1%;
    max-width: 100%;
}

#navImg{
    display: block;
    margin-top: 1%;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

.mainContent{
    display: block;
    padding: 1%;
    margin: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: #12091b;
    /*border: 1px solid #B7C5D9;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(183, 197, 217);
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(183, 197, 217);
    border-left: none;
    border-top: none;*/
    border: 1px solid #bcc0d4;
    box-shadow: 5px 5px #bcc0d4;
}

.pageDirectory{
    list-style-type: none;
    margin: 0;
    padding: 1%;
}

li{
    padding: .5%;
}

footer{
    margin: 1%;
    display: flex;
    align-items: center;
    /* flex-wrap: wrap;*/
    /*flex-direction: row;*/
    justify-content: center;
}

.webButton{
    margin-left: .5%;
}

iframe{
    border: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

code{
    font-size: 12pt;
    background-color: #bcc0d4;
    margin: .5%;
    padding: .5%;
    border: 1px solid black;
}

figcaption {
  color: #D6DAF0;
}

@media screen and (max-width: 800px){
    #waifu {
        display: none;
    }
}

#waifu {
    background-image: url(../img/haruhi.png);
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: left bottom;
    float: left;
    position: fixed;
    min-width: 100%;
    top: 0;
    bottom: -20px;
    right: 5px;
    opacity: 1.0;
    z-index: -1;
}