.background-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}

.background {
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: brightness(0%);
}

@keyframes background_animation {
    55% {
        filter: brightness(0%);
    }

    100% {
        filter: brightness(100%);
    }
}

.home_title-container {
    width: auto;
    height: min(18vw, 36vh);
    aspect-ratio: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: min(13.25vw, 26.5vh);
    font-weight: 600;
    color: gold;
    text-transform: uppercase;
    text-shadow: min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.1vw, 0.2vh) white, min(0.375vw, 0.75vh) min(0.375vw, 0.75vh) min(0.375vw, 0.75vh) black;
    position: absolute;
    top: 5%;
    left: 50%;
    z-index: 2;
    translate: -50% 0;
    transform: translate(20%, 70%);
    filter: brightness(0%);
}

@keyframes title_container_animation {
    10% {
        filter: brightness(100%);
        transform: translate(20%, 70%);
    }

    40% {
        transform: translate(20%, 70%);
    }

    100% {
        filter: brightness(100%);
        transform: translate(0%, 0%);
    }
}

.home_title {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.home_title_words {
    translate: -4% 0;
}

.home_title_poker {
    translate: 4% 0;
}

.home_title span {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    font-size: min(8.25vw, 16.5vh);
    opacity: 0;
    transform: translateX(-100%);
    overflow: hidden;
}

@keyframes title_animation {
    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.home_artwork-container {
    width: auto;
    height: 57%;
    display: flex;
    position: absolute;
    bottom: 6%;
    left: 50%;
    z-index: 1;
    translate: -50% 0;
}

.home_artwork {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0%);
}

@keyframes artwork_animation {
    100% {
        filter: brightness(90%);
    }
}

.copyright-container {
    width: 40%;
    height: 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: min(1vw, 2vh);
    font-weight: 500;
    color: gold;
    position: absolute;
    bottom: 1%;
    left: 50%;
    translate: -50% 0;
    user-select: none;
}

.copyright,
.all_rights_reserved {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

@keyframes copyright_animation {
    100% {
        opacity: 1;
    }
}

.continue {
    width: 20%;
    height: 7.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: min(3.5vw, 7vh);
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    text-shadow: min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.1vw, 0.2vh) gold, min(0.375vw, 0.75vh) min(0.375vw, 0.75vh) min(0.5vw, 1vh) black;
    position: absolute;
    top: 50%;
    right: 2%;
    z-index: 3;
    translate: 0 -50%;
    opacity: 0;
    transition: color 0.15s, text-shadow 0.15s;
}

@keyframes continue_animation {
    100% {
        opacity: 1;
    }
}

.continue:hover {
    color: gold;
    text-shadow: min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.25vw, 0.5vh) white, min(0.375vw, 0.75vh) min(0.375vw, 0.75vh) min(1vw, 2vh) black;
    cursor: pointer;
}

main.show {
    & .background {
        animation: background_animation 6s forwards;
    }

    & .home_title-container {
        animation: title_container_animation 2.25s 1s linear forwards;
    }

    & .home_title span {
        animation: title_animation 2s 4s forwards;
    }

    & .home_artwork {
        animation: artwork_animation 3s 2s forwards;
    }

    & .copyright,
    .all_rights_reserved {
        animation: copyright_animation 3s 5s forwards;
    }

    & .continue {
        animation: continue_animation 2s 7s forwards;
    }
}

@media (display-mode: fullscreen) {
    .home_title-container {
        width: auto;
        height: min(15vw, 30vh);
        aspect-ratio: 3;
        font-size: min(11.75vw, 23.5vh);
        top: 5%;
    }

    .home_title span {
        font-size: min(7.25vw, 14.5vh);
    }

    .home_artwork-container {
        height: 57%;
        bottom: 6%;
    }
}