main.css

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;600;700;800&family=Raleway:wght@400;700&display=swap');
*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Heebo', sans-serif;
}
:root{
      --clr-gold: #DCC48E;
      --clr-beige: #EAEFD3;
      --clr-purple: #27233A;
}
body{
      background-color: var(--clr-purple);
      color: var(--clr-beige);
}
header{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background-color: var(--clr-beige);
      color: var(--clr-purple);
      border-bottom-left-radius: 3rem;
      border-bottom-right-radius: 3rem;
}
main{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
}
.instrucciones{
      margin-bottom: 2rem;
}
.marcador{
      background-color: var(--clr-gold);
      padding: 1rem 2rem;
      border-radius: 1rem;
      position: relative;
      display: flex;
      align-items: center;
      color: var(--clr-purple);
      font-weight: 600;
      margin-bottom: 2rem;
}
.marcador .nombre{
      position: absolute;
      color: var(--clr-beige);
      background-color: var(--clr-purple);
      line-height: 1;
      padding: .5rem;
      border-radius: .5rem;
      border: 2px solid var(--clr-beige);
}
.marcador .nombre-jugador{
      right: 85%;
}
.marcador .nombre-computadora{
      left: 85%;
}
.marcador .puntos{
      font-size: 1.6rem;
}
.elegi-tu-arma{
      margin-bottom: 2rem;
}
.elegi-tu-arma h2{
      font-size: 1.2rem;
      font-weight: 400;
      margin-bottom: .5rem;
}
.armas{
      display: flex;
      justify-content: center;
      gap: 1rem;
}
.arma{
      font-size: 2rem;
      background-color: var(--clr-beige);
      border: 0;
      padding: .5rem;
      border-radius: .5rem;
      cursor: pointer;
}
.mensaje{
      margin-bottom: 2rem;
      line-height: 1.8rem;
}
.mensaje .eleccion{
      color: var(--clr-purple);
      background-color: var(--clr-gold);
      border-radius: .25rem;
      padding-inline: .25rem;
}
.btn{
      border: 0;
      line-height: 1;
      background-color: var(--clr-beige);
      color: var(--clr-purple);
      font-size: 1rem;
      padding: .5rem;
      border-radius: .5rem;
      cursor: pointer;
      text-transform: uppercase;
      font-weight: 600;
}
.disabled{
      display: none;
}