.section {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    user-select: none;
    overflow: hidden;
}
.section.scene1, .section.scene2, .section.scene3 {
    position: relative;
    justify-content: center;
}
.curtain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: lightgray;
    z-index: 2000;
}
.wh {
    max-width: 1400px;
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center 15%;
    z-index: 10;
}
.t1,.t2 {
    font-size: 130px;
    font-size: calc(30px + 5vw);
    text-align: center;
    font-weight: 900;
    color: var(--gray);
    white-space: nowrap;
    z-index: 9;
}
.t2 {
    font-size: 300px;
    font-size: 15vw;
    font-family: var(--fonts-main);
    color: var(--black);
    letter-spacing: 30px;
}
.t3 {
    position: absolute;
    right: 0;
    bottom: 5rem;
    max-width: 500px;
    width: 100%;
    height: 270px;
    object-fit: cover;
    object-position: center;
    z-index: 10;
}
.pic-biden {
    position: absolute;
    bottom: 0;
    max-width: 680px;
    width: 100%;
    height: 680px;
    object-fit: cover;
    object-position: center;
    z-index: 11;
}
.dp-slogan {
    position: absolute;
    top: calc(100% - 20rem);
    left: 6rem;
    max-width: 380px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 11;
}
.dp-title-name {
    position: absolute;
    top: calc(100% - 25rem);
    right: 2rem;
    max-width: 550px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 11;
}
.pic-trump {
    position: absolute;
    bottom: 0;
    max-width: 800px;
    width: 100%;
    height: 680px;
    object-fit: cover;
    object-position: center;
    z-index: 11;
}
.rp-slogan {
    position: absolute;
    top: calc(100% - 20rem);
    left: 2rem;
    max-width: 380px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 11;
}
.rp-title-name {
    position: absolute;
    top: calc(100% - 25rem);
    right: 2rem;
    max-width: 500px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 11;
}
.border {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100vw - 10rem);
    min-height: calc(100vh - 15rem);
    outline: 1px solid var(--gray);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1;
}




.section-video {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    /* width: 100vw; */
}
.section-video .video-wrap {
    position: relative;
    width: 100%;
    /* height: 100%; */
    margin: 0;
    padding: 0;
    /* object-fit: cover; */
    background: var(--gray);
}
/* .section-video .video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
} */

/* .section-video .video {
    width: 100%;
} */

/* .video-content {
    position: absolute;
    top: 65%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
} */

/* .video-content h1{
    font-size: 34px;
    color: #ffffff;
} */

/* .video-content p{
    font-size: 18px;
    color: #000000;
} */





@media screen and (min-width: 1200px) {
    .border {
        width: calc(100vw - 10rem);
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .wh {
        height: 100vmin;
    }
    .t1,.t2 {
        /* font-size: calc(25px + 1vw); */
        font-size: 9vmin;
    }
    .t2 {
        /* font-size: calc(130px + 1vw); */
        font-size: 22vmin;
        letter-spacing: 5px;
    }
    .t3 {
        position: absolute;
        right: 0;
        bottom: 7rem;
        max-width: 400px;
        height: auto;
    }
    .border {
        width: calc(100vw - 50px);
        min-height: calc(100vh - 200px);
    }
    .pic-biden {
        max-width: 80vmin;
        height: 80vmin;
    }
    .dp-slogan {
        top: unset;
        bottom: 15vmin;
        left: 0;
        max-width: 35vmin;
    }
    .dp-title-name {
        top: unset;
        bottom: 5vmin;
        right: 0;
        max-width: 50vmin;
    }
    .pic-trump {
        max-width: 83vmin;
        height: 70vmin;
    }
    .rp-slogan {
        top: unset;
        bottom: 40vmin;
        left: 0;
        max-width: 40vmin;
    }
    .rp-title-name {
        top: unset;
        bottom: 3vmin;
        right: 0;
        max-width: 50vmin;
    }
}




@media screen and (max-width: 767px) {
    .section {
        display: block;
    }
    .wh {
        position: absolute;
        bottom: 0;
        max-width: 767px;
        width: 100%;
        height: 570px;
        height: 130vmin;
    }
    .t1,.t2 {
        font-size: 9vmin;
        font-weight: 900;
        color: var(--gray);
        z-index: -1;
    }
    .t2 {
        font-size: 40vmin;
        color: var(--black);
        line-height: 1.4;
        letter-spacing: 0;
    }
    .t3 {
        max-width: 65vmin;
        height: auto;
    }
    .border {
        width: calc(100vw - 60px);
        min-height: calc(100vh - 100px);
        z-index: -1;
    }
    .pic-biden {
        max-width: 315px;
        height: 430px;
    }
    .dp-slogan {
        top: unset;
        bottom: 25vmin;
        left: 0;
        max-width: 40vmin;
    }
    .dp-title-name {
        top: unset;
        bottom: 5vmin;
        right: 0;
        max-width: 60vmin;
    }
    .rp-slogan {
        top: unset;
        bottom: 50vmin;
        left: 0;
        max-width: 50vmin;
    }
    .rp-title-name {
        top: unset;
        bottom: 3vmin;
        right: 0;
        max-width: 60vmin;
    }
}
@media screen and (min-width: 768px) {
    .scene1 .t2 br {
		display: none;
	}
    .t3 {
        bottom: 5%;
        max-width: 450px;
        height: 250px;
    }
}
@media screen and (max-width: 575px) {
    .wh {
        height: 120vmin;
    }
    .t1,.t2 {
        font-size: calc(25px + 1vw);
        font-size: 8.5vmin;
    }
    .t2 {
        font-size: calc(130px + 1vw);
        font-size: 40vmin;
    }
    .border {
        width: calc(100vw - 50px);
        min-height: calc(100vh - 110px);
    }
    .pic-biden {
        max-width: 100vmin;
        height: 100vmin;
    }
    .pic-trump {
        max-width: 100vmin;
        height: 90vmin;
    }
}


/* @media screen and (max-width: 991px) {
    .section {
		height: 100%;
	}
} */
/* @media (min-width: 768px) and (max-width: 991px) {
    .section {
        height: 130vh;
    }
} */