/* RESET INICIAL ---------------------------------------------- */
*{
    margin: 0;
    padding: 0;
}

/* FUENTE POR DEFECTO ----------------------------------------- */
html
{
    font-family: Arial, Helvetica, sans-serif;
    color: #f0f0f0;
}

/* ESTILOS BÁSICOS -------------------------------------------- */
h1
{
    color: white;
    margin-top: 20px;
}

h2
{
    color: #c2c2c5;
    font-size: 1.2rem;
    margin-top: 15px;
}

body
{
    min-height: 100vh;
    background: #0f0f1f;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ESTILOS DEL CARD ---------------------------------------------------------- */

/* Tamaño, posición y estructura de la tarjeta */
.card
{
    /* Posicionamiento central respecto a su contenedor */
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    /* Modelo border-box para evitar desbordes */
    box-sizing: border-box;

    /* Tamaño respecto a su contenedor */
    width: 68%;

    /* Relleno entre su contenido y su borde */
    padding: 2rem;

    /* Redondeado de bordes */
    border-radius: 15px;

    /* Elementos inline alineados al centro */
    text-align: center;
}

/* Fondo de la tarjeta - Va aparte, porque si no, el degradado se sobrepone al fondo por defecto */
.fondo-card
{   
    /* Posicionamiento y tamaño alineados con la tarjeta correctamente */
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    width: 100%;
    height: 100%;

    /* Diseño alineado a la tarjeta */
    border-radius: 15px;
    background-color: #232335;

    /* Esto hace que vaya por debajo de los elementos como el texto o imágenes */
    z-index: -1;
}

/* Creamos la propiedad angle para animar - ángulo donde comienza el gradiente */
@property --angle 
{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Borde - Efecto animado con glow */
.card::after, .card::before
{
    
    content: '';
    /* ................ Posicionamiento y tamaño ajustados para ir justo debajo de .card .................... */

    /* Se encuentra donde .card - En el centro */
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    /* Su tamaño es exactamente el de card */
    height: 100%;
    width: 100%;

    /* Se encontrará por debajo del fondo */
    z-index: -2;

    /* ................ Diseño del borde y animación ......................................................... */

    /* Colores del borde alineados para su respectiva visualización */
    background-image: conic-gradient(
        from var(--angle),      /* La rotación del gradiente dependerá de la variable --angle */
        #64d8c3, 
        transparent 5%, transparent 45%, 
        #64d8c3 50%, 
        transparent 55%,  transparent 95%, 
        #64d8c3
    );

    padding: 5px;                   /* Tamaño del borde */
    border-radius: 15px;            /* Redondeo del borde */
    
    /* Creamos la animación spin - Dura 4 segundos, lineal (cada "frame" dura lo mismo), infinita */
    animation: 4s spin linear infinite;
}

/* Animación de spin - Pasamos de 0 a 360 grados (damos vueltas completas) infinitamente */
@keyframes spin 
{
    from
    {
        --angle: 0deg;
    } 
    to
    {
        --angle: 360deg;
    } 
}

/* Efecto glow - Duplicamos ::after en ::before, pero a before (se encuentra por debajo de ::after) 
    le añado un difuminado */
.card::before
{
    filter: blur(1.5rem);
}


.profile_photo
{
    width: 50%;
    border-radius: 50%;
    margin: 5px;
    box-shadow: 0 0 10px #0f0f1f;
}

/* --------------- CONTENEDOR DE CARD (NECESARIO PARA QUE FUNCIONE LA ANIMACIÓN GLOW CORRECTAMENTE EN DISPOSITIVOS APPLE) ----------------- */

/* Contenedor de card */
.card-container
{
    position: relative;                     /* La posición de sus hijos dependen de su posición */

    width: clamp(100px, 90vmin, 600px);     /* Mín - 100px | determinado - 90% del menor tamaño de ventana | max - 600px */
    aspect-ratio: 1/1;                      /* Tendrá la misma altura que anchura */ 
    padding: 50px 0;                        /* Añadimos relleno verticalmente para seguir cubriendo siempre el glow */

}

/* Animación necesaria para que funcione la animación de .card::before en dispositivos Apple */

/* 
    Su funcionamiento es exactamente el mismo que los pseudo-elementos de .card, pero no tiene colores su animación. 
    Al poner esta animación debajo de .card::before, el efecto glow de .card::before junto a su animación funcionan correctamente
    en dispositivos Apple 
*/
.card-container::after
{
    content: '';
    position: absolute;

    background-image: conic-gradient(from var(--angle), transparent);

    padding: 5px;                  
    border-radius: 15px;    
    
    animation: 4s spin linear infinite;

    height: 100%;
    width: 100%;

    top: 50%;
    left: 50%;
    translate: -50% -50%;
}