* {
  margin: 0;
  padding: 0;
}

body {background-color:rgb(18, 0, 0)

}
body 
{padding: 100%;
  width: 80%;
overflow: scroll;}

*{font-family: 'Press Start 2P', cursive; color: azure; font-size:medium;}


.paragraph1 {
  background-color: darkred; padding: 10%;
border-radius: 12px;
margin-left: 40px;
margin-top: 200px;}

.paragraph2 {background-color: darkred; padding: 10%;
  border-radius: 12px;
  margin-top: 70px; }


.streetfighter1:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

  .paragraph3 {
    margin-top: 200px;
    background-color: darkred; padding: 10%;
  border-radius: 12px;
  }

  .paragraph4 {
    float:right;
    background-color: darkred; padding: 7%;
    border-radius: 12px;
    margin-top: 120px;
  }

  .paragraph5 {
    margin-top: 200px;
    background-color: darkred; padding: 10%;
  border-radius: 12px;
  }
  
  .paragraph6 {
    margin-top: 200px;
    background-color: darkred; padding: 10%;
  border-radius: 12px;
  }

  .streetfighter2 {
    display: block;
    float: right;
    width: 720px;
    margin-top: 40px;
  }
.streetfighter2:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

  .streetconcept {
    width: 60%;
    float: right;
    margin-top: 170px;
    margin-right: 100px;
  }

  .ryu {
    margin-top: 150px;
    width: 110%;
    margin-left: 70px;
  }



header { background-image: url(/Final/images/coverfighter.png);
    width: 100%;
    height: 100vh;
    background-size: cover;
    margin-top: -200px;
}

.downarrow1 {
  margin-top: -130px;
  width: 50%;
  display: block;
  float:left;
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.downarrow2 {
  margin-top: -130px;
  width: 50%;
  display: block;
  float: right;
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.pressstart {
  margin-top: -130px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

  .playerselect {
    width: 1600px;
  margin-left: -700px;
  }
 
  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
}
  
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}



.container {
    max-width: none;
    background-color:#421313; }



/* For devices smaller than 400px */
@media (min-width: 150px) {
    .container {
      width: 95%;
      padding: 0; }
  }
  @media only screen and (max-width:320px) {body {font-size: 7vw;}}
  
  /* For devices larger than 550px */
  @media (min-width: 550px) {
    .container {
      width: 90%; }

    }