body {
    align-items: center;
    background-color: #000000;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    margin: 0;
}

img {
    position: relative;
    display: block;
    height: auto;
    width: 30%;
}

.text {
    font-size: 1.2rem !important;
    margin-top: 9.75rem;
    position: absolute;
    color: #fff;
    font-family: sans-serif;
    background-color: transparent !important;
}

.blur-box {
    animation: blurIn 4.5s;
    background-color: #000000;
    border-radius: 10px;
    font-size: 2rem;
    padding: 20px 40px;
}

@keyframes blurIn {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

ul.social {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;

    >li {
        background-image: url('./social.png');
        background-repeat: no-repeat;
        background-size: 2000%;
        cursor: pointer;
        height: 40px;
        margin: 0 0.5rem;
        transition: transform 0.2s ease;
        width: 40px;

        &.fb {
            background-position: 0px -245px;
        }

        &.ig {
            background-position: -122px -244px;
        }

        &.tt {
            background-position: -255px -331px;
        }

        &.x {
            background-position: -70px -244px;
        }

        &:hover {
            transform: scale(1.2);
        }
    }
}


@media only screen and (max-width: 900px) {
    img {
        width: 50% !important;
    }

    .text {
        font-size: 1rem !important;
        margin-top: 5rem !important;
        background-color: transparent;
    }

    ul.social {
        width: 100% !important;
        height: 50px !important;
    }
}