*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body
{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}

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

#holder {
    min-height: 100vh;
    background-color: #222222;
    position: relative;
}

#start-image{
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.webgl, #text-holder
{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    cursor: default;
}

#caught{
    user-select: none;
    position: absolute;
    top: 1vw;
    right: 2vw;
    font-size: 128px;
    font-family: jakfont, sans-serif;
    background: -webkit-linear-gradient(#f9a724, #c21500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(5px 3px 1px #000000);
}

#missed{
    user-select: none;
    position: absolute;
    top: 6vw;
    right: 2vw;
    font-size: 128px;
    font-family: jakfont, sans-serif;
    background: -webkit-linear-gradient(#f9a724, #c21500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(5px 3px 1px #000000);
}

#start-screen{
    position: absolute;
    z-index: 10;
    background-color: #1B1718;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
}

#end-screen{
    visibility: hidden;
    position: absolute;
    z-index: 10;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
}

#lose{
    user-select: none;
    top: 30%;
    left: 42%;
    border: none;
    position: absolute;
    text-align: center;
    font-size: 64px;
    font-family: jakfont, sans-serif;
    background: -webkit-linear-gradient(#f9a724, #c21500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(5px 3px 1px #000000);
}

#again-button, #play-button{
    top: 50%;
    left: 36%;
    border: none;
    position: absolute;
    text-align: center;
    font-size: 256px;
    font-family: jakfont, sans-serif;
    background: -webkit-linear-gradient(#d1e1d1, #798979);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(5px 3px 1px #000000);
}

#credit {
    border: none;
    position: absolute;
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 128px;
    font-family: jakfont, sans-serif;
    background: -webkit-linear-gradient(#f9a724, #c21500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(3px 2px 1px #000000);
}

#link {
    background: -webkit-linear-gradient(#b0e6ff, #61cdff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(3px 2px 1px #000000);  
}

#play-button:hover, #again-button:hover{
    border: none;
    position: absolute;
    text-align: center;
    font-family: jakfont, sans-serif;
    background: -webkit-linear-gradient(#b7ec4e, #25bd0f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(5px 3px 1px #000000);
    cursor: pointer;
}

#pause{
    user-select: none;
    visibility: hidden;
    top: 70%;
    left: 40%;
    border: none;
    position: absolute;
    text-align: center;
    font-size: 64px;
    font-family: jakfont, sans-serif;
    background: -webkit-linear-gradient(#f9a724, #c21500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(5px 3px 1px #000000);
}

@media screen and (max-width: 3840px) {
    #caught, #missed, #pause, #play-button, #again-button, #lose {
        font-size: 186px;
    }

    #credit {
        font-size: 86px;
    }
}

@media screen and (max-width: 2560px) {
    #caught, #missed, #pause, #play-button, #again-button, #lose {
        font-size: 128px;
    }

    #credit {
        font-size: 64px;
    }
}

@media screen and (max-width: 1920px) {
    #caught, #missed, #pause, #play-button, #again-button, #lose {
        font-size: 98px;
    }

    #credit {
        font-size: 32px;
    }
}

@media screen and (max-width: 1280px) {
    #caught, #missed, #pause, #play-button, #again-button, #lose {
        font-size: 58px;
    }

    #credit {
        font-size: 20px;
    }
}

@media screen and (max-width: 854px) {
    #caught, #missed, #pause, #play-button, #again-button, #lose {
        font-size: 38px;
    }

    #credit {
        font-size: 16px;
    }
}

@media screen and (max-width: 640px) {
    #caught, #missed, #pause, #play-button, #again-button, #lose {
      font-size: 24px;
    }

    #credit {
        font-size: 8px;
    }
}


/*# sourceMappingURL=main.css.map*/