@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline:opsz,wght@10..72,100..900&family=Bitcount+Grid+Double:wght@100..900&family=Bungee+Inline&family=Oxanium:wght@200..800&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap');

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

/* @import "compass/css3"; */

html{
overflow-x: hidden;
}

body{
margin:0px;
background-color: rgb(0, 0, 0);
/* background-size: cover; */
font-weight: 200;
display: flex;
justify-content: center;
flex-direction: row;
overflow: hidden;
}

#background{
position: absolute;
top:54%;
left:50%;
transform: translate(-50%,-50%);
width: 70%;
height:100vh;
z-index: -5;
background-size: cover;
background-position: center;
transition:background-image 1s;
border-radius: 20px;
filter: blur(6px);
/* box-shadow:
0 0 100px 5px #fff; */
/* 0 0 100px 20px #f0f, 
0 0 140px 40px #0ff;  */
}

canvas{
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
z-index:-5;
mix-blend-mode: exclusion;
pointer-events: none;
}

button{
/* width:50px;
height:50px; */
padding: 10px;
text-align: center;
border-radius: 5px;
border:0px;
display: flex;
justify-content: center;
align-items:center;
background-color: black;
color: white;
min-width: 250px;
font-size: 16px;
border:0.2px white solid;
font-family: "Oxanium", sans-serif;
font-weight: 400;
/* background-image: radial-gradient(black 0%, black 80%); */

}

button:hover{
/* background-color: white; */
border:solid green 1px;
color: green;
transition: all 1s;
/* background-image: radial-gradient(white 0%, black 80%); */
}

#topRow{
    width: 100vw;
    display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap:wrap;
    gap:20px;
    z-index: 100;
    /* border:1px green solid; */
    pointer-events: auto;
    padding-bottom:40px;
}

/* #bottomRow{
position: absolute;
bottom:1%;
width: 65%;
display: flex;
justify-content: space-between;
left:50%;
    transform: translate(-50%);
} */

#title{
padding-left:20px;
padding-right:20px;
width:80%;
color:white;
/* border:solid green; */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
vertical-align: middle;
/* margin-bottom: 1%;
padding-bottom: 2%; */
/* border-bottom:1px solid white; */
line-height: 3rem;
}

#question{
padding-left:20px;
padding-right:20px;
width:80%;
color:white;
/* border:solid green; */
font-weight: 400;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
vertical-align: middle;
/* margin-top: 0px; */
 }

h1{font-size: 3.0rem;
letter-spacing: .2rem;
/* font-family: "Bungee Inline", sans-serif; */
font-family: "Oxanium", sans-serif;
font-weight: 600;
}

h3{
color:white;
/* font-family: 'Lato', sans-serif; */
font-size: 1.3rem;
}

.Layer_2{
width:100px;
height:100px;
}

.words{
width: 100vw;
height: 100vh;
/* padding:20px; */
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
overflow-x: hidden;
/* border:solid red; */
}

@media (max-width: 800px) {
    
    canvas{
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    z-index:-1;
    mix-blend-mode: exclusion;
    }

    .words{
    top:0%;
    overflow-x: hidden;
    }
}

@media (max-width: 400px) {

       
    canvas{
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0px;
        z-index:-1;
        mix-blend-mode: exclusion;
        }

        .words{
            top:0%;
            overflow-x: hidden;
            }

}