body {
    /* aca se agrego margenes a todos los lados de contenedor body
    para que el texto no este pegado a los lados de este contenedor   */
    margin: 10px;
}






/* container es la caje que contien todos los botones 
la imagen del juago y la imagen de la nave del juego  */
.container {
    width: 800px;
    /* para que se ecentre la pantalla del juego  */
    margin: 0 auto;
}

/* la barra es el mensaje de enemigos destruidos  */
.barra {
    background-color: #000;
    color: #fff;
    font-size: 20px;
    height: 40px;
    width: 700px;
    padding: 10px;
    margin: 9px 0;
    /* border box inpide que un padin cambie las dimensiones de
    de ancho y largo de un contenedor   */
    box-sizing: border-box;
}
/* estilos de la imagen de fondo */
#my_canvas {
    background: #000;
    border: #000 1px solid;
}
/* estilos de los botones  */
.boton {
    color: red;
    font-size: 40px;
    background-color: #000;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid blue;
}

/* estilos de los botones al precionarlos */
.boton:hover {
    background-color: #fff;
    color: #000;
}

/* .contenedor-botones{

    margin:0 auto;
} */

.boton{

    color: white;
    text-transform: uppercase;
    font-size: 22px;
    margin-top: 32px;
    width: 150px;
    margin-left: 5px;
    margin-right: 5px;
    height: 50px;
    border-radius: 10px;
    border: none;
    background-color: #FC990D;
    transition: all 0.5s;
    text-decoration: none;
    text-align: center;
    
  }
  .recarga{
    text-align: center;
    display: inline-block;
    color: white;
    text-transform: uppercase;
    font-size: 22px;
    margin-top: 20px;
    width: 280px;
    height: 50px;
    border-radius: 10px;
    border: none;
    background-color: #FC990D;
    transition: all 0.5s;
  }
  
  
  .boton:hover{
    background-color: #a81995;
    width: 160px;
  }

  .cajabotones2{

    text-align: center;
  }

  .titulo{
    color:#FC990D;
    font-weight:bold;
    height:80px;
    width:40%;
    margin:0 auto;
  }

  .container{

    /* position: relative; */
  border : solid 5px rgb(255, 255, 255);
  
  /* background-repeat: no-repeat; */
  background-size:cover;

  animation-name: AnimacionBordeMulticolor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 700px;
}

@keyframes AnimacionBordeMulticolor{
  20%{
    border : solid 5px rgb(255, 0, 0);
  }
  40%{
    border : solid 5px rgb(255, 217, 0);
  }
  60%{
    border : solid 5px rgb(115, 255, 0);
  }
  80%{
    border : solid 5px rgb(0, 89, 255);
  }
  90%{
    border : solid 5px rgb(255, 0, 212);
  }
}
  
/* #{


} */

video{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
    z-index: -10;
}