#mainTitle {
    /* background: linear-gradient(to right, #FF6A00 1%, #FF00DC 99%); */
    /* -webkit-text-fill-color: transparent; */
    /* -webkit-background-clip: text; */
    text-align: center;
    width: 500px;
    height: 37px;

}

.mainObject {
    /* display: ; */
    display: block;
    clear: both;
    margin: auto;
    width: 400px;
    height: 400px;
}

a:has(#bannerImg) {
    display: block;
    width: 100%;
    max-width: 872px;
    margin: 0 auto;
}

#mainTitle {
    width: 500px;
    height: auto;
}

#content {
    text-align: center;
}

.indexSocialItem {
    display: inline-block;
    margin: 0 25px;
    height: 100px;
    width: 100px;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    transition: 250ms;

    /* vertical-align: middle; */
    img {
        width: 100px;
    }
}

#socialSection {
    opacity: 100%;
}

#socialSection:hover {
    transition: 250ms;
    .indexSocialItem {
        opacity: 20%;
    }
    .indexSocialItem:hover {
        opacity: 100%;
    }
}

@media only screen and (max-width: 700px) {
    .mainObject {
        width: min(200px, 90vw) !important;
        height: min(200px, 90vw) !important;
        max-width: 90vw !important;
    }

    #bannerImg {
        width: 100% !important;
        max-width: calc(100vw - 33px) !important;
        height: auto !important;
    }

    #bannerImg + * ,
    a:has(#bannerImg) {
        display: block !important;
        width: 100% !important;
    }

    #mainTitle {
        width: min(250px, 90vw) !important;
        height: auto !important;
    }

    #lottiePlayer {
        width: min(200px, 90vw) !important;
        height: min(200px, 90vw) !important;
    }

    #lottietxtPlayer {
        width: min(200px, 90vw) !important;
        height: auto !important;
    }

    img.mainObject {
        width: min(200px, 90vw) !important;
        height: min(200px, 90vw) !important;
    }

    .skipbutton {
        position: fixed !important;
        top: 80px !important;
        right: 15px !important;
        z-index: 9999 !important;
    }

    .item:has(#youtubePlayerContainer) {
        width: calc(100vw - 40px) !important;
        padding: 5px !important;
    }

    #youtubePlayerContainer {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
    }

    #youtubePlayerContainer iframe {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }

    .indexSocialItem {
        margin: 0 10px !important;
        height: 60px !important;
        width: 60px !important;
    }

    .indexSocialItem img {
        width: 60px !important;
    }
}