/* Estilos generales */
body {
    display: flex;
    flex-direction: column; /* Cambiado para apilar elementos en móviles */
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: "Roboto", sans-serif;
    background-image: url('../web_images/2-removebg-preview.png');
    background-size: cover;/* Para que la imagen cubra toda la pantalla */
    background-position: center;/* Centrar la imagen de fondo */
    background-repeat: no-repeat;/* Evitar que la imagen se repita */
    color: #fff;
    margin: 0;
}

body::before {
    content: "";
    position: fixed; /* Fijo para cubrir toda la pantalla */
    top: 0;
    left: 0;
    width: 100vw; /* Ancho total de la ventana */
    height: 100vh; /* Altura total de la ventana */
    background-color: rgba(54, 54, 144, 0.8); /* Color con opacidad */
    z-index: -1; /* Detrás del contenido visible */
}

.weather-widget {
    z-index: 3;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
}

.container {
    position: relative; /* Asegura que esté encima del fondo */
    z-index: 2; /* Encima del pseudo-elemento del fondo */
    background: rgba(96, 89, 168, 0); /* Fondo semitransparente */
    margin: 2% auto; /* Reduce el margen superior */
    padding: 5%;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    transform: translateY(-5%); /* Mueve el contenedor más arriba */
}


h1 {
    font-size: 28px;
    color: #FFD700;
    margin-top: -50px; /* Reduce el margen superior del título */
}

button {
    z-index: 2;
    padding: 10px 20px;
    background-color: #FFD700;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}


/* Estilo del footer */
footer {
    z-index: 2;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro translúcido */
    padding: 5px 0;
}
footer p {
    font-size: 0.9rem;
    margin: 0;
}
/* Fecha */
.date-container {
    position: absolute; /* Posición absoluta para colocarlo en la parte superior */
    top: 15px; /* Separación desde la parte superior */
    left: 10%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Asegurar el centrado */
    font-size: 1.2em;
    color: white;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    z-index: 3; /* Por encima del pseudo-elemento del fondo */
    text-align: center;
}
.date-container + .home-button {
    position: absolute;
    top: 50px; /* Ajusta esta distancia para que el botón quede debajo */
    left: 10%;
    transform: translateX(-50%);
    margin-top: 5%; /* Espaciado adicional */
    padding: 10px 20px;
    background-color: #FFD700;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    z-index: 3;
}

.date-container + .home-button:hover {
    background-color: #FFB300;
}
.title {
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente negro */
    background-blend-mode: overlay; /* Mezcla el color con la imagen */
    background-image: url('../web_images/trigonometria.svg');; /* Ruta de la imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen */
    color: white; /* Color del texto */
    padding: 80px 20px; /* Espaciado alrededor del texto */
    border-radius: 10px; /* Bordes redondeados (opcional) */
    display: inline-block; /* Asegura que solo ocupe el espacio del texto */
    font-size: 2em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    
    
}

.svg-background {
    background: url('../web_images/trigonometria.svg') no-repeat center center;
    -webkit-mask: url('../web_images/trigonometria.svg') no-repeat center center;
    mask: url('../web_images/trigonometria.svg') no-repeat center center;
    background-size: cover;
    color: white; /* Asegura que el texto sea visible */
}