@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=VT323&display=swap');

:root {
    --fontSize : 3vmin;
    --blurRadius: 0.25em;
}

body 
{
    background-color: black; 
    color: white;

    width: 100vw;
    height: 100vh;

    padding: 0;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    /* background-image: url('Assets/Map.png'); */
}

#canvas 
{
    /* height: 90%; */
    background-color: black;
    /* image-rendering: pixelated; */
}

.launchAnimation
{
    animation: launchAnimation 0.5s ease-in-out 1 both;
}

@keyframes launchAnimation
{
    0% 
    {   
        transform: scale(1.5);
        opacity: 0;
    }

    100% 
    {
        transform: scale(1);
    }
}

.canvasVideo 
{
    width: 100vw;
}

.videoDiv 
{
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 10;
}

.introDiv, .creditsDiv 
{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;

    background-color: black;

    width: 100vw;
    height: 100vh;

    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

.titleDiv 
{
    font-size: calc(9 * var(--fontSize));
    font-family: 'VT323', monospace;

    text-align: center;
}

.nextButton
{   
    font-size: calc(2 * var(--fontSize));
    max-width: 30vw;
    margin: 0 auto;
    display: inline;
}



.creditSpan 
{
    position: fixed;
    font-family: 'VT323', monospace;
    background-color: transparent;
    font-size: calc(2 * var(--fontSize));
    z-index: 12;
}

.creditScrollingAnimation
{
    animation: creditScrollingAnimation 2s ease-in-out 1 both;
}

@keyframes creditScrollingAnimation
{
    0%
    {
        opacity: 0;
        transform: scale(0.5) translateY(2em);
    }

    50%
    {
        opacity: 1;
        transform: scale(1) translateY(0em);
    }

    100%
    {
        opacity: 0;
        transform: scale(1) translateY(-2em);
    }
}