/* @import url('https://fonts.googleapis.com/css2?family=Kay+Pho+Du:wght@400;500;600;700&family=Montserrat:ital,wght@0,400;0,500;1,400;1,600&display=swap'); */

/* @font-face {
    font-family: 'Montserrat';
    src: url('./font/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    font-weight: 700;
    font-weight: 900;
    font-style: italic;
} */

@font-face {
    font-family: 'Montserrat';
    src: url('./font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    /* font-weight: 700;
    font-weight: 900; */
    font-style: normal;
}
/* CONEXIÓN A INTERNET */
#estatus-wifi {
    position: fixed;
    color: white;
    border: solid 2px black;
    font-size: 1.8rem;
    padding: 20px;
    margin: 20px;
    display: none;
    animation: deslizar 1s ease-in-out, brillar 4s forwards 0.5s;
    border-radius: 20px;
    border:solid 3px transparent;
    box-shadow: 0 0 30px transparent;
    z-index: 100;
    bottom: 0;
}
/* Hecho por Gabriel De Anda Romero */
.conectado {
    background-color: green;
}

.desconectado {
    background-color: red;
}

/* Mensaje de velocidad */

#velocidad-wifi {
    position: fixed;
    bottom: 0;
    font-size: 1.6rem;
    padding: 15px;
    margin: 5px;
    display: none;
    animation: fade 3s ease;
    background-color: rgba(0, 0, 0, 0.668);
    color: white;
    animation: deslizar 1s ease-in-out, brillar 4s forwards 0.5s;
    border:solid 3px transparent;
    box-shadow: 0 0 30px transparent;
}

/* KeyFrames */
@keyframes deslizar {
    from {
        transform:translateX(-100%);
    }
    to {
        transform:translateX(0);
    }
}
/* Hecho por Gabriel De Anda Romero */
@keyframes brillar {
    0% {
        border-color: transparent; /* El contorno es transparente al principio */
        box-shadow: transparent;
    }
    20% {
        border-color: white;
        box-shadow: 0 0 30px white;
        /* border: solid 10px 0 10px 10px  white; Cambia el contorno a amarillo */
    }
    100% {
        border-color: white;
        box-shadow: 0 0 30px white;
    }
}

@keyframes entrar {
    0% { 
        opacity: 0%;
        filter: blur(20px);
    }
    20% {
        opacity: 1;
        filter: brightness(2) blur(10px);
    }
}