@font-face {
    font-family: ExodarOutline;
    src: url(assets/exodar-font/ExodarOutline-9Yy27.ttf);
  }
  
  @font-face {
    font-family: Abduction;
    src: url(assets/abduction/Abduction.ttf);
  }

  @font-face {
    font-family: Zealot;
    src: url(assets/zealot-font/Zealot-Kxry.ttf);
  }
  
  
  body {
    background-image: url("assets/Grid50px.png");
    z-index: 0;
}

#title1 {
    position: justify;
    font-size: 60px;
    font-family: ExodarOutline;
    text-align: center;
    background-color: white;
    opacity: 84%;
}

#quoteDisplay {
    position: justify;
    font-family: Zealot;
    font-size: 22px; 
    text-align: center;
    top: 249px;
    margin: 60px;
    padding: 40px;
    background-color: white;
    border-radius: 20px;
    z-index: 10;
    opacity: 90%;
}

.button {
    text-align: center;
    position: fixed;
    font-family: Abduction;
    font-size: 30px;
    padding: 40px;
    margin: 10%;
    bottom: 1px;
    left: 20%;
    width: 40%;
    background-color: white;
    border-color: white;
    border-radius: 28px;
    z-index: 10;
}

/* ================================= MIDGROUND SHAPES ============================================ */

.shapies1 img{
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: 1;
}
#shape01 img {
    animation: anim1 13s ease-in-out infinite;
}
#shape02 img {
    animation: anim2 11s ease-in-out infinite;
}
#shape09 img {
    animation: anim3 31s ease-in-out infinite;
}
#shape10 img {
    animation: anim4 12s ease-in-out infinite;
}
#shape20 img {
    animation: anim5 23s ease-in-out infinite;
}
#shape23 img {
    animation: anim6 43s ease-in-out infinite;
}

/* ===================== ANIMATIONS ================================ */

@keyframes anim1{
    0%{
        top:20vh;
        left:50vh;
        height:15vh;
        width:30vh;
        opacity:5%;
    }
    50%{
        top:40vh;
        left:3vh;
        height:60vh;
        width:1vh;
        opacity:60%;
    }
    100%{
        top:1vh;
        left:50vh;
        height:20vh;
        width:10vh;
        opacity:5%;
    }
}

@keyframes anim2{
    0%{
        top:40vh;
        left:30vh;
        height:20vh;
        width:50%;
        opacity:70%;
    }
    50%{
        top:5vh;
        left:10vh;
        height:50vh;
        width:1vh;
        opacity:2%;
    }
    100%{
        top:40vh;
        left:30vh;
        height:20vh;
        width:50vh;
        opacity:70%;
    }
}

@keyframes anim3{
    0%{
        top:5vh;
        left:2vh;
        height:20vh;
        width:90vh;
        opacity:10%;
    }
    50%{
        top:70vh;
        left:38vh;
        height:35vh;
        width:1vh;
        opacity:70%;
    }
    100%{
        top:5vh;
        left:2vh;
        height:20vh;
        width:10vh;
        opacity:10%;
    }
}
@keyframes anim4{
    0%{
        top:40vh;
        left:20vh;
        height:20vh;
        width:30vh;
        opacity:10%;
    }
    50%{
        top:10vh;
        left:50vh;
        height:40vh;
        width:1vh;
        opacity:70%;
    }
    100%{
        top:40vh;
        left:20vh;
        height:20vh;
        width:30vh;
        opacity:10%;
    }
}
@keyframes anim5{
    0%{
        top:40vh;
        left:25vh;
        height:20vh;
        width:10vh;
        opacity:10%;
    }
    50%{
        top:10vh;
        left:10vh;
        height:60vh;
        width:60vh;
        opacity:60%;
    }
    100%{
        top:40vh;
        left:25vh;
        height:20vh;
        width:10vh;
        opacity:10%;
    }
}
@keyframes anim6{
    0%{
        top:15vh;
        left:5vh;
        height:20vh;
        width:90vh;
        opacity:10%;
    }
    50%{
        top:30vh;
        left:40vh;
        height:60vh;
        width:1vh;
        opacity:70%;
    }
    100%{
        top:15vh;
        left:5vh;
        height:20vh;
        width:90vh;
        opacity:10%;
    }
}