* {
    box-sizing: border-box;
    user-select: none;
    margin: 0;
    padding: 0;
    font-family: 'DINEngschrift';
    font-weight: normal;
    font-style: normal;
}

html, body {
    overflow: hidden;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

div {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: black;
    display: flex;
    visibility: hidden;
}

div img {
    margin: auto;
    width: 30vw;
}

header {
    background-color: var(--top-background-color);
    padding: 1vh 1.5vh;
    display: flex;
    align-items: center;
}

header:hover a {
    opacity: 1;
}

header h1 {
    color: var(--top-fore-color);
    font-size: 6vh;
    margin-right: auto;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}

header h1:hover {
    opacity: .6;
}

header a {
    display: flex;
    text-decoration: none;
    margin-left: 2vh;
    border-radius: 100%;
    overflow: hidden;
    opacity: 0;
    transition: filter .2s ease-in-out, 
                opacity .2s ease-in-out;
}

header a:hover {
    filter: brightness(80%);
    animation: breath-animation .5s ease-in-out infinite alternate;
}

header img {
    width: 6vh;
    height: 6vh;
}

main {
    background-color: var(--main-background-color);
    padding: 8vh 16vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main h2 {
    font-size: 14vh;
}

main progress {
    margin: 4vh 0;
    margin-top: 2vh;
    width: 100%;
    height: 20vh;

    border: none;
    padding: 1.25vh;
    background-color: var(--progress-background-color);


    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

main progress::-webkit-progress-bar {
    background-color: var(--progress-background-color);
}

main progress::-webkit-progress-value {
    background-color: var(--progress-value-color);
}

main progress::-moz-progress-bar {
    background-color: var(--progress-value-color);
}

main p {
    font-size: 9vh;
}

main span {
    font-size: 14vh;
}

main h2,
main p,
main span {
    color: var(--main-fore-color);
    text-transform: uppercase;
}

.inactive {
    cursor: none;
}

.error {
    --top-background-color: #B40304;
    --top-fore-color: #000000;

    --main-background-color: #450505;
    --main-fore-color: #7D0404;
    
    --progress-background-color: #680606;
    --progress-value-color: #A50504;

    animation: error-animation .5s ease-in-out infinite alternate;
}

.error h2 {
    animation: none;
}

.hack {
    --top-background-color: #b6b6b6;
    --top-fore-color: #000000;

    --main-background-color: #39638D;
    --main-fore-color: #C6B123;
    
    --progress-background-color: #2B5279;
    --progress-value-color: #C6B123;

    animation: none;
}

.hack h2 {
    animation: hack-animation .3s ease-in-out infinite alternate;
}

@media screen and (orientation: portrait) {
    div {
        visibility: visible;
    }

    div img {
        animation: rotate-animation 1.5s ease-in-out infinite alternate;
    }
}

@keyframes breath-animation {
    from {
        transform: scale(.9);
    }
    to {
        transform: scale(1.1);
    }
}

@keyframes rotate-animation {
    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(-45deg);
    }
}

@keyframes hack-animation {
    to {
        filter: opacity(.5);
    }
}

@keyframes error-animation {
    to {
        filter: saturate(200%);
    }
}

@font-face {
    font-family: 'DINEngschrift';
    src: url('/assets/fonts/DINEngschrift.ttf') format('truetype');
}