@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

*{
    position:relative;
    z-index:5;
    margin:0;
    padding:0;
}

html,body{
    background:#090909;
    overflow-x:hidden;
}

p{
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color:white;
    font-size:30px;
    left:100px;
    max-width:70vw;
}

h1{
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color:white;
    font-size:80px;
    padding-left:100px;
}

button{
    margin-left:100px;
    padding:10px;
    padding-left:30px;
    padding-right:30px;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color:black;
    background-color:white;
    font-size:30px;
    border:none;
    border-radius:100px;
}

video{
    height:300px;
    mix-blend-mode:screen;
    position:fixed;
    overflow:hidden;
    pointer-events:none;
}

#bg-canvas{
    width:calc(100vw + 20px);
    height:calc(100vh + 20px);
    position:fixed;
    z-index:1;
    left:-10px;
    top:-10px;
    mix-blend-mode:screen;
    pointer-events:none;
}

#logo{
    padding-left:100px;
    padding-top:20px;
    width:300px;
}

#scrollvid{
    height:400vh;
    mix-blend-mode:screen;
    overflow:clip;
}

.highlight{
    text-shadow: 10px -10px 15px rgba(255, 0, 68, 0.5), -10px 10px 15px rgba(0, 144, 255, 0.5);
}

.highlight-small{
    text-shadow: 5px -5px 7px rgba(255, 0, 68, 0.5), -5px 5px 7px rgba(0, 144, 255, 0.5);
}

.bigbr{
    margin-top:120px;
    margin-bottom:120px;
}

hr{
    border-top:1px solid #ffffff;
    width:50vw;
    left:100px;
}