@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.purple.min.css");
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=M+PLUS+2&display=swap');

:root {
    --pico-font-family-sans-serif: "M PLUS 2", system-ui;
    --pico-font-family-monospace: "JetBrains Mono", monospace;
    font-size: 11pt;
}

body>header{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

@keyframes rotatingAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
.rotating{
    animation: rotatingAnimation 1s linear 0s infinite !important;
}

#profile-image:hover{
    scale: 1.1;
    transform: rotate(-10deg);
}
nav {
    justify-content: start;
    gap: 1rem;
}

@media(prefers-color-scheme: dark) {
    .invert-on-dark {
        mix-blend-mode: screen;
        filter: invert(1);
    }
}

li {
    margin-bottom: 1rem;
}

li:hover {
    background-color: var(--pico-muted-border-color);
}

@keyframes gamingAnimation {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 100%;
    }
}

.gaming {
    background-image: repeating-linear-gradient(to bottom right,
            hsl(0, 100%, 63%),
            hsl(60deg, 80%, 50%),
            hsl(120, 100%, 47%),
            hsl(180, 100%, 49%),
            hsl(240, 100%, 68%),
            hsl(300, 100%, 50%),
            hsl(0, 100%, 50%) 50%);
    background-size: 1000% 1000%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gamingAnimation 10s linear 0s infinite !important;
}



#private-works-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

@media (max-width: 1200px) {
    #private-works-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    #private-works-container {
        grid-template-columns: repeat(3, 1fr);
    }

    main {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    #private-works-container {
        grid-template-columns: 1fr;
    }
}

.private-work {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    border-radius: var(--pico-border-radius);
    overflow: hidden;
}

.private-work:hover {
    background-color: var(--pico-muted-border-color);
}

.private-work-eyecatch {
    flex: 0 0 auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: var(--pico-progress-background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-family: var(--pico-font-family-monospace);
}

.private-work-eyecatch>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.private-work-title {
    flex: 1 1 auto;
    color: var(--pico-h2-color);
    overflow: hidden;
}

.private-work-tags {
    flex: 0 0 auto;
}

#tag-filter-container {
    display: flex;
    gap: 1rem;
}