@font-face {
    font-family: 'Silkscreen';
    src: url('../font/slkscr.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --card-bg-color: #000000;
    --card-text-primary: #ffffff; /* set inside figure.snip1200 for each card separately */
}

body {
    background-color: #111111;
    font-family: 'Silkscreen', sans-serif;
    color: springgreen;
    padding: 5rem;
}

p {
    margin-top: 2rem;
    font-size: 1em;
}

hr {
    border: none; /* Remove default border */
    height: 1px; /* Set the height of the hr */
    background-color: rgba(255, 255, 255, 0.2); /* Light color for hr line */
    margin: 4em 0; /* Add margin to the sides */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), 0 -2px 5px rgba(0, 0, 0, 0.4); /* Shadow effect on top and bottom */
}


#about {
    line-height: 1.5rem;
}

.heading{
    text-decoration: underline;
    margin-block: 3rem;
}

figure.snip1200 {
    width: 85%;
    border: 1px solid white;
    padding: 1em;
    background-color: var(--card-text-primary);
    max-width: 350px;
    margin-inline: auto;
    border-radius: 0.2rem;
   

    display: flex;
    flex-direction: column;
    gap: 1em;
}

figure.snip1200:nth-of-type(1) {
    --card-text-primary: dodgerblue;
}
figure.snip1200:nth-of-type(2) {
    --card-text-primary: springgreen;
}
figure.snip1200:nth-of-type(3) {
    --card-text-primary: red;
}

figure.snip1200 img {
    width: 100%;
}

figure.snip1200 ul.links {
    list-style: none;
    display: flex;
    justify-content: space-around;
    font-size: 1.1em;
    padding-block: 1em;
}
figure.snip1200 .link-item a {
    color: var(--card-text-primary);
}

figure.snip1200 .link-item a:hover {
    color: chartreuse
}

figure.snip1200 figcaption {
    padding: 0.5em 1.5em;
    flex-grow: 1;
}

figure.snip1200 img,
figure.snip1200 ul.links,
figure.snip1200 figcaption {
    background-color: var(--card-bg-color);
    border: 1px solid white;
}

.name {
    font-size: 1.3em;
}

#personalities {
    /* display: flex;
    justify-content: space-around;
    align-items: center; */

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 4vw;
    column-gap: 8vw;
}

@media (max-width: 768px) {
    #personalities {
        /* flex-direction: column;
        align-items: center; */
        grid-template-columns: 1fr;
    }

    figure.snip1200 {
        max-width: 310px;
    }

    figure.snip1200 figcaption {
        font-size: 1.2em;
    }

    figure.snip1200 p {
        font-size: 0.8em; /* Reduce font size */
    }
}

.image-glitch {
    animation: glitch 3s infinite steps(1);
}

@keyframes glitch {
    0%, 100% {
        content: url('../images/GG.png');
    }

    75% {
        content: url('../images/red-1.png');
    }

    77.5% {
        content: url('../images/red-2.png');
    }

    80% {
        content: url('../images/red-3.png');
    }

    82.5% {
        content: url('../images/red-4.png');
    }

    85% {
        content: url('../images/red-5.png');
    }

    87.5% {
        content: url('../images/red-6.png');
    }

    90% {
        content: url('../images/red-7.png');
    }

    92.5% {
        content: url('../images/red-8.png');
    }

    95% {
        content: url('../images/red-9.png');
    }

    97.5% {
        content: url('../images/red-10.png');
    }
}