@font-face {
    font-family: nocturne;
    src: url("../fonts/NocturneSerifTest-Light.otf");
}
body {
    margin: -1.5em 0 0 0;
    font-family: nocturne, -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
    color: #2C2833;
    background-color: #2C2833;
}
#page-container {
    position: relative;
    min-height: 100vh;
}
a {
    text-decoration: none;
}




#header {
    position: relative;
    width: 100vw;
    height: 160px;
    text-align: center;
    align-content: center;
    background-color: #7F2EF5;
    border-bottom: 6px ridge lavender;
    z-index: 10;
}
#logo {
    width: 600px;
    margin: 0 auto;
    padding-top: 1em;
    text-align: left;
}
#logo > hr {
    margin: -25px 0 0 0;
    width: 100%;
    color: lavenderblush;
}
#short {
    color: #b38ded;
}
#long {
    margin-top: -2px;
    text-align: right;
    color: #b38ded;
}
.emph {
    color: lavender;
}


#inner {
    display: flex;
    min-height: 70vh;
    height: 100%;
    width: 100vw;
}

#left-menu {
    position: relative;
    left: 0;
    width: 240px;
    background-color: #7C48CA;
    background-image: linear-gradient(to left, #2C2833, rgba(0,0,0,0), rgba(0,0,0,0));
    z-index: 2;
}
#left-menu > a {
    display: block;
    position: relative;
    height: 60px;
    width: 200px;
    padding: 20px 0 20px 40px;
    align-content: center;
    text-decoration: none;
    font-size: 30px;
    color: lavender;
    background-color: #7C48CA;
    transition: all 0.5s ease-out;
}
#left-menu > a:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(to left, #2C2833, rgba(0,0,0,0), rgba(0,0,0,0));
    opacity: 1;
}
#left-menu > a:hover {
    padding-left: 60px;
    color: #2C2833;
    background-color: #b38ded;
}

#right-menu {
    position: relative;
    right: 0;
    width: 240px;
    background-color: #7C48CA;
    background-image: linear-gradient(to right, #2C2833, rgba(0,0,0,0), rgba(0,0,0,0));
    z-index: 2;
}
#right-menu > a {
    display: block;
    position: relative;
    height: 60px;
    width: 200px;
    margin-right: 0;
    padding: 20px;
    text-align: right;
    align-content: center;
    text-decoration: none;
    font-size: 30px;
    color: lavender;
    background-color: #7C48CA;
    z-index: 2;
    transition: all 0.5s ease-out;
}
#right-menu > a:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(to right, #2C2833, rgba(0,0,0,0), rgba(0,0,0,0));
    opacity: 1;
}
#right-menu > a:hover {
    padding-right: 60px;
    right: 30px;
    color: #2C2833;
    background-color: #b38ded;
}

#middle-info {
    width: 1440px; 
    margin: 20px 40px;
    padding: 20px 140px 20px 40px;
    background-color: white;
    border: outset 6px lavender;
    border-radius: 60px;
}
p {
    font-size: large;
}
hr {
    width: 75%;
    margin-left: 0;
    color: #5F5175;
}
table {
    width: 20%;
    border-collapse: collapse;
}
td, th {
    border: 1px solid #2C2833;
    text-align: center;
    padding: 4px;
}
tr:nth-child(even) {
    background-color: lavenderblush;
}


#footer {
    position: relative;
    bottom: 0;
    width: 100vw;
    height: 4em;
    text-align: center;
    align-content: center;
    background-color: #7254A0;
    border-top: 6px ridge lavender;
    z-index: 8;
}

#covid-haro {
    position: fixed;
    bottom: 4px;
    right: 6px;
    width: 60px;
    z-index: 1;
}


/*UNIQUE*/

#frieren {
    position: absolute;
    top: 220px;
    right: 300px;
    height: 70%;
}

#ram {
    position: absolute;
    top: 590px;
    left: 340px;
    width: 110px;
}
#rem {
    position: absolute;
    top: 580px;
    right: 310px;
    width: 200px;
}

#sailor-moon {
    position: absolute;
    top: 440px;
    right: 320px;
    width: 190px;
}