:root {
    --margin: 5vw;
}
#advert{
    visibility: hidden;
    background-color: black;
    /* overflow-y: scroll; */
    cursor:pointer;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background-color: #e862cb;
}
.section{
    scroll-snap-align: start;
}
    #btnMain{
        pointer-events: none;
    }
    #logotype{
        top: calc(var(--margin)*1);
        width:70%;
        height: 20%;
        position: fixed;
        background-image: url(../assets/logotype-girls.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 100000;
    }
    #btnClose, #btnBack, #btnLeft, #btnRight{
        top:var(--margin);
        width:calc(var(--margin)*2);
        height:calc(var(--margin)*2);
        
    }
    #btnClose{
        pointer-events: auto;
        right:var(--margin);
        background-image: url(../assets/ico_close.png);
        position: fixed;
    }
    #btnBack{
        pointer-events: auto;
        visibility: hidden;
        left:var(--margin);
        position: fixed;
    }
    #btnLeft{
        left:0;
        top: 47%;
        background-image: url(../assets/btn_left.png);
        opacity:0;
        width:calc(var(--margin)*4);
        height:calc(var(--margin)*4);
    }
    #btnRight{
        opacity:0;
        right:0;
        top: 47%;
        background-image: url(../assets/btn_right.png);
        width:calc(var(--margin)*4);
        height:calc(var(--margin)*4);
    }
    #btnCTA{
        bottom: calc(var(--margin)*2);
        height:10%;
        /* background-image: url(../assets/start-btn.png); */
        /* background-color: aquamarine; */
        background-size: 80%;
    }
.movie{
    height: 70%;
}
.kv{
    height: 42%;
    aspect-ratio: 640/465;
    background-image: url(../assets/section3-kv.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
.section:nth-child(1){
    background-image: url(../assets/section1-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.section:nth-child(2){
    visibility: hidden;
    background-image: url(../assets/section2-game.png);
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: center;
}
.section:nth-child(3){
    visibility: hidden;
    background-image: url(../assets/section3-background-video.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
#btnRightTutorial{
    display: none;
    opacity: 0;
    width: calc(var(--margin)*8.5);
    height: calc(var(--margin)*8.5);
    border-radius: calc(var(--margin)*8.5);
    background-color: #ffffff38;
    right: -18%;
    z-index: 1;
}
.footer{
    bottom: 0;
    width:100%;
    /* height: 24%; */
    aspect-ratio: 640/284;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 100%;
}
#sections > div:nth-child(1) > .footer{
    opacity:0;
    background-image: url(../assets/footer-1.png);
}
#sections > div:nth-child(2) > .footer{
    background-image: url(../assets/footer-2.png);
    height: 5%;
}