@import url(https://fonts.googleapis.com/css?family=Spectral&display=swap);
body {
    margin: 0;
    background: #222;
    font-family: Spectral;
    font-weight: 600;
    text-shadow: 2px 2px 0.5px rgba(0, 0, 0, 1)
}
  .parent {
    position: relative;
    top: 0px;
    left: 0px;
  }
  
  .construction {
    background-image: url(construction.png);    
    background-repeat: repeat-x;
    width: 1920px;
    height: 70px;
    animation: bgScrollLeft 8s linear infinite;
    position: relative;
    top: 0;
  }

  .quotes {
    background-image: url(quoteticker.png);    
    background-repeat: repeat-x;
    width: 1920px;
    height: 300px;
    animation: bgScrollLeft2 50s linear infinite;
    position: relative;
    top: 0;
  }
  
  @keyframes bgScrollLeft2 {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -9600px 0;
    }
  }

  @keyframes bgScrollLeft {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -1920px 0;
    }
  }
  
  .text-block {
    position: absolute;
    bottom: 150px;
    right: 0px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
  }

  .text-block2 { /* I should actually be executed for whatever on God's green Earth I have decided to do here for text.
     God held no hand in the creation of this cursed, inexorably made website. 
     This suggests, that either He is willfully ignorant to his creation, or, blissfully, has no knowledge of the horrors taking place in His kingdom. 
     Let this website serve as Man's contempt for the natural order. */
    position: absolute; 
    bottom: -1200px; 
    right: 1100px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
  }

  .text-block3 { 
   position: absolute; 
   bottom: -2350px; 
   right: 50px;
   color: white;
   padding-left: 20px;
   text-align: right;
   padding-right: 20px;
 }

 .text-block4 { 
  position: absolute; 
  bottom: -3500px; 
  right: 1100px;
  color: white;
  padding-left: 20px;
  text-align: left;
  padding-right: 20px;
}

.text-block5 { 
  position: absolute; 
  bottom: -3600px; 
  right: 1400px;
  color: rgb(87, 87, 87);
  padding-left: 20px;
  text-align: left;
  padding-right: 20px;
}

.text-block6 { 
  position: absolute; 
  bottom: -4400px; 
  right: 600px;
  color: rgb(87, 87, 87);
  padding-left: 20px;
  text-align: center;
  padding-right: 20px;
}

  .image1 {
    position: relative;

    width: 100%;
    height: 100%;

    background-position: center;
    background-size: auto;
    margin: auto; 
    display: block;
}
  
  
  .image2 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;
    margin: auto; 
}

.container {
    width: 80%;
    margin: 0 auto;
    background-image: url(assets/BG1.png);
}

.padding {
    padding: 5px
}

header {
    background-image: url(assets/BG1.png);
    box-shadow: 0px 3px 10px 5px rgba(0,0,0,1);
    z-index: 2;
}
.rectangle {
    height: 5px;
    width: 3000px;
    box-shadow: 0px 1px 50px 1px rgba(0,0,0,1);
    background-color: #290000;
    z-index: 1;
  }
header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    float: left;
    padding: 10px 0;
}


nav {
    float: right;
    padding: 0px 60px 0px;

    position: relative; /* Thanks GPT */
    z-index: 10; 
}


nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
}


nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 10px;
    position: relative;
}


nav a{
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 25px;
opacity: 0.5;
transition: all ease-in-out 250ms; 

}

nav a:hover {
    color: #ffffff;
    font-weight: 800;
    opacity: 1;
}



.playbutton {
    transition: width 0.5s, height 0.5s, font 0.5s, background-image 2s;
    display: inline-block;
    border-radius: 5px;
    height: 45px;
    width: 150px;
    font-size: 25px;
    position: absolute;
    bottom: -4700px; 
    right: 850px;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    color: #ffffff;
    text-decoration: none;
    background-image: linear-gradient(
        to top,
        #7289da,
        #4a63b9
      );
    box-shadow: 2px 2px 2px 0px rgba(1, 0, 89, 0.29), inset 1px 1px 1px rgba(195, 184, 255, 0.44);

}
.playbutton:hover {
    transition: width 0.5s, height 0.5s, font 0.5s, background-image 2s;
    display: inline-block;
    border-radius: 5px;
    height: 45px;
    width: 150px;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    color: #ffffff;
    text-decoration: none;
    background-image: linear-gradient(
        to top,
        #98afff,
        #5972cc
      );
}
.playbutton::before {
    transition: width 0.5s, height 0.5s, font 0.5s, background-image 2s;
    display: inline-block;
    border-radius: 5px;
    height: 65px;
    width: 110px;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
    text-align: center;
    font-size: 40px;
    font-family: 'Spectral'; 
    color: #213023;
    text-decoration: none;
    z-index: -1;
    background-image: linear-gradient(
        to top,
        #98afff,
        #5972cc
      );
}
.playbutton:hover::before {
    opacity: 1
}