@font-face {
    font-family: "Poppins_Regular";
    src: url("/data/fonts/POPPINS-REGULAR.TTF");
}

@font-face {
    font-family: "Poppins_Thin";
    src: url("/data/fonts/POPPINS-THIN.TTF");
}

@font-face {
    font-family: "Poppins_Light";
    src: url("/data/fonts/POPPINS-LIGHT.TTF");
}

* {
    font-family: Poppins_Light;
}

/* Timer */
.timer-wrapper {
    /* justify-content: flex-start; */
    /* display: flex;
    display: -webkit-flex; */
    /* flex-direction: row-reverse; */
    position: absolute;
    top: 0;
    right: 0;
    width: 30vw;
    margin: 2%;
}

.timer-wrapper > img {
    width: 15%;
    margin: auto 1vw;
}

.timer-wrapper > div {
    text-align: end;
    font-size: 4vw;
    font-family: Poppins_Regular;
    margin: 1vw;
}

/* Tutorial */
.tutorial-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 7.5%;
    background-color: #000000b3;
    font-family: Roboto;
}

.tutorial-wrapper > h1 {
    color: white;
    font-family: Poppins_Regular;
    font-size: 7vw;
    text-decoration: underline;
    text-decoration-color: red;
}

.tutorial-wrapper > p {
    color: white;
    font-size: 4vw;
}

.tutorial-wrapper > button {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7.5vh;
    max-width: 75%;
    margin: 10% auto 0 auto;
    padding: 1% 12%;
    border: none;
    border-radius: 50vw;
    background-color: #da4b33;
    font-family: Poppins_Light;
    font-size: 5vw;
    color: white;
    -webkit-appearance: none;
    white-space: nowrap;
}

.tutorial-wrapper > button:focus {
    outline: none;
}
.tutorial-wrapper > button:active {
    transform: scale(0.99);
}

/* Intro Scene */
.intro-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    height: min-content;
    bottom: 7.5vh;
    margin: auto;
}

.intro-wrapper > button {
    display: block;
    position: relative;
    left: 0;
    right: 0;
    padding: 1% 12%;
    max-width: 75%;
    margin: auto;
    border: none;
    border-radius: 50vw;
    background-color: #da4b33;
    font-family: Poppins_Light;
    font-size: 5vw;
    color: white;
    -webkit-appearance: none;
    white-space: nowrap;
}

.intro-wrapper > button:focus {
    outline: none;
}
.intro-wrapper > button:active {
    transform: scale(0.99);
}

/* Endgame */
.endgame-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 7.5%;
    background-color: #000000b3;
}

.endgame-wrapper > h1 {
    color: white;
    font-size: 7vw;
}
.endgame-wrapper > p {
    color: white;
    font-size: 4vw;
}

.endgame-wrapper > button {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7.5vh;
    max-width: 75%;
    margin: 10% auto 0 auto;
    padding: 1% 12%;
    border-radius: 50vw;
    background-color: #da4b33;
    font-family: Poppins_Light;
    font-size: 5vw;
    color: white;
    -webkit-appearance: none;
    white-space: nowrap;
}

.endgame-wrapper > button:focus {
    outline: none;
}
.endgame-wrapper > button:active {
    transform: scale(0.99);
}

/* Radar */
.radar-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 3vh;
    width: 30vw;
    height: 30vw;
}

.radar-wrapper > * {
    width: 100%;
    height: 100%;
}