@keyframes one-scene{
    0%{
        left:100%;
        opacity:0;
    }

    5%{
        left:0;
        opacity:1;
    }

    10%{
        left:0;
        opacity:1;
    }

    15%{
        left:-100%;
        opacity:0;
    }

    100%{
        left:-100%;
        opacity:0;
    }
}

h2,h3{
    font-family: "m-plus-rounded-1p", sans-serif;
    font-weight: 400;
    font-style: normal;
}

p{
    font-family: "m-plus-rounded-1p", sans-serif;
    font-weight: 200;
    font-style: normal; 
}

body{
    width:100%;
    background-color:#1D1B30;
}

main{
    position:relative;
    padding-bottom:100px;
    top:0;
    background-image: linear-gradient(-120deg, rgba(59, 40, 105, 0), rgba(71, 70, 139, 0.9) 20%, rgba(59, 40, 105, 0) 80%);
}

.back-star{
    position:absolute;
    opacity:0.2;
}

.back-draw{
    overflow-x:hidden;
    position:relative;
    clip-path:inset(5%);
    width:100%;
    margin:0 auto;
    top:50px;
    padding:300px 0;
    background-color:#212121;
    opacity:0.7;
}

.scene-cut{
    position:relative;
    width:100%;
}

.scene-cut li{
    position:absolute;
    font-size:24pt;
    width:100%;
    margin-top:-12pt;
    top:50%;
    color:#F2F2F2;
    text-align:center;
    animation:one-scene 60s infinite backwards;
}

.scene-cut li h3 br,a br{
    display:none;
}

.scene-cut li:nth-child(1){
    animation-delay:0s;
}
.scene-cut li:nth-child(2){
    animation-delay:calc(6s * 1);
}
.scene-cut li:nth-child(3){
    animation-delay:calc(6s * 2);
}
.scene-cut li:nth-child(4){
    animation-delay:calc(6s * 3);
}
.scene-cut li:nth-child(5){
    animation-delay:calc(6s * 4);
}
.scene-cut li:nth-child(6){
    animation-delay:calc(6s * 5);
}
.scene-cut li:nth-child(7){
    animation-delay:calc(6s * 6);
}
.scene-cut li:nth-child(8){
    animation-delay:calc(6s * 7);
}
.scene-cut li:nth-child(9){
    animation-delay:calc(6s * 8);
}
.scene-cut li:nth-child(10){
    animation-delay:calc(6s * 9);
}

.image-logo{
    position:absolute;
    right:6%;
    bottom:20px;
    width:25%;
    object-fit:contain;
}

.trailer{
    width:80%;
    margin:0 auto;
    padding:300px 0;
    color:#F2F2F2;
}

.trailer h2{
    font-size:20pt;
    text-align:center;
    margin:20px 0;
}

.short-trailer{
    width:80%;
    margin:0 auto;
    color:#F2F2F2;
}

.short-trailer h2{
    font-size:20pt;
    text-align:center;
}

.part{
    padding:30px 0;
}

.part h3{
    font-size:16pt;
    padding-bottom:10px;
}

.links{
    width:100%;
    margin:0 auto;
    padding:30px;
}

.link-btn{
    width:80%;
	margin:30px auto;
    text-align:center;
    background-color:#F2F2F2;
    color:#1D1B30;
    opacity:0.5;
    transition:0.5s;
}

.link-btn:hover{
    opacity:1;
}

.link-btn a{
    display:block;
    padding:20px;
    width:100%;
}

@media(max-width:850px){
    .scene-cut li h3 br,a br{
        display:block;
    }
}