.font-monospace {
    font-family: monospace2;
}

/* Add custom styles for the animation */
#introOverlay {
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
    transform: scale(0.8);
}

/* Apply the animation classes when the overlay is visible */
#introOverlay.active {
    opacity: 1;
    transform: scale(1);
}

/* role style (splash page) */
.role {
    animation: changeRole 4s linear infinite alternate;
}

@keyframes changeRole {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* image hover effect by Temani Afif
    https://codepen.io/t_afif/pen/QWrmBqJ
*/
.img-effect {
    --s: 15px;  /* size of the frame */
    --b: 2px;   /* border thickness */
    --w: 400px; /* width of the image */
    --c: #000000;
    
    width: var(--w);
    aspect-ratio: 1;
    object-fit: cover;
    padding: calc(2*var(--s));
    --_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),var(--c) 0;
    background:
        linear-gradient(      var(--_g)) 50%/100% var(--_i,100%) no-repeat,
        linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
    outline: calc(var(--w)/2) solid #0009;
    outline-offset: calc(var(--w)/-2 - 2*var(--s));
    transition: .4s;
    cursor: pointer;
}
.img-effect:hover {
    outline: var(--b) solid var(--c);
    outline-offset: calc(var(--s)/-2);
    --_i: calc(100% - 2*var(--s));
}