@charset "UTF-8";

/* :root{
    --bl: #111827;
    --c1: #7C3AED;
    --c2: #c026d3;
    --shadow:   0 0 5px #fff,
                0 0 15px #fff,
                0 0 30px var(--C1),
                0 0 45px var(--C1),
                0 0 70px var(--C1),
                0 0 100px var(--C1),
                0 0 150px var(--C1);
    --shadow2:  0 0 5px #fff,
                0 0 20px #fff,
                0 0 15px var(--C2),
                0 0 45px var(--C2),
                0 0 70px var(--C2),
                0 0 100px var(--C2),
                0 0 150px var(--C2),

}  */



body{

    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-family: 'Poppins', sans-serif;
    width: 100vw;
    height: 500vh;
    background-attachment: fixed;   
    overflow-x: hidden;
  
}


/* 
marquee{

    height: 500vh;
}
.img-new{
    width: 30vh;
} */

.marquee {
    width: 100%;
    background-color: blueviolet;
    white-space: nowrap;
    overflow: hidden;

}

.marquee div{
    font-size: 3rem;
    font-family: 'Roboto', sans-serif;
    animation: animate 10s linear infinite;
    padding-left: 100%;
    display: inline-block;

}


@keyframes animate{
    100%{
        transform: translate(-100%, 0);
    }
}


section {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

}



.origin{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    /* font-size: 65vh; */
    font-size: 37vw;
    font-weight: bold;
    color:springgreen;
    position: fixed;
    margin-top: 35vh;
    margin-bottom: 30vh;
    mix-blend-mode:difference; 

    /* animation-name: change;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite; */
}

/* @keyframes change{

    0% {
        font-variation-settings: "weight"
        100, "grade" 150;
        text-shadow: var(--shadow);
    }
    100% {
        font-variation-settings: "weight"
        30, "grade" 0;
        text-shadow: var(--shadow2);

    }

} */


/* .title {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 23vw;
    font-weight: bold;
    color:black;
    position: relative;
    top: 100vh;
    bottom:00vh;
    line-height: 100vh; 
    mix-blend-mode:hue; 
} */

.title {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 23vw;
    font-weight: bold;
    color:black;
    position: relative;
    width: 100vw;
    height: 30vh;
    /* line-height: 100vh;  */
    mix-blend-mode:hue; 
    margin-top: 10vh;
}


.title2{
    text-align: center;
    line-height: 1;
    font-size: 25vh;


  
}

.boxes {
    /* margin-top: 100vh; */
    height: 20vh;
    position: relative;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 20vh;
    

    
}

.box {
    text-align: center;
    position: relative;
    /* top: 90vh;
    bottom: 300vh; */
    font-weight:100;
    font-size: 8vw;
    line-height: 0;
    padding: 1vh;
    transition: 0.2s;
    color:springgreen;  


}

.box:hover {
    color: blueviolet;
    line-height:1;
    font-weight: 800;
   
}

/* 
.video1{
    position: relative;
    width: 100vw;
    height: 100vh;
    /* background-image: url("../images/video1.mp4");
    z-index:-1;
} */

.video{
    overflow: hidden;

}

.video1{
    overflow: hidden;
}

.video1 img{
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

}

@media screen and (min-width: 800px) {
    .origin{
        margin-top: 15vh;
        margin-bottom: 30vh;
    }

    .boxes{
        height: 40vh;
        margin-top: 30vh;

    }
    .box{
        font-size: 4vw;

    }

    .box:hover {
        color: black;
        line-height:2;
        font-weight: 800;
       
    }

    .video1{
        position: relative;
        width: 100vw;
        height:100vh;
        z-index:-1;
    }

  }