@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
:root{
    --blue-400: #5c77f9;
    --blue-600: #1a39d2;
    --blue-800: #18266d;
    --blue-1000: #0b1235;
    --white: #fafafa;
    --grey: #9b9b9b;
    --black: #0a0a0a;

    --title-font-size: 4.5vw;
    --h1-font-size: 3vw;
    --h2-font-size: 2vw;
    --h3-font-size: 1.5rem;
    --h4-font-size: 1vw;
    --normal-font-size: 0.825vw;;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.75rem;

    --title-font: "Reddit Mono";
    --default-font: "Roboto Mono";
    --button-font: "Roboto Condensed";



    --border-radius-pill: 100px;
    --border-radius-sm: 5px;
    --border-radius-lg: 20px;




}

h1{
    font-size: var(--h1-font-size);
    font-family: var(--title-font), serif;
}

h2{
    font-size: var(--h2-font-size);
    font-family: var(--title-font), serif;
}

h3{
    font-size: var(--h3-font-size);
    font-family: var(--title-font), serif;
}

h4{
    font-size: var(--h4-font-size);
    font-family: var(--title-font), serif;
}

p,a,ul{
    font-size: var(--normal-font-size);
    font-family: var(--default-font), serif;
}

html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
}

body{
    background-color: var(--black);
    color: var(--white);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden !important;

}

header{
    background-color: black;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    align-items: center;
    width: 100%;
    height: 8vh;
    line-height: 0;
    padding-bottom: 15px;
}

header img{
    width: 6vh;
    height: 6vh;
    padding: 0 25%;
}

header a{
    color: var(--white);
    text-align: center;
    font-size: var(--h4-font-size);
    line-height: 0;
    text-decoration: none;
    transition: 0.3s;
}

.navbar{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25%;

}

.navbar li{
    padding: 10px;
    list-style: none;
    display: inline-block;
}

#signup-button{
    margin: 0 25%;
}


button{
    background-color: var(--blue-800);
    border: none;
    color: var(--white);
    border-radius: var(--border-radius-sm);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 3px;
    font-size: var(--normal-font-size);
    font-family: var(--button-font), sans-serif;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 1px 2px 5px 1px var(--black);
    padding: 1vh 1vw;
}

button:hover{
    color: var(--grey);
    background-color: var(--blue-600);
}

/* Modified code from https://github.com/Softwave/softwave.github.io/blob/master/style.css#L108 */

header a {
    text-decoration: none;
    display: inline;
    position: relative;
  }
  
header a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--blue-400);
    transform-origin: bottom right;
    transition: transform 0.15s ease-out;
  }
  
header a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

a:hover{
    color: var(--grey);
}

#section1 {
    padding-top: 1.5%;
    background: linear-gradient(180deg, rgb(0, 0, 0) 90%, rgba(0,0,0,0)100%);
}

.darktop {
    background: linear-gradient(180deg, var(--black) 0%, var(--black) 70%, rgba(0,0,0,0)100%);
    margin-top: -50;
    margin-bottom: -50px;
}

.darkbtm {
    background: linear-gradient(-180deg, var(--black) 0%, var(--black) 70%, rgba(0,0,0,0)100%);
    margin-top: -50;
    margin-bottom: -50px;
}

#hero h1{
    font-size:var(--title-font-size);
    font-family: var(--title-font), monospace;
}

#about-container{
    padding: 0 10vw;
}

#about-text{
    max-width: 600px;
    padding: 0 3%;
    justify-self: end;
}

#glitchlogo {
    mix-blend-mode: add;
    max-width: 90vw;
    padding-bottom: 0;
}


#vaporwave {
    text-align: center;
}

#vaporwave img {
    width: 300px;
}

#form-border{
    position: relative;
    background: var(--blue-600);
    background: linear-gradient(143deg, rgba(92,119,249,1) 0%, rgba(26,57,210,1) 100%);
    width: 100vw;
    z-index: 0;
}

#form-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: min-content;
    padding: 10vh 10vw;
    align-items: start;
}

#form-text{
    max-width: 600px;
    z-index: 100;
    padding: 0 3%;
}

#form-embed{
    display: block;
    z-index: 100;
    padding: 0 3%;
    align-self:  center;
}


.blocks img{
    position: absolute;
    width: 20%;
    z-index: 20;
    display: block;
}
#top-left-blocks img{
    top: -2.5vw;
    left: 0vw;

}

#bot-right-blocks img{
    bottom: -2.5vw;
    right: 0vw;
}


#faq h2{
    text-align: center;
}

.faq-item-border{
    background: var(--blue-400);
    background: linear-gradient(90deg, var(--white) 0%, var(--blue-400) 100%);  
    border-radius: 40px 40px var(--border-radius-lg) var(--border-radius-lg);
    padding: 0 0 2px 0;
    margin: 3vh 15vw 3vh 15vw;
}

.faq-item{
    background-color: var(--blue-800);
    border: 5px solid var(--blue-800);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
}

.faq-question{
    padding: 0px 10px 0px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 2ch;
}

.faq-arrow {
    font-size: var(--h3-font-size);
    color: var(--blue-400);
    transition:0.5s;

}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0px 10px 0px 10px;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    transition: 0.3s ease;
}

#location{
    text-align: center;
}


/* From here on out the css describes the title area and the spiral animation*/

.animation-container {
    position: static;
    background: rgb(29, 29, 29);
    width: 1000px;
    height: 100%;
    color: var(--blue-400);
    color: var(--blue-400);
    line-height: 10px;
    letter-spacing: 6px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    width: 100%;
    background-color: rgba(114, 114, 114, 0);
    z-index: -10;
    text-wrap: nowrap;
}

#hidden-init-text{
    display: none;
}

#learn-more-button{
    background-color: #1a39d2;
    border: none;
    color: white;
    border-radius: 5px;
    padding: 10px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 3px;
    font-size: 1.5vw;
    margin: 4px 2px;
    font-family: "Roboto Condensed", sans-serif;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 1px 2px 20px 1px var(--black)
}

#learn-more-button:hover{
    color: #1a39d2;
    background-color: white;
}

#main-title{
    font-family: "Reddit Mono", monospace;
    text-shadow: var(--blue-400) 0 0 70px, var(--blue-400) 0 0 30px, white 0 0 2px;
    line-height: 0.3ch;
    font-size: 10vw;
}

.title-animation{
    width: 100%;
    height: 100%;
    background-color: rgba(114, 114, 114, 0);
    border-radius: 10px;
}

#hero-container{
    text-align: center;
    margin: 0 15vw;
}

#hero-text{
    position: absolute;
    transform: translate(24vw, 30vh);
    width: 55vw;
    top:0;
    left:0;
    text-overflow: initial;
    white-space: initial;
    text-shadow: 0 0 70px var(--blue-400),0 0 15px rgba(255, 255, 255, 0.37), 0 0 2px var(--white);
}

#main-subtitle{
    font-family: 'Courier New', Courier, monospace;
    font-weight: 400;
}

#hero{
    border-radius: 21px;
    overflow:hidden;
    background-color: var(--blue-1000);
    box-shadow: inset 0px 0px 50px 20px var(--black);
    height: 70vh;
}

#hero-border {
    padding: 4px;
    overflow: hidden;
    margin: 0 9%;
    border-radius: 25px;
    background: rgb(92,119,249);
    background: linear-gradient(143deg, rgba(92,119,249,1) 0%, rgba(26,57,210,1) 100%);
    height: 70vh;
}

#duck{
    letter-spacing: .6px;
    line-height: 15px;
    color: var(--white);
    justify-content: center;
    text-align: center;
    font-size: 1vw;
    min-size: 10px;
}

/* matrix animation */
#matrix-container{
    position:fixed;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: -99;
}

.blink {
    animation: blink 0.8s cubic-bezier(1, 0, 0, 1)  infinite;
}

@keyframes blink {
    from {
        opacity: 100;
    }

    to {
        opacity: 0;
    }
}

hr{
    color: var(--white);
    margin: 2vh 3%;
}

/*synthwave animation */
#synthwave-canvas{
    margin-top:-200vh;
    z-index:-2;
    position: relative;
}

/*footer*/
footer{
    margin: 0 3%;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    align-items: center;
    width: 94%;
}
#footer-left{
    display: flex;
    flex-direction: row;
    align-items: baseline;

}

#footer-right li{
    list-style: none;
}
#footer-right{
    display: block;
    text-align: right;
}

.mobile {
    display: none;
}

.desktop {
    display: unset;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    :root{
        --title-font-size: 8vw;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --h4-font-size: 1rem;
        --normal-font-size: 1rem;
    }
    header{
        grid-template-columns: 0fr 8fr 2fr;
    }
    header a{
        font-size: 0.8rem;
    }
    header img{
        margin: 0 10%;
    }

    #signup-button{
        margin: 0 10%;
    }
    button{
        font-size: 0.8rem;
        letter-spacing: 3px;
        padding: 1vh 2vw;
    }

    #about-container{
        display: block;
    }

    #form-container{
        padding: 15vh 10vw;
    }

    .blocks img{
        width: 50%;
    }
    #top-left-blocks img{
        top: -4vw;
    }
    
    #bot-right-blocks img{
        bottom: -4vw;
    }
    .desktop {
        display: none;
    }

    .mobile {
        display: unset;
    }

    #hero-text{
        padding: 0;
        margin: 0;
        margin-top: -10vh;
    }

    #main-title{
        line-height: 5vh;
    }

    #main-subtitle{
        font-size: 5vw;
    }

    #learn-more-button{
        font-size: 3vw;
    }
}
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
    :root{
        --normal-font-size: 1rem;
    }

    #form-container{
        padding: 15vh 15vw;
    }

    .blocks img{
        width: 38%;
    }
    #top-left-blocks img{
        top: -3vw;
    }
    
    #bot-right-blocks img{
        bottom: -5vw;
    }
}
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {

    #about-container{
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
    }

    #form-container{
        flex-direction: row;
    }

    #form-text{
        max-width: 30vw;
    }

    .blocks img{
        width: 20%;
    }
    #top-left-blocks img{
        top: -2.5vw;
    }
    
    #bot-right-blocks img{
        bottom: -2.5vw;
    }
}