p{
    color: white;
    text-shadow: 2px 2px 2px #652295;
}

.custom-navbar{
    background-color: rgba(26, 26, 55, 0.67) !important;
    height: 6rem !important;
    padding: 0;
}

.navbar-toggler{
    border-color: rgba(255, 255, 255, 0.53)
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24' /%3E%3C/svg%3E");
}

.navbar-nav{
    width: auto;
}

.nav-link{
    height: 100%;
}

@media (max-width: 991.98px) {
    .navbar-nav{
        width: 100%;
    }

    .navbar-nav > .nav-link{
        margin: 0 auto;
        padding: 0;
    }
}

@media (max-width: 767.98px){
    .navbar-collapse{
        background-color: rgba(26, 26, 55, 0.67) !important;
    }
}


.nav-item{
    width: 8rem;
    margin: 0 0rem;;
}

.brand{
    height: 5rem;
}

.hint-swipe-down{
    position: relative;
    width: 100%;
    height: 10rem;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.67) 33%, rgba(0, 0, 0, 0));
    display: flex;
    align-self: end;
    align-items: end;;
    justify-content: space-around;
}

.hint-swipe-down-text {
    max-width: 100%;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    -webkit-animation: fadeInOutAnimation 2s infinite;
    -moz-animation: fadeInOutAnimation 2s infinite;
    -o-animation: fadeInOutAnimation 2s infinite;
    animation: fadeInOutAnimation 2s infinite;
}

.hint-swipe-down-arrow{
    -webkit-animation: fadeInOutAnimation 2s infinite;
    -moz-animation: fadeInOutAnimation 2s infinite;
    -o-animation: fadeInOutAnimation 2s infinite;
    animation: fadeInOutAnimation 2s infinite;
}

@keyframes fadeInOutAnimation { 
    0%   { opacity:1; }
    50%  { opacity:0.33; }
    100% { opacity:1; }
}

.background-1{
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-color: #1a1a37;
    background-image:url("/images/bg1920x1080a.webp");    
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    align-items: center;
}

.background-2{
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-color: #1a1a37;
    background-image:url("/images/bg1920x1080b.webp");    
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    align-items: center;
}

.promotion-sm{
    display: none;
}

.promotion-xl{
    display: block;
}

@media (min-aspect-ratio:1.25) {
    .d-ratio-none{
        display: none !important;
    }

    .d-ratio-block{
        display: block !important;
    }
}

@media (max-aspect-ratio:1.25) {
    .background-1{
        background-image:url("/images/bg1024x1366a.webp");    
    }

    .background-2{
        background-image:url("/images/bg1024x1366b.webp");    
    }
    .promotion-sm{
        display: block;
    }

    .promotion-xl{
        display: none;
    }

    .col-ratio-12{
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-aspect-ratio:0.6) {
    .background-1{
        background-image:url("/images/bg430x932a.webp");    
    }

    .background-2{
        background-image:url("/images/bg430x932b.webp");    
    }

    .col-ratio-12{
        flex: 0 0 auto;
        width: 100%;
    }
}


.page-container{
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}

.snap-section{
    height: 100vh !important;
}

.section{
    width: 100% !important;
    height: auto;
    color: white; 
    font-size: 1.2rem; 
    scroll-snap-align: none;
    display: flex;
    justify-content: space-around;
}

.section-content{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.promotion-img{
    aspect-ratio: 16/8.74;
    width: auto;
    max-height: 50vh;
}

.promotion-img-responsive{
    max-width: 100%
}

.responsive-section{
    height: auto;
    scroll-snap-align: none;
}

.responsive-section-content{
    width: 100%;
    height: 100%;
    transform: translate(0, 0);
}


@media (max-width: 767.98px) {
    .section{
        height: auto !important;
    }

    .snap-section{
        width: 100% !important;
        height: 100vh !important;
    }

    .section-content{
        transform: translate(0, 0);
    }

    .responsive-section{
        width: 100% !important;
        height: auto;
        color: white; 
        font-size: 1.2rem; 
        scroll-snap-align: start !important;
        display: flex;
        justify-content: center;
    }

    .responsive-section-content{
        width: 100% !important;
        position: relative;
        height: 100%;
        padding: 1rem;
        align-items: center;
        justify-content: space-around;
    }

    .custom-navbar{
        height: 3rem !important;
    }

    .brand{
        height: 3rem;
    }

}


@media (min-width: 767.98px) {
    .section{
        scroll-snap-align: start !important;
    }

    .mh-md-40{
        max-height: 40vh;;
    }

    .mh-md-50{
        max-height: 50vh;;
    }

    .mh-md-80{
        max-height: 80vh;;
    }
    
    .mw-md-50{
        max-width: 50vw;
    }

    .h-md-50{
        height: 50%;
    }

    .vh-md-40{
        height: 40vh;
    }

    .vh-md-60{
        height: 40vh;
    }
    
}

.text-background{
    padding: 1rem;
    border-radius: 10px;
    border: 0.2rem solid rgba(54, 54, 132, 0.73);
    background: rgba(26, 26, 55, 0.73);
}

.youtube{
    aspect-ratio: 16 / 9;
    max-width: 90%;
    width: auto;
    max-height: 90%;
}

@media (orientation: landscape) and (max-width: 767.98px) {
    .youtube{
        max-width: 90%;
        width: 100vh;
        max-height: 90%;
    }
}

.shorts{
    aspect-ratio: 9 / 16;
    height: 100%;
    max-height: 80vh;
}

#promotionCarousel{
    aspect-ratio: 9/16;
    max-width: 25rem;
    max-height: 60vh;
    margin: auto;
}

#instructionCarousel{
    aspect-ratio: 9/16;
    max-width: 25rem;
    max-height: 80vh;
    margin: auto;
    height: 100%;
}

@media (max-width: 1199.98px) {
    #promotionCarousel{
        max-height: 60vh;
    }
}

@media (max-width: 767.98px) {
    #promotionCarousel{
        min-width: 90%;
        max-width: none;
        max-height: 80vh;
    }
}

.carousel-button{
    margin-bottom: 6rem;
}

.logo-button{
    aspect-ratio: 1;
    width: 100%;
    height: auto;
}

.logo-button img{
    width: 100%;
    height: 100%;
}

.qrcode{
    aspect-ratio: 1;
    min-width: 4rem;
    min-height: 4rem;
    max-width: 8rem;
    max-height: 8rem;
    margin: auto;
}

.justify-content-space-around{
    justify-content: space-around;
}

#logo-list{
    align-items: center;
    justify-content: center;
}

.absolute-center{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%)
}

.circle-mask{
    aspect-ratio: 1;
    min-width: 4rem;
    min-height: 4rem;
    max-width: 8rem;
    max-height: 8rem;
    -webkit-mask-image: url("/images/circle-mask.png");
    mask-image: url("/images/circle-mask.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    text-align: enter;
    margin: auto;
}

.logo{
    width: 110%;
    height: 110%;
    transition: width .5s, height .5s, transform .5s;
    transform: translate(-5%, -5%);
}

.logo:hover{
    width: 100%;
    height: 100%;
    transform: translate(0, 0);
}

.footer{
    padding: 1rem;
    background-color: #1a1a37;
}