.instructions {
    display: none;
    position: absolute;
    width: 100%;
    height: 400px;
    z-index: 20;
}

.instruction,
.welcome {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.instruction.active {
    display: block;
}

.instruction.visible {
    visibility: visible;
}

.welcome.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30%;
    padding-top: 10%;
    box-sizing: border-box;
    background-color: rgb(31, 28, 28);
    color: rgb(31, 28, 28);
    animation: blink2 2.5s ease infinite;
    z-index: 500;
}

.welcome span {
    display: block;
    font-size: 3.5rem;
    color: white;
    word-break: break-all;
    text-shadow: 0 0 8px white;
}

.instruction__img {
    width: 100%;
    height: 100%;
}

.nextBtn {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 30px;
}

.nextBtn:hover {
    cursor: pointer;
}

.nextBtn:hover * {
    fill: rgb(134, 160, 223);
}

.loader {
    display: none;
}

.loader.active {
    display: block;
}

@keyframes blink2 {
    0% {
        color: rgb(31, 28, 28);
        text-shadow: 0 0 3px transparent;
    }

    40% {
        color: white;
        text-shadow: 0 0 3px white;
    }

    80% {
        color: white;
        text-shadow: 0 0 3px white;
    }

    99% {
        color: rgb(31, 28, 28);
        text-shadow: 0 0 3px transparent;
    }


    /* 90% {
        color: rgb(31, 28, 28);
    } */
}