html {
    animation: 1s ease-out bg-intro forwards;
    background-color: #101010;
    background-size: 30px 30px;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}

html::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#3c3c3c 1px, transparent 0);
    background-size: 24px 24px;
    /* background-position: 0 0, 12px 12px; */
    opacity: 0;
    animation: 1s ease-in-out bg-image-intro forwards;
    z-index: -1;
}

@keyframes bg-intro {
    from {
        background-color: #000000;
    }

    to {
        background-color: #101010;
    }
}

@keyframes bg-image-intro {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out-body {
    from {
        opacity: 1;
    }

    to {
        /* background-color: #000000; */
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        background-color: #101010;

    }

    to {
        background-color: #000000;

        /* opacity: 0; */
    }
}

.fade-out-body {
    animation: fade-out-body 1s forwards;
}

.fade-out {
    animation: fade-out 1s forwards;
}

.fade-out::before {
    animation: 1s ease-in-out fade-out-body forwards;
}