@font-face {
    font-family: Volter Bold;
    src: url("../fonts/Volter_Bold.ttf");
}
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
html {
    font-family: Volter Bold;
    font-size: 62.5%;
    font-display: swap;
}
body {
    margin: auto;
    image-rendering: pixelated;
    background-color: #0e0e0e;
}
.wh-100 {
    width: 100%;
    height: 100%;
}
.site-box {
    margin-inline: auto;
    width: fit-content;
}
.client-wrapper {
    width: 960px;
    height: 540px;
}
iframe {
    display: block;
    border: none;
}
.hidden {
    display: none;
}
input[type="checkbox"]:hover, button:hover {
    cursor: url("../img/hover.ico"), pointer;
}

.bottom-bar {
    display: grid;
    grid-template-areas: 'settings controls lang';
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0.5rem auto;
    font-size: 1.6rem;
    line-height: 2;
    color: #f3eeee;
    transform: translate3d(0,0,0);
}
.settings {
    grid-area: settings;
}
.settings-popup {
    position: absolute;
    background: #f3eeee;
    color: #131313;
    padding: 1rem;
}
.controls {
    grid-area: controls;
    text-align: center;
}
.lang {
    grid-area: lang;
    text-align: right;
}

.checkbox {
    display: inline-grid;
    grid-template-columns: 1.5rem auto;
    gap: 0.5rem;
}
.checkbox input[type="checkbox"] {
    appearance: none;
    background-color: #f3eeee;
    border: 1px solid #131313;
    width: 1rem;
    height: 1rem;
}
.checkbox input[type="checkbox"]:checked {
    /*background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gwaAB8MMnFKcAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAUklEQVQY042PwQ3AMAgDz2zA/kNmBPdDqpYmVSzxgbMBjTH4U2YaIE6grWqLnyX7a5LkZlScQACqaGxrB73ArjLOe9df21bvRW+uoDtxDncQwAULmTQ2UuqxnQAAAABJRU5ErkJggg==");*/
    box-shadow: inset 1rem 1rem #131313;
}

.controls-wrapper {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    line-height: 2;
}
.control-button {
    font-size: inherit;
    line-height: inherit;
    border: none;
    color: #f3eeee;
    background: none;
}

/* Media queries */

@media screen and (max-width: 719px) {
    .site-box, .client-wrapper {
        width: 100%;
    }
    #new-window {
        display: none;
    }
}