/** STEPS **/
.primerPuesto::first-letter{
    color : rgb(255, 251, 0);
    font-weight: bolder !important;
}

.segundoPuesto::first-letter{
    color : #dedede;
    font-weight: bolder;
}

.tercerPuesto::first-letter{
    color : #CD7F32;
    font-weight: bold;
}



body{
    background-color: rgb(0, 0, 0);
}

h2, .cabecera{
    color: var(--colorTexto);
    text-align: center;
}

hr{
    margin-left: 75px;
    margin-right: 75px;
}

li{
    margin-left: 40px;
}

.cabecera, .cuerpo{
    margin-top: 25px;
}


/**    BUTTONSTARTGAME    **/
#buttonStartGame {
    padding: 0.6em 2em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    font-weight: bold;
}

#buttonStartGame:before {
    content: "";
    background: linear-gradient(
        45deg,
        #ff0000,
        #ff7300,
        #fffb00,
        #48ff00,
        #00ffd5,
        #002bff,
        #7a00ff,
        #ff00c8,
        #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

@keyframes glowing-button-85 {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

#buttonStartGame:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
}

/**   LISTA RECORDS   **/

ul{
    list-style: none;
}

li{

    font-size: 20px;
    color: var(--colorTexto);

}

/**    RADIO-INPUTS    **/
.radio-inputs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.5rem;
    background-color: #000000;
    box-sizing: border-box;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
    padding: 0.25rem;
    width: 300px;
    font-size: 14px;
}

.radio-inputs .radio {
    flex: 1 1 auto;
    text-align: center;
}

.radio-inputs .radio input {
    display: none;
}

.radio-inputs .radio .name {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    padding: .5rem 0;
    color: var(--colorTexto);
}

#spanInputEassy:hover, input:checked + #spanInputEassy{
    background-color: #558e3e;
    font-weight: 600;
}

#spanInputMedium:hover, input:checked + #spanInputMedium{
    background-color: #969300;
    font-weight: 600;
}

#spanInputYashin:hover, input:checked + #spanInputYashin{
    background-color: #ff0000;
    font-weight: 600;
}

.records, .opciones, .footer{
    background-color: var(--colorFondo);
    height: 600px;
    border-radius: 30px;
}

.footer{
    margin-top: 50px;
    margin-bottom: 50px;
    height: 150px;
}

.dif{
    float: right;
}

.formNewGame{
    float: left;
}

#miCanvas{
    border: 2px;
    border-radius: 30px;
}

#nickName, #dificulty{
    color: var(--colorTexto);
    font-weight: bolder;
}

#nickName{
    margin-right: 10px;
}

.inputNickName{
    appearance: none;
	border: none;
	outline: none;
	border-bottom: .2em solid var(--colorTexto);
	background: transparent;
	padding: .4em;
}

h1{
    background-color: transparent;
    border: none;
    padding: 0;
    color: rgb(199, 199, 199);
}

.hoverH1{
    text-shadow: 2px 2px 2px white;
    cursor: pointer;
}


h4{
    color: rgb(199, 199, 199);
}

.ver{
    display: block;
}

.no-ver{
    display: none;
}



.card {
    position: relative;
    width: 380px;
    color: white;
    height: 598px;
    background: transparent;
    border-radius: 30px;
  }
  
  .bg {
    position: absolute;
    z-index: -1;
    inset: -4px;
    border-radius: 16px;
    overflow: hidden;
  }
  
  .uwu {
    filter: blur(8px);
    transition: filter 0.3s;
  }
  
  .bg::before {
    content: '';
    position: absolute;
    aspect-ratio: 1/1;
    top: 50%;
    left: 50%;
    min-width: 150%;
    min-height: 150%;
    background-image: conic-gradient(
      hsl(0, 100%, 50%),
      hsl(30, 100%, 50%),
      hsl(60, 100%, 50%),
      hsl(90, 100%, 50%),
      hsl(120, 100%, 50%),
      hsl(150, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(210, 100%, 50%),
      hsl(240, 100%, 60%),
      hsl(270, 100%, 50%),
      hsl(300, 100%, 50%),
      hsl(330, 100%, 50%),
      hsl(360, 100%, 50%)
    );
    animation: speeen 4s linear infinite;
    transform-origin: 0% 0%;
    transform: rotate(0deg) translate(-50%, -50%);
  }
  
  @keyframes speeen {
    from {
      transform: rotate(0deg) translate(-50%, -50%);
    }
  
    to {
      transform: rotate(360deg) translate(-50%, -50%);
    }
  }