:root {
    --white: #ebebd3;
    --light-orange: #f6c476;
    --orange: #ee964b;
    --dark-orange: #e26325;
    --light-red: #fc9564;
    --red: #f95738;
    --dark-red: #f52819;
}

@font-face {
  font-family: AAntiCorona;
  src: url(../assets/fonts/AAntiCorona.ttf);
}

*:not(.swag-dialog-wrapper, .swag-dialog-wrapper *) {
    font-family: AAntiCorona;
    white-space: nowrap;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: black;
    color: var(--white);
    font-size: 1.5vh;
}

h1 {
    font-size: 6vh;
}

h2 {
    font-size: 5vh;
}

h3 {
    font-size: 4vh;
}

h4, label {
    font-size: 3vh;
}

h5 {
    font-size: 2vh;
}

h6 {
    font-size: 1vh;
}

#game {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 9/16) {
    #game > canvas {
        max-width: 100%;
        height: 100%;
    }
}

@media (max-aspect-ratio: 9/16) {
    #game > canvas {
        width: 100%;
        max-height: 100%;
    }
}

.container {
    width: 100%;
    height: 100%;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.full-width {
    width: 100%;
}

.three-quarters-width {
    width: 75%;
}

.col {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.full-height {
    height: 100%;
}

.three-quarters-height {
    height: 75%;
}

.hidden {
    visibility: hidden;
}

.no-display {
    display: none !important;
}

button, input[type=submit] {
    pointer-events: auto;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    background-color: var(--orange);
    border: none;
    border-radius: 3vh;
    box-shadow: 0 0.8vh var(--dark-orange);
    transform: translateY(-0.4vh);
    color: var(--white);
    padding: 1.5vh 2.5vh;
    margin: 1vh;
    font-size: 4vh;
}

button:hover, input[type=submit]:hover {
    background-color: var(--light-orange);
}

button:active, input[type=submit]:active {
    background-color: var(--light-orange);
    box-shadow: 0 0.4vh var(--dark-orange);
    transform: translateY(0.4vh);
}

button:disabled, input[type=submit]:disabled {
    background-color: #949494;
    box-shadow: 0 0.8vh #b8b8b8;
}

input {
    pointer-events: auto;
    color: #3e3e3e;
    text-align: center;
}

a {
    pointer-events: auto;
    color: var(--dark-orange);
}

.game-button {
    padding: 1.25vh 1.25vh 0.25vh 1.25vh;
}

#exit {
    position: absolute;
    top: 0px;
    right: 0px;
}

#exit-img {
    position: relative;
    width: 4vh;
}

#anti-piracy {
    padding: 20px;
}

#anti-piracy > * {
    white-space: normal;
    text-align: center;
}