:root {
    --icon-border: #100e0f;
    --icon-background: hsl(345, 0%, 70%);
    --icon-hover: hsl(336, 0%, 80%);
}

body {
    background-color: #ffffff;
}

nav {
    position: static;
    justify-content: flex-start;
    background-color: #100e0f !important;
}

nav::after {
    display: none;
}

.full nav {
    display: none;
}

.left nav {
    width: 66px;
    height: calc(100vh - 22px);
    flex-direction: column;
    align-items: center;
}

.left .nav-imgs img {
    margin: 5px 5px 25px;
}

.left .nav-imgs,
.left .nav-imgs img {
    height: initial;
}

nav span {
    font-size: 30px;
}

.left a.title {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.left nav span {
    font-size: 25px;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
}

.elder-font {
    font-family: 'Special Elite', cursive;
    color: #f00000
}

.game-font {
    font-family: 'Press Start 2P', cursive;
    color: #ff7300;
    position: relative;
    top: 5px;
}

.left .game-font {
    margin-top: 20px;
}

.options {
    position: absolute;
    right: 14px;
    display: flex;
    padding: 12px;
    background-color: #dddddd;
}

.left .options {
    flex-direction: column;
    right: unset;
    bottom: 20px;
}

.options div {
    background-color: var(--icon-background);
    cursor: pointer;
}

body.top .options div:not(:first-child) {
    margin-left: 12px;
}

body.left .options div:not(:first-child) {
    margin-top: 12px;
}

.options div:hover {
    box-shadow: 0 0 0 8px var(--icon-hover);
}

#option-mute {
    width: 30px;
    height: 30px;
    background: center / cover url('../Image/unmute.png');
}

#option-mute:hover {
    background: center / cover url('../Image/unmute.png'), var(--icon-hover)
}

#option-mute.muted {
    background: center / cover url('../Image/mute.png');
}

#option-mute.muted:hover {
    background: center / cover url('../Image/mute.png') var(--icon-hover);
}

#option-top {
    width: 30px;
    height: 24px;
    border-top: 6px solid var(--icon-border);
}

#option-left {
    width: 24px;
    height: 30px;
    border-left: 6px solid var(--icon-border);
}

#option-full {
    width: 24px;
    height: 24px;
    border: 3px solid var(--icon-border);
    position: relative;
}

#option-full::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 5px;
    right: 5px;
    bottom: -3px;
    background-color: var(--icon-background);
}

#option-full::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -3px;
    right: -3px;
    bottom: 5px;
    background-color: var(--icon-background);
}

#exit-fullscreen {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 30px;
    height: 30px;
    padding: 8px;
    cursor: pointer;
}

#exit-fullscreen::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: center / cover no-repeat url('../Image/exit-fullscreen.png');
    -webkit-filter: brightness(30%);
    filter: brightness(30%);
}

body:not(.full) #exit-fullscreen {
    display: none;
}

#exit-fullscreen:hover {
    background: hsl(340, 0%, 82%);
}

iframe {
    border: none;
    width: 100%;
    height: calc(100vh - 100px);
}

.left>iframe {
    width: calc(100% - 86px);
    height: 100vh;
    position: absolute;
    top: 0;
    left: 86px;
}

.full>iframe {
    height: 100vh;
}

/* .right-ad-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.right-ad {
    width: 160px;
    height: 600px;
} */

/* .bottom-ad-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
} */


/* .bottom-large-ad, .bottom-small-ad {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.left .bottom-large-ad, .left .bottom-small-ad {
    left: calc(50% + 43px);
    transform: translateX(-50%);
}

.right-ad {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.top .right-ad {
    top: calc(50% + 48px);
} */

footer {
    margin: -5px 0 0;
    width: calc(100% - 200px);
}

.full footer {
    display: none;
}

#error-message {
    width: 100%;
    font-size: 30px;
    color: #aaaaaa;
    line-height: 2em;
    display: none;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.left #error-message {
    left: 86px;
    width:calc(100% - 86px);
}

#error-message a {
    color: #8888ff;
}

#error-message a:hover {
    color: #7777dd;
}

/* @media only screen and (max-width: 999px) {
    .right-ad {
        display: none !important;
    }
    
    .left>iframe {
        height: calc(100vh - 50px - 150px);
    }

    .top>iframe {
        height: calc(100vh - 100px - 50px - 150px);
    }
}

@media only screen and (min-width: 1000px) {
    .top>iframe {
        width: calc(100% - 160px - 150px);
    }

    .left>iframe {
        width: calc(100% - 86px - 160px - 150px);
    }
    
    .bottom-large-ad {
        display: none !important;
    }
}

@media only screen and (max-width: 850px) {
    .bottom-large-ad {
        display: none !important;
    }
}

@media only screen and (min-width: 850px) {
    .bottom-small-ad {
        display: none !important;
    }
} */