:root {
    --wall: url(../images/system/body.png);
    --floor: url(../images/system/footer.png);
    --ratio: 133.333vh;
}
h1, h2, h3, h4, h5, p {
    cursor: default;
    color: white;
    text-shadow: 3px 3px black;
    margin: 0;
}
a {
    color: #ff6;
    text-shadow: 3px 3px black;
    text-decoration: none;
    margin: 0;
}
body {
    background-color: black;
    image-rendering: crisp-edges;
    font-family: monospace;
    margin: 0;
}
.container {
    background-image: url(../images/system/bg.png);
    background-size: cover;
    image-rendering: crisp-edges;
    width: var(--ratio);
    height: 100vh;
    max-width: 100%;
}
.header {
    flex: calc(100% - 64px);
}
.adverText {
    margin-top: auto !important;
}
.advert {
    width: 120px;
    height: 480px;
    background-color: #000c;
    border: 1px solid white;
    margin-bottom: auto !important;
}
.main {
    flex: calc(100% - 256px)
}
.advertisement {
    flex: 128px;
}
.banner, .footer {
    flex: 64px;
}
.awd {
    cursor: pointer;
    background-image: url("../images/system/icon.gif");
    background-size: 100% 100%;
    flex: 64px;
}
.axd {
    cursor: pointer;
    background-image: url("../images/system/avx.gif");
    background-size: 100% 100%;
    flex: 64px;
}
.information {
    flex: 32px;
}
.navigation {
    flex: 32px;
}
.logo {
    flex: calc(100% - 128px)
}
.content {
    flex: calc(100% - 128px)
}
#logoText {
    cursor: pointer;
    font-size: 5.5vh;
    line-height: 64px;
}
#informationText, .links {
    line-height: 32px;
}
#footerText {
    line-height: 64px;
}
.guest {
    cursor: pointer;
    position: fixed;
    background-size: 100% 100%;
    bottom: 0;
    margin-bottom: 64px;
    width: 64px;
    height: 64px;
}
button {
    cursor: pointer;
    width: 80px;
    height: 24px;
    padding: 0;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 2px solid gray;
    border-right: 2px solid gray;
    outline: 2px solid black;
    box-shadow: 2px 2px inset black, -2px -2px inset black;
}
.btd {
    cursor: pointer;
}
#btd1 {
    background-color: #600a;
}
#btd2 {
    background-color: #660a;
}
#btd3 {
    background-color: #060a;
}
#btd4 {
    background-color: #066a;
}
#btd5 {
    background-color: #006a;
}
#btd6 {
    background-color: #606a;
}
#btd7 {
    background-color: #300a;
}
#btd8 {
    background-color: #330a;
}
#btd9 {
    background-color: #030a;
}
#btd10 {
    background-color: #033a;
}
#btd11 {
    background-color: #003a;
}
#btd12 {
    background-color: #303a;
}



.flex {
    display: flex;
}
.row {
    flex-direction: row;
}
.column {
    flex-direction: column;
}
.wall {
    background-image: var(--wall);
}
.floor {
    background-image: var(--floor);
}
.texture {
    background-size: 64px 64px;
}
.center {
    text-align: center;
    margin: 0 auto 0 auto;
}
.shadowH {
    box-shadow: 8px 0px 8px inset #0009, -8px 0px 8px inset #0009;
}
.shadowV {
    box-shadow: 0px 8px 8px inset #0009, 0px -8px 8px inset #0009;
}
@media screen and (orientation: portrait) {
    .awd, .axd, .guest {
        display: none;
    }
}
@media (max-aspect-ratio: 4/3.001) {
    .advertisement, .guest {
        display: none;
    }
}
@media screen and (max-height: 599px) {
    .advertisement, .guest {
        display: none;
    }
}