$white: #FFFFFF;
$black: #000000;
$red: #c73920;
$orange: #fab003;

$text-shadow-black-orange: 2px 2px $black, -2px -2px $orange;
$text-shadow-red: 10px 10px $red;

LoadingScreen {
    background-color: black;
    padding: 128px 128px;
    opacity: 1;
    flex-direction: column;
    font-size: 25px;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 0.3s ease-out;
    color: rgba( white, 1 );
    padding-bottom: 64px;
    text-shadow: $text-shadow-red;
    text-transform: uppercase;
    justify-content: center;


    .background {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.2;
        background-size: contain;
        filter: blur( 20px );
        mask: linear-gradient( 45deg, white, white, black );
        mask-scope: filter;
    }

    &:intro {
        opacity: 0;
        transform: scaleX( 1.1 );
    }

    .game-title {
        position: absolute;
        font-family: PressStart;
        font-weight: 700;
        font-size: 70px;
    }

    .controls {
        flex-direction: column;
        gap: 50px;
        align-items: flex-start;
        font-family: PressStart;
        text-transform: uppercase;
    }
}