@media only screen and (max-width: 767px) {
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        margin: 0;
        padding: 0;
        max-width: 1200px;
        margin: 0 auto;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: auto;
        aspect-ratio: 750 / 2660;
        display: block;
        object-fit: contain;
    }

    .top-floating {
        top: 0;
        left: 0;
        width: 100vw;
        aspect-ratio: 750 / 110;
        z-index: 99;
        position: fixed;
        text-align: center;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .top-floating img {
        float: right;
        margin-right: 1rem;
        margin-top: 2vh;
        height: auto;
    }

    .carousel {
        top: 110vh;
        aspect-ratio: 686 / 170;
        display: flex;
        margin: 0 3vw;
        overflow: hidden;
        position: absolute;
    }

    .carousel img {
        width: 100%;
        height: auto;
        z-index: 1;
        margin-left: 10px;
        animation: carousel 15s infinite;
    }

    @keyframes carousel {
        0% {
            transform: translateX(0%);
            animation-timing-function: linear;
        }

        33% {
            transform: translateX(-100%);
            animation-timing-function: linear;
        }

        66% {
            transform: translateX(-200%);
            animation-timing-function: linear;
        }

        100% {
            transform: translateX(-280%);
            animation-timing-function: linear;
        }
    }
}

@media only screen and (min-width: 768px) {
    body {
        padding: 0;
        margin: 0 30vw;
        background-color: rgba(26, 1, 2, 1);
    }

    .container {
        margin: 0;
        padding: 0;
        height: 210vh;
        width: calc(30vw - 1px);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .top-floating {
        top: 0;
        z-index: 99;
        height: 10vh;
        position: fixed;
        width: calc(30vw - 1px);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .top-floating img {
        float: right;
        margin-top: 2.5vh;
        margin-right: 1vw;
    }

    .carousel {
        height: 140px;
        display: flex;
        overflow: hidden;
        position: absolute;
        top: calc(134vh - 1px);
        width: calc(30vw - 1px);
    }

    .carousel img {
        width: 100%;
        height: auto;
        margin-left: 10px;
        animation: carousel 15s infinite;
    }

    @keyframes carousel {
        0% {
            transform: translateX(0%);
            animation-timing-function: linear;
        }

        33% {
            transform: translateX(-90%);
            animation-timing-function: linear;
        }

        66% {
            transform: translateX(-190%);
            animation-timing-function: linear;
        }

        100% {
            transform: translateX(-280%);
            animation-timing-function: linear;
        }
    }
}