/* Full Page */
body {
    margin: 0;
    background-color: black;
}
#sitebg {
    width: 100%;
    height: 100%;
    position: fixed;
    object-fit: cover;
    z-index: -1;
    border: 0;
    opacity: 0.3;
}



/* Sidebars and Header */
.menuBtn {
    display: inline;
    padding: 1.15em;
    cursor: pointer;
}
.menuBtnText {
    cursor: pointer;
}
header {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
    border-bottom: 2px solid white;
    background-image: linear-gradient(to bottom, #000d, #112a);
    display: flex;
}



#navBar {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    overflow: auto;
    width: 16em;
    height: 100%;
    background-image: linear-gradient(to right, #000d, #112a);
    border-right: 2px solid white;
}
#navBar a {
    display: block;
    font-family: 'Audiowide';
    text-align: center;
    text-decoration: none;
    padding: 0.3em 0 0.3em 0;
    margin-bottom: 0.5em;
}
#navActive, #navBar a:hover {
    color: black;
    background-color: white;
    font-weight: normal;
}



/* Main Contents */
main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4em 1em;
}
main > img {
    max-height: 18em;
}
.charImage {
    float: right;
    padding-left: 1em;
}
.centerAligned {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
@media screen and (max-width: 520px) {
    main > img, .charImage {
        float: none;
        padding: 0;
        width: calc(100vw - 8em);
        max-height: 100vh;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #mediaSection span img {
        width: calc(100vw - 6em);
    }
}



/* Misc Stuff Page */
.button {
    min-width: 31px;
    height: 31px;
}
.buttonList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 1em 0 1em;
    gap: 0.2em;
}
#showMedia {
    font-size: 1.2em;
}
#mediaSection {
    display: none;
}
#mediaSection img {
    max-width: 48em;
    max-height: 27em;
}
#mediaSection > img {
    width: calc(100vw - 6em);
}




/* Elements */
hr {
    color: white;
    border-style: dashed;
}
h1, h2, h3, p, a, th, td, li {
    color: white;
    font-family: 'Indie Flower';
}
table, th, td {
    background-color: #0004;
    border: 1px solid white;
    border-collapse: collapse;
    padding: 0.2em 1em;
}



h1 {
    margin: 0;
    padding: 0.42em 0.35em 0.27em 0.35em;
    font-size: 1.7em;
}
p, th, td, li {
    font-size: 1.2em;
}
a:hover {
    font-weight: bold;
}