html, body {
    font-size: 10px;
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
    margin: 0;
}

.container {
    max-width: 99.4rem;
    margin: 0 auto;
    text-align: center;
}

.logo {
    margin-top: -4rem;
}

.ghostbubble-gun {
    position: absolute;
    z-index: 10;
    top: -50%;
    right: -20%;
}

.ghostbubble-box {
    position: absolute;
    z-index: 10;
    top: -44%;
    left: -20%;
    transform: rotate(-16deg);
}

.video-container {
    position: relative;
}

.video {
    position: relative;
    z-index: 20;
    width: auto;
    height: auto;
    padding: .8rem;
    margin: 6.4rem .8rem 0 .8rem;
    background: #1F0230;
    border-radius: 1.6rem;
    box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .40);

    iframe {
        border-radius: 1.2rem;
    }
}

.bel {
    position: fixed;
    top: 50%;
    right: -10rem;
}

img {
    max-width: 100%;
}

.logos {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3.2rem;
    max-width: 52rem;
    margin: 8rem auto 4.8rem auto;
    padding: 0;
    list-style-type: none;

    li {
        margin: 0 0 3.2rem 0;
    }
}

@media (max-width: 768px) {
    .logo {
        max-width: 100%;
        height: auto;
    }

    .ghostbubble-box,
    .ghostbubble-gun {
        display: none;
    }

    .video {
        width: auto;

        iframe {
            width: 100%;
            height: auto;
            min-height: 24rem;
        }
    }

    .bel {
        width: 32rem;
        height: auto;
        top: auto;
        bottom: -12rem;
    }

    .logos {
        max-width: 100%;
        gap: 0;
        margin: 4.8rem 0 0 0;

        img {
            max-width: 70%;
            height: auto;
        }
    }
}