html {
    background-color: black;
}

body {
    position: relative;
    max-width: 100% !important;
    overflow-x: hidden !important;
    z-index: 99;
}

.background{
    /* background-image: url(./assets/imgs/blurry-background.jpg);
    background: contain;
    background-size: cover; */
    position: fixed;
    background-color: black;
    z-index: -99;
    height: 92%;
    width: 100%;
    /* margin-top: 2em; */
}

.slide-right {
    transform: translate(1500px, 0px);
    transition: 2s;
    transition-timing-function: ease-in;
}

.slide-left {
    transform: scale(1);
    transition: 2s;
    transition-timing-function: ease-in;
}

h1, a {
    font-family: 'Prompt', sans-serif;
    color: #ffffff;
}

.head {
    padding-right: 11%;
}

a {
    transition: .6s;
    transition-timing-function: ease-out;
}

a:hover, .social:hover, .arrow:hover {
    color: #1affe7;
    transition: 1s;
    transition-timing-function: ease-out;
    cursor: pointer;
}

.arrow:hover {
    transform: translateY(-10px);
}

#home {
    margin-bottom: 6em;
}

.blue {
    color: #1affe7;
}

.arrow {
    margin-right: 1em;
    margin-top: 2.4em;
    margin-left: .5em;
}

.poster {
    width: 100%;
    height: auto;
    transition: 1s;
    transition-timing-function: ease-out;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, .8));
    margin: 0 auto;
    display: block;
}

.poster:hover {
    transform: scale(1.1);
    transition: 1s;
    transition-timing-function: ease-out;
    cursor: pointer;
}

.poster-back {
    position: absolute;
    z-index: -10;
    /* width: 110%; */
    opacity: .3;
    width: 18%;
    transform: scaleY(1.4) skew(.12rad);
    filter: blur(1.5rem);
}

#red-back {
    position: fixed;
    z-index: -8;
    right: 13em;
    top: 0;
    width: 20%;
    height: 400vh;
    transform: rotate(1deg);
    opacity: .6;
}

.social {
    font-size: 1.5em;
    margin: .3em .1em 0;
    color: white;
}

.glitch-container {
    height: 10em;
    bottom: 0;
    z-index: -9;
    position: relative;
    opacity: .6;
}

.glitch-x {
    background-image: url("./assets/imgs/Website_Glitch_Background_2.png");
    opacity: .9;
    height: 100%;

}

.back-left {
    margin: -4em 0 0 -9em;
}
.back-center {
    margin: -4em 0 0 -4em;
}
.back-right{
    margin: -4em -9em 0 0;
}

.padded {
    margin: 0 20%;
}

/* .pulseUp {
    -webkit-animation-name: pulseUp;
    -webkit-animation-duration:15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    animation-direction: alternate;
    
} */

footer {
    height: 25em;
}

footer .glitch-container {
    height: 20em;
}

/* @-webkit-keyframes pulseUp {
    from {
      -webkit-transform: scale(1);
    }
    to {
      -webkit-transform: scale(1.4);
    }
  } */

  /* Inner Pages */
  .page {
      padding: 1em 0 5em 0;
  }

  a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
    }

  .background-hero {
      position: absolute;
      z-index: -1;
      margin-top: 2em;
  }

  .youtube-container {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin-top: 4em;
}

.youtube-container iframe,.youtube-container object,.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.animals.laurel-left {
    margin-top: 3em;
}

.animals.laurel-right {
    margin-top: 6em;
} 

.creatures.laurel-left {
    margin-top: 5em;
}

.creatures.laurel-right {
    margin-top: 8em;
}

.laurel-left {
    margin-top: 8em;
}

.laurel-right {
    margin-top: 10em;
}

@media only screen and (max-width: 1020px) {
    .social {
        margin-bottom: 2em;
    }

    .padded {
        margin: 0 25%;
    }

    .youtube-container{
        margin-top: 0em;
    }

    #red-back {
        right: 11em;
        height: 500vh;
        opacity: .2;
        width: 67%;
    }
    .animals.laurel-left, .animals.laurel-right, .creatures.laurel-left, .creatures.laurel-right,   .laurel-right, .laurel-left {
        margin-top: 0em;
        padding: 0 3em .5em 3em;
    }

    .background-hero {
        position: relative;
        z-index: 0;
        margin-top: 2em;
    }
    .mobile-reverse {
        flex-direction: column-reverse;
        margin-top: 2em
    }

    .arrow {
        margin: 0 auto;
    }
    
    .page {
        padding: unset;
    }
    
    .glitch-container {
        height: 11em;
        bottom: 0;
        z-index: -9;
        position: relative;
        opacity: .4;
    
     }
    /* footer {
        height: 10em;
    } */

}

  /*###  ######     #     #####  ### #     #  #####     #     # ####### #       ######  ####### ######   #####  
 #     # #     #   # #   #     #  #  ##    # #     #    #     # #       #       #     # #       #     # #     # 
 #       #     #  #   #  #        #  # #   # #          #     # #       #       #     # #       #     # #       
  #####  ######  #     # #        #  #  #  # #  ####    ####### #####   #       ######  #####   ######   #####  
       # #       ####### #        #  #   # # #     #    #     # #       #       #       #       #   #         # 
 #     # #       #     # #     #  #  #    ## #     #    #     # #       #       #       #       #    #  #     # 
  #####  #       #     #  #####  ### #     #  #####     #     # ####### ####### #       ####### #     #  #####  */

.m-1 {
    margin: 1em;
}
.m-2 {
    margin: 2em;
}
.m-3 {
    margin: 3em;
}
.m-4 {
    margin: 4em;
}
.m-5 {
    margin: 5em;
}                                                                                                              
.mt-1 {
    margin-top: 1em;
}
.mt-2 {
    margin-top: 2em;
}
.mt-3 {
    margin-top: 3em;
}
.mt-4 {
    margin-top: 4em;
}
.mt-5 {
    margin-top: 5em;
}
.mb-1 {
    margin-bottom: 1em;
}
.mb-2 {
    margin-bottom: 2em;
}
.mb-3 {
    margin-bottom: 3em;
}
.mb-4 {
    margin-bottom: 4em;
}
.mb-5 {
    margin-bottom: 5em;
}
.mx-1 {
    margin: 0 1em;
}
.mx-2 {
    margin: 0 2em;
}
.mx-3 {
    margin: 0 3em;
}
.mx-4 {
    margin: 0 4em;
}
.mx-5 {
    margin: 0 5em;
}
.my-1 {
    margin: 1em 0;
}
.my-2 {
    margin: 2em 0;
}
.my-3 {
    margin: 3em 0;
}
.my-4 {
    margin: 4em 0;
}
.my-5 {
    margin: 5em 0;
}
.p-1 {
    margin: 1em;
}
.p-2 {
    margin: 2em;
}
.p-3 {
    margin: 3em;
}
.p-4 {
    margin: 4em;
}
.p-5 {
    margin: 5em;
}                                                                                                              
.pt-1 {
    margin-top: 1em;
}
.pt-2 {
    margin-top: 2em;
}
.pt-3 {
    margin-top: 3em;
}
.pt-4 {
    margin-top: 4em;
}
.pt-5 {
    margin-top: 5em;
}
.pb-1 {
    margin-bottom: 1em;
}
.pb-2 {
    margin-bottom: 2em;
}
.pb-3 {
    margin-bottom: 3em;
}
.pb-4 {
    margin-bottom: 4em;
}
.pb-5 {
    margin-bottom: 5em;
}
.px-1 {
    margin: 0 1em;
}
.px-2 {
    margin: 0 2em;
}
.px-3 {
    margin: 0 3em;
}
.px-4 {
    margin: 0 4em;
}
.px-5 {
    margin: 0 5em;
}
.py-1 {
    margin: 1em 0;
}
.py-2 {
    margin: 2em 0;
}
.py-3 {
    margin: 3em 0;
}
.py-4 {
    margin: 4em 0;
}
.py-5 {
    margin: 5em 0;
}