@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@100..900&display=swap');


html body{
    margin: 0;
    padding: 0;    
}

.container {
    width: 100%;
    height: 100vh;
    background-color: rgb(25, 25, 25);
    position: relative;
}

.logo_container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

.logo_center {
    margin: 0 auto;
    background-color: rgb(101, 46, 93);
    width: 23vh;
    border-radius: 20px;
    height: auto;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 
                0px 7px 13px -3px rgba(0, 0, 0, 0.3), 
                inset 0px -3px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.logo {
    font-family: monoton;
    color: aliceblue;
    font-size: 16vh;
    animation: fadeIn 1.5s ease-in-out;

}

.sublogo{
    text-align: center;
    margin-top: 15px;
    width: auto;
}

.sublogo_text{
    font-family: "Lexend Giga", serif;
    color: aliceblue;
    opacity: 30%;

}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Efecto de resplandor animado */
.logo_center::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(0,0,0,0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

/* Activación del resplandor al pasar el mouse */
.logo_center:hover::before {
    transform: scale(1);
}

/* Efecto de borde brillante */