@import url("fonts/iosevka.css");

:root {
    --purple: #9C59D1;
    --yellow: #FCF434;
    --gray: #2C2C2C;
    --white: #FFFFFF;
    --black: #000000;
}

body {
    font-family: "Iosevka", "sans-serif";
    margin: 8px;
    background: rgb(from var(--gray) calc(r / 2) calc(g / 2) calc(b / 2));
}

svg {
    fill: var(--black);
    stroke-width: 2px;
    width: 100%;
    height: 100%;
}

p,
li {
    color: var(--white);
}

.header-bar {
    width: 100%;
    height: 40px;

    margin-top: 8px;

    border-radius: 5px;

    position: sticky;
    top: 0px;

    background: rgb(from var(--purple) calc(r * 0.8) calc(g * 0.8) calc(b * 0.8));
}

.header-bar-links {
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 5px;
    gap: 5px;

    flex-direction: row-reverse;
    display: flex;
}

.header-bar-links>div {
    aspect-ratio: 1;
}

@property --title-gradient-mix-1 {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@property --title-gradient-mix-2 {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false;
}

@keyframes title-gradient {
    0% {
        --title-gradient-mix-1: 0%;
        --title-gradient-mix-2: 100%;
    }

    50% {
        --title-gradient-mix-1: 100%;
        --title-gradient-mix-2: 0%;
    }

    100% {
        --title-gradient-mix-1: 0%;
        --title-gradient-mix-2: 100%;
    }
}

.title {
    animation: title-gradient 6s infinite ease-in;

    --gradient-1: color-mix(in hsl, var(--yellow) var(--title-gradient-mix-1), var(--purple) var(--title-gradient-mix-2));
    --gradient-2: color-mix(in hsl, var(--yellow) var(--title-gradient-mix-2), var(--purple) var(--title-gradient-mix-1));

    background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2));

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.title>p {
    font-size: 60pt;
    font-weight: 900;

    margin-top: 20px;
    margin-bottom: 20px;
}

.content {
    font-size: 15pt;
    padding-left: 50px;
}

.link {
    color: var(--purple);

    font-family: "Iosevka ExtraBold", "sans-serif";

    text-decoration-line: none;
}

.link:hover {
    color: var(--yellow);
}

.link:visited {
    color: rgb(from var(--purple) calc(r * 0.5) calc(g * 0.5) calc(b * 0.5))
}

.link:hover:visited {
    color: var(--yellow);
}

.flags {
    padding: 5px;
    background: rgb(from var(--purple) r g b / 0.3);
    width: fit-content;
    height: 50px;
}

.flags>img {
    opacity: 0.9;
    height: 50px;
    width: 100px;
}