* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#map {
    height: 80vh;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 3%;
    margin-top: 3%;
}
.star {
    font-size: 30px;
    color: #ccc; /* Color predeterminado */
    cursor: pointer;
}



.star.hover {
    color: gold; /* Color cuando pasa el ratón */
}

.star.selected {
    color: gold; /* Color cuando está seleccionada */
}

#dinamico {
    opacity: 0; 
    color: green; 
    
    background-color: white; 
    padding: 20px;
    text-align: center;
    width: fit-content; 
    margin: 20px auto; 
    font-size: 2rem; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    animation: fadeIn 2s ease-in-out forwards;
}

/* Definición de la animación fade-in */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8); /* Pequeño al inicio */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Tamaño original */
    }
}



form{
    margin-bottom: 0;
    padding: 0;
}



.footer{
    background-color: black;
}

.seguinos{
    color: white;
}
.consultas{
    color: white;
    margin-left: 32%;
}
.ig{
    color: white;
    padding: 2%;
    margin-top: -1.5%;
}
.redes{
    display: flex;
    align-items: center;
    margin-left: 40%;
    margin-top: 5%;
    padding: 2%;
}
.paginas {
    display: flex;               
    align-items: center;         
    justify-content: center;     
    gap: 20px;                   
    margin-left: -8%;  
    padding:3%;          
}

.paginas a {
    text-decoration: none;       
    color: white;                
    font-size: 16px;            
    display: flex;               
    align-items: center;         
    gap: 5px;                    
}
body{
    margin: 0;
    padding: 0;
    background-image: url(img/pexels-markusspiske-2004166.jpg);
    background-size: cover;
    background-attachment: fixed; /* Para mantener el fondo fijo */
    
}

.navbar-toggler-icon{
    color: green;
    background-color: green;
}

footer{
    background-color: black;
    margin-top: 2%;
}

h2{
    color: aliceblue;
    font-size: x-large;
    align-items: center;
    margin-left: 5%;
    padding: 5%;
}

#busqueda{
    margin-left: 30%;
    display: flex;

}

.titulo{
    color: bisque;
    margin-left: 45%;
    margin-top: 2%;
    text-shadow: 
    1px 1px 0px black,   /* Sombra a la derecha-abajo */
    -1px 1px 0px black,  /* Sombra a la izquierda-abajo */
    1px -1px 0px black,  /* Sombra a la derecha-arriba */
    -1px -1px 0px black; /* Sombra a la izquierda-arriba */
}
.formulario {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140vh;
    margin-top: 0;
    margin: 0;
    
    overflow: auto;
    height: 130vh;
}


.formulario2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 170vh;
    margin: 0;
    margin-bottom: 5%;
}


.formulario5 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180vh;
    margin: 0;
    margin-bottom: 5%;

    overflow: auto;
    height: 80vh;
}
.formulario6 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180vh;
    
   overflow: auto;
   height: 100vh;
   
}

a[href="usersUpdate.html"] {
    text-decoration:none; /* Elimina el subrayado del enlace */
  }

.formulario3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140vh;
    margin: 0;
    margin-bottom: 0;
    
   overflow: auto;
   height: 80vh;
    
}
.titulo4{
    margin-left: 35%;
    color: bisque;
    text-shadow: 
    1px 1px 0px black,   /* Sombra a la derecha-abajo */
    -1px 1px 0px black,  /* Sombra a la izquierda-abajo */
    1px -1px 0px black,  /* Sombra a la derecha-arriba */
    -1px -1px 0px black; /* Sombra a la izquierda-arriba */
}

.login {
    margin-top: 0%;
    background-color: #fff; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    width: 300px; 
    text-align: center; 
    margin-bottom: 0;
}
.login3 {
    margin-top: 0;
    background-color: #fff; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    width: 300px; 
    text-align: center; 
    margin-bottom: 0;
}

.inputEdit{
    border-radius: 5px;
    margin-left: 40%;
    margin-top: 7%;
}

.mensaje{
    color: rgb(249, 255, 249);
    margin-left: 32%;
    margin-top: 1%;
    font-size: large;
    text-shadow: 
    1px 1px 0px black,   /* Sombra a la derecha-abajo */
    -1px 1px 0px black,  /* Sombra a la izquierda-abajo */
    1px -1px 0px black,  /* Sombra a la derecha-arriba */
    -1px -1px 0px black; /* Sombra a la izquierda-arriba */
}
.login2 {
    background-color: #fff; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    width: 300px; 
    text-align: center; 
    margin-bottom: 0;
}

.btn-success{
    background-color: green;
    color:black
}
.input {
    width: 100%; /* Los inputs ocupan todo el ancho disponible */
    padding: 10px; /* Espacio interno de los inputs */
    margin-top: 10px; /* Espacio entre los inputs */
    border: 1px solid #ccc; /* Borde de los inputs */
    border-radius: 5px; /* Bordes redondeados de los inputs */
    box-sizing: border-box; /* Para que el padding no afecte al ancho */
}

input::placeholder {
    color: #999; /* Color del texto del placeholder */
}

label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

.titulo2{
    margin-left: 41%;
    color:bisque;
    text-shadow: 
    1px 1px 0px black,   /* Sombra a la derecha-abajo */
    -1px 1px 0px black,  /* Sombra a la izquierda-abajo */
    1px -1px 0px black,  /* Sombra a la derecha-arriba */
    -1px -1px 0px black; /* Sombra a la izquierda-arriba */
    
}

.button{
    background-color: green;
    color: black;
    border-color: green;
    border-radius: 3px;
}

.navbar-brand {
    padding: 0; /* Elimina cualquier padding del contenedor de la imagen */
}

.logo {
    
    width: auto; 
    height: 80px; 
    margin: 0; 
}

.registrate{
    color: black;
}
#nombreUsuario {
    color: green; /* Cambia 'blue' al color que prefieras */
    margin-left: 10px; /* Ajusta este valor según sea necesario */
    font-weight: bold; /* Opcional: ajusta el peso de la fuente */
  }
  
 @media (min-width: 768px) and (max-width: 1024px) {
    .formulario3 {
    
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: auto
        
    }
    .formulario {
        position: sticky;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120vh;
        overflow: auto
    }
    .titulo2{
        margin-left: 30%;
    }

    .formulario5 {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: auto
    }
    .formulario6 {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120vh;
        overflow: auto
    }
    .inputEdit{
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 7%;
    }
    .mensaje{
        color: rgb(249, 255, 249);
        margin-left: 15%;
        margin-top: 1%;
        font-size: large;
        text-shadow: 
        1px 1px 0px black,   /* Sombra a la derecha-abajo */
        -1px 1px 0px black,  /* Sombra a la izquierda-abajo */
        1px -1px 0px black,  /* Sombra a la derecha-arriba */
        -1px -1px 0px black; /* Sombra a la izquierda-arriba */
    }
  }

   @media (max-width: 768px) {
    #dinamico {
        opacity: 0; 
        color: green; 
        
        background-color: white; 
        padding: 10px;
        text-align: center;
        width: fit-content; 
        margin: 20px auto; 
        font-size: 1rem; 
        border-radius: 10px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
        animation: fadeIn 2s ease-in-out forwards;
    }
    
    /* Definición de la animación fade-in */
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: scale(0.8); /* Pequeño al inicio */
        }
        100% {
            opacity: 1;
            transform: scale(1); /* Tamaño original */
        }
    }
    .formulario3 {
    
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
        overflow: auto
        
    }
    .formulario {
        position: sticky;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120vh;
        overflow: auto
    }
    .titulo2{
        margin-left: 30%;
    }

    .formulario5 {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: auto
    }
    .formulario6 {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120vh;
        overflow: auto
    }
    .inputEdit{
        border-radius: 5px;
        margin-left: 15%;
        margin-top: 7%;
    }
    .mensaje{
        color: rgb(249, 255, 249);
        margin-left: 15%;
        margin-top: 1%;
        font-size: large;
        text-shadow: 
        1px 1px 0px black,   /* Sombra a la derecha-abajo */
        -1px 1px 0px black,  /* Sombra a la izquierda-abajo */
        1px -1px 0px black,  /* Sombra a la derecha-arriba */
        -1px -1px 0px black; /* Sombra a la izquierda-arriba */
    }
    .consultas{
        color: white;
        margin-left: 22%;
    }
    .ig{
        color: white;
        padding: 2%;
        margin-top: -5%;
    }
    .redes{
        display: flex;
        align-items: center;
        margin-left: 40%;
        margin-top: 5%;
        padding: 2%;
    }
    .paginas {
        display: flex;               
        align-items: center;         
        justify-content: center;     
        gap: 20px;                   
        margin-left: -2%;  
        padding:3%;          
    }
    
    .paginas a {
        text-decoration: none;       
        color: white;                
        font-size: 16px;            
        display: flex;               
        align-items: center;         
        gap: 5px;                    
    }
  }