body {
    background: #050506;
}

.main-background {
    z-index: -1;

    opacity: 0;
    background: url("../img/background.jpg");
    background-size: cover;

    animation: 1s backgroundFadeIn .2s forwards;
}

@keyframes backgroundFadeIn {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.text-wrapper {
    margin-left: 25%;

    opacity: 0;

    animation: 1s textFadeIn 1s forwards;
}

@keyframes textFadeIn {
    from {
        margin-top: 5%;
        opacity: 0;
    }
    to {
        margin-top: 0;
        opacity: 1;
    }
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

@media (max-width: 991.98px) {
    .main-background {
        background-position-x: 70%;
    }

    .text-wrapper {
        margin: 0 auto;
    }

    .footer {
        font-size: 2em;
    }
}

.footer {
    bottom: 2em;

    opacity: 0;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);

    animation: 1s textFadeIn 2s forwards;
}