@import url('https://fonts.googleapis.com/css2?family=Sarpanch:wght@800&display=swap');

body {
    font-family: "Sarpanch", sans-serif;
    font-weight: 800;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-image:url(img/joystick2\(1\).png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  
  /* Container */
  .container {
    text-align: center;
    margin-top: 20px;
    text-size-adjust: 100;
  }
  
  /* Buttons */
  .botones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align:center;
  }

  
  #boton_individuales {
    position: relative;
    margin-left: 2px;
    left: -194px;
    bottom: -60px;
  }

  #boton_volver {
    position: relative;
    margin-left: 2px;
    left: 140px;
    top: 272px;
  }
  
  #boton_rankings {
    background-image: url(img/triangulo.png);
    background-position: center;
    background-size: cover;
    position: relative;
    margin-left: 2px;
    left: 298px;
    bottom:302px;
    text-align: center;
    align-content: center;
  }

  #boton_frases {
    background-image: url(img/cruz.png);
    background-position: center;
    background-size: cover;
    position: relative;
    margin-left: 2px;
    left: 298px;
    top:70px;
    text-align: center;
    align-content: center;
  }

  #boton_musica {
    width: 87px;
    height: 65px;
    background-image: url(img/circulo.png);
    background-position: center;
    background-size: cover;
    position: relative;
    margin-left: 2px;
    left: 390px;
    bottom:330px;
    text-align: center;
    align-content: center;
  }

  #boton_video {
    width: 87px;
    height: 65px;
    size: 50px;
    background-image: url(img/cuadrado.png);
    background-position: center;
    background-size: cover;
    position: relative;
    margin-left: 2px;
    left: 205px;
    top: 200px;
    text-align: center;
    align-content: center;
  }

  .boton{
    width:65px;
    height:65px;
    margin: 5px;
    padding:10px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size:11px;
    line-height:32px;
    text-transform: uppercase;
    float:left;
  }

  .boton:hover{
    scale: 1.2;
  }
  
  .boton a {
    text-decoration: none;
    color: white;
    font-weight: bold;
  }