:root{
    
    --green1: #143601;
    --green2: #1A4301;
    --green3: #245501;
    --green4: #538D22;
    --green5: #73A942;
    --green6: #AAD576;
    --green7: #D4F0A4;
    --green8: #eaf8d3;
    
    --ganaste: hsl(130, 84%, 54%);
    --perdiste: hsl(0, 84%, 60%);
    --nav: var(--green6);

    /* --gradient-to-color: var(--green7);
    --gradient-from-color: var(--green8); */
}

.light {
    --letra_h1: var(--green1);
    --letra: var(--green1);
    --botones: var(--green4);
    --fondo: var(--green8);
    --alert_resto: hsl(0, 0%, 0%, 0.3);
    --header: var(--green6);
    --footer: var(--green7);
    --nav: var(--green7);
}

.dark {
    --letra_h1: var(--green7);
    --letra: var(--green8);
    --botones: var(--green4);
    --fondo: var(--green1);
    --alert_resto: hsla(0, 0%, 20%, 0.3);
    --header: var(--green2);
    --footer: var(--green3);
    --nav: var(--green5);
}


/* background-image: linear-gradient(180deg, var(--gradient-color-stops)); */

/* --gradient-color-stops: 
    var(--gradient-from-color),
    var(--gradient-to-color, hsla(0,0%,100%,0)); */


/* html{
    background-color: var(--fondo); 
     --gradient-color-stops: 
        var(--gradient-from-color),
        var(--gradient-to-color);
    background-image: linear-gradient(180deg, var(--gradient-color-stops)); 
    background-color: var(--fondo); 
    
} */

body{
    font-family: 'montserrat', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    color: var(--letra) !important;
    background-color: var(--fondo) !important;
    transition: background 500ms ease-in-out, color 1000ms ease-in-out;

    /* --gradient-color-stops: 
    var(--gradient-from-color),
    var(--gradient-to-color);
    background-image: linear-gradient(180deg, var(--gradient-color-stops)); */
}


main {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: auto; /* Asegura que el contenedor main ocupe todo el ancho disponible */
    min-height: auto; /* Opcional: para que el main ocupe al menos toda la altura de la ventana del navegador */
}

header {
    background-color: var(--header);
    color: var(--letra) !important;
    transition: background 500ms ease-in-out, color 1000ms ease-in-out;
}

.nav-link, .navbar-brand{
    color: var(--letra) !important;
}

.navbar-toggler{
    background-color: var(--nav) !important;
    /* color: var(--letra) !important; */
}

footer {
    background-color: var(--footer);
    margin-top: auto;
    text-align: center;
    color: var(--letra) !important;
    transition: background 500ms ease-in-out, color 1000ms ease-in-out;
}

@media (min-width: 760px){
    main{
        margin-top: 5dvh;
        justify-content: center;
    }
}

.title{
    font-size: 3.5rem;
    color: var(--letra_h1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px 20px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.repo a{
    font-size: 1.5rem;
    color: var(--letra);
    text-decoration: none;
}

.repo a:hover{
    color: var(--green4);
}

.choices{
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 10px;
}

.choices button img{
    width: auto;
}

.choices button{
    width: auto;
    padding: 20px;
    /* margin: 5px 10px; */
    border: 5px solid var(--botones);
    border-radius: 50px;
    background-color: var(--botones);
    cursor: pointer;
    transition: background-color 0.35s ease;
}

@keyframes border-color-rotate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

.choices button:hover{
    animation: none;
}

.no-touch .choices button:hover{
    animation: border-color-rotate 1s infinite alternate;
}

#playerDisplay, #computerDisplay{
    font-size: 2.5rem;
}

#resultDisplay{
    font-size: 4rem;
    margin: 30px 0;
}

.scoreDisplay{
    font-size: 2rem;
}

.greenText, #playerScoreDisplay{
    color: var(--ganaste);
}

.redText, #computerScoreDisplay{
    color: var(--perdiste);
}


/* alert personalizado */

.alerta-uno {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--alert_resto); /* Black w/ opacity */
    color: var(--letra);
    place-content: center;
    /* min-width: 500px; */
    /* border: 10px solid red; */
  }
  
  .alerta-contenido {
    background-color: var(--fondo);
    /* margin: 35% auto; 15% from the top and centered */
    /* position: absolute; */
    /* bottom: 43.5%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #888;
    /* border-color: rgb(119, 0, 255); */
    /* background-color: green; */
    width: min(80vw, 400px); /*Could be more or less, depending on screen size
    /* text-align: center; */
    /* display: flex;
    flex-direction: column;
    gap: 0px; */
  }

  /* @media (min-width: 760px){
    .alerta-contenido{
        margin: 15% auto;
        width: 40%;
        }
    }
  
    @media (min-width: 1200px){
        .alerta-contenido{
            width: 30%;
        }
    }

    @media (min-width: 1516px){
        .alerta-contenido{
            width: 20%;
        }
    } */

  p{
    font-size: 1.1rem;
  }

  .close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: var(--letra);
    text-decoration: none;
    cursor: pointer;
  }


/* Boton cambio de tema */

.cambio-tema{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;

}

#claro{
    background-color: var(--green8);
    color: var(--fondo);
    border: none;
    border-radius: 20px;
    padding: 10px;
    transition: background 1000ms ease-in-out, color 500ms ease-in-out;
}

#oscuro{
    background-color: var(--green1);
    color: var(--fondo);
    border: none;
    border-radius: 20px;
    padding: 10px;
    transition: background 1000ms ease-in-out, color 500ms ease-in-out;
}