/* html {
  overflow-y: scroll;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

body {
  overflow-y: visible;
  position: relative;
  height: unset;
} */

html{
  width: 100%;

}

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  width: 100%;
}

main>div:first-child, main>div:last-child{
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

section{
  position: relative;
  width: 100vw;
}

section>.video_text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.459);
  padding: 1rem 2rem;
  border-radius: 2rem;
  color: white;
}

section>video{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.first{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: white;
 z-index: 2;
}

.first>div {
 width: 100%;
 height: 100vh;
 position: absolute;
 top: 0%;
 z-index: -1;
}

.first>div:first-child{
  border-top: 100vh solid #8718ef;
  border-left: 98vw solid transparent;

}

.first>div:nth-child(2){
  border-bottom: 100vh solid #8718ef;
  border-right: 98vw solid transparent;

}

.scroll_container{
  height: 2000vh;
  width: 100%;
  position: relative;
}

.scroll_content{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden; 
}

.video_section{
  display: flex;
  flex-wrap: nowrap;
  width: 300%;
}