@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* color scheme directly from vitesse soft dark theme */
:root {
    --background: #222222;
    --dark-green: #3f6d59;
    --bright-green: #80a665;
    --yellow-ish: #b89c43;
    --red-ish: #c98a7d;
    --text: #cecabe;
}

/* a strong MABY on this one */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at top left, var(--dark-green) 0%, transparent 70%),
        radial-gradient(circle at bottom right, var(--bright-green) 0%, transparent 70%);
    animation: pulse-size 10s infinite alternate;
    opacity: 0.08;
}

@keyframes pulse-size {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}

body {
    /* theme */
    background-color: var(--background);
    color: var(--text);

    /* font */
    font-family: "JetBrains Mono";
    font-size: large;

    /* single page */
    min-height: 100vh;
    overflow: hidden;

    /* center content */
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */

    /* align in a column */
    flex-direction: column;

    /* prevent ugly viewport fit */
    padding: 5rem;
}

span {
    /* display: block; */
    align-self: flex-start;
    padding-bottom: 3rem;
}

@view-transition {
    navigation: auto;
}

#animation {
    height: 1rem;
    font-style: italic;
    /* text-decoration: underline wavy;
    text-decoration-color: var(--red-ish); */
}

a,
a:visited {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-decoration-color: var(--dark-green);
    transition: all, 0.2s;
}

a:hover {
    text-decoration-color: var(--bright-green);
}

a:focus {
    text-decoration-color: var(--red-ish);
}

li::marker {
    transition: all, 0.2s;
    color: var(--dark-green);

}

li:has(a:hover)::marker {
    color: var(--bright-green);
}

li:has(a:active)::marker {
    color: var(--red-ish);
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
}

svg {
    fill: var(--text);
    height: 1.5rem;
    width: 1.5rem;
}

.social-icons {
    display: flex;
    gap: 10px;
    z-index: 2;
    flex: 1;
    /* Added */
}

.copyright {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}

*::selection {
    color: var(--dark-green);
    background-color: var(--text);
}

.funny {
    text-decoration: underline wavy var(--red-ish);
    cursor: pointer;
}

@keyframes pulse-color {
    0% {
        backdrop-filter: brightness(100%);
    }

    100% {
        backdrop-filter: brightness(150%);
    }

    0% {
        backdrop-filter: brightness(100%);
    }
}

/* .sun {
    height: 10rem;
    width: 10rem;
    top: -10rem;
    left: -10rem;
    position: absolute;
    /* animation: move-sun 10s infinite cubic-bezier(0.33, 1, 0.68, 1); */
/* offset-path: path('M 120 10 C 90 -20, 30 -20, 0 10');
    animation: move-along-path 10s infinite linear;
}

@keyframes move-along-path {
    0% {
      offset-distance: 0%;
    }
    100% {
      offset-distance: 100%;
    }
  }

@keyframes move-sun {
    0% {
        top: 10rem;
    }

    25% {
        right: 25%;
    }

    50% {
        top: -10rem;
        left: 50%;
    }

    75% {
        left: 75%;
    }

    100% {
        top: 10rem;
        left: 100%;
    }
} */

img::selection,
footer::selection {
    color: transparent;
    background-color: transparent;
}

@keyframes glitch {

    2%,
    64% {
        transform: translate(2px, 0) skew(0deg);
    }

    4%,
    60% {
        transform: translate(-2px, 0) skew(0deg);
    }

    62% {
        transform: translate(0, 0) skew(5deg);
    }
}

.glitch {
    animation: glitch 1s linear infinite;
    cursor: pointer;
}

.glitch::before,
.glitch::after {
    content: attr(title);
    position: absolute;
    left: 0;
}

.glitch::before {
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop {

    2%,
    64% {
        transform: translate(2px, -2px);
    }

    4%,
    60% {
        transform: translate(-2px, 2px);
    }

    62% {
        transform: translate(13px, -1px) skew(-13deg);
    }
}

.glitch::after {
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom {

    2%,
    64% {
        transform: translate(-2px, 0);
    }

    4%,
    60% {
        transform: translate(-2px, 0);
    }

    62% {
        transform: translate(-22px, 5px) skew(21deg);
    }
}