@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');

body {
    background-color: deeppink;
    background-attachment: fixed;
    background-repeat: repeat;
    background-blend-mode: color-dodge;
    font-family: 'VT323', monospace;
    font-size: 50px;
}

h1 {
    font-family: 'Racing Sans One', cursive;
    font-size: 100px;
    color: floralwhite;
}

audio { 
    width: 100px; 
    box-shadow: 5px 5px 20px rgb(16, 18, 133);
    border-radius: 90px;
  }


.container {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

.item {
    margin: 15px;
}

.lowercontainer{
    display: flex;
    padding: 10px;
    /*margin: 10px;*/
    justify-content: center;
}


.button { /* https://www.w3schools.com/css/css3_buttons.asp */
    display: inline-block;
    padding: 15px 25px;
    font-size: 24px;
    cursor: pointer;
    font-family: 'VT323', monospace;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: floralwhite;
    background-color: #14e01b;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px rgb(49, 128, 3);
  }
  
  .button:hover {background-color: #f3f70a}
  
  .button:active {
    background-color: #ba09f0;
    box-shadow: 0 5px rgb(112, 4, 103);
    transform: translateY(4px);
  }

  .button2 { /* https://www.w3schools.com/css/css3_buttons.asp */
    display: inline-block;
    padding: 15px 25px;
    font-size: 24px;
    cursor: pointer;
    font-family: 'VT323', monospace;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: floralwhite;
    background-color: #08cef1;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px rgb(5, 107, 148);
  }

  .button2:hover {background-color: #f3f70a}
  
  .button2:active {
    background-color: #ba09f0;
    box-shadow: 0 5px rgb(112, 4, 103);
    transform: translateY(4px);
  }
/*flames for fighter page*/
  .fiximage{
    position:fixed;
    bottom:0px;
    left:50%;
  }
  .fiximage2{
    position:fixed;
    bottom:0px;
    right:50%;
  }

  #car{
    bottom:0%;
    position:absolute;
    animation-direction: normal;
    animation-name: move;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}     
@keyframes move {
    0% { left: 0;}
    50%{ left : 100%;}
    100%{ left: 0;}
}
  
#car2{
    bottom:20%;
    position:absolute;
    animation-direction: reverse;
    animation-name: move;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}     
@keyframes move {
    0% { right: 0;}
    50%{ right: 100%;}
    100%{ right: 0;}
}

#car3{
    top:35%;
    position:absolute;
    animation-direction: normal;
    animation-name: move;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}     
@keyframes move {
    0% { left: 0;}
    50%{ left : 100%;}
    100%{ left: 0;}
}

#car4{
    top:0%;
    position:absolute;
    animation-direction: normal;
    animation-name: move;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}     
@keyframes move {
    0% { left: 0;}
    50%{ left : 100%;}
    100%{ left: 0;}
}
#car5{
    top:10%;
    position:absolute;
    animation-direction: reverse;
    animation-name: move;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}     
@keyframes move {
    0% { right: 0;}
    50%{ right: 100%;}
    100%{ right: 0;}
}
#car6{
    bottom:-15%;
    position:absolute;
    animation-direction: reverse;
    animation-name: move;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}     
@keyframes move {
    0% { right: 0;}
    50%{ right: 100%;}
    100%{ right: 0;}
}