@font-face {
    font-family: 'VG5000';
    src: url('./VG5000.otf');
}

:root {
    --main-color: black;
    --sec-color: blue;
    --third-color: grey;
}

* {
    font-family: VG5000;
}

#main {
    padding: 1%;
    width: 100%;
    height: 100%;
    text-wrap: stable;
}

#main>h1 {
    font-size: 3em;
}

#tlr-links {
    width: fit-content
}

.links>ul {
    list-style-type: none;
    font-size: 1.6em;
}



a {
    text-decoration: dotted underline var(--main-color);
    text-decoration-thickness: 3px;
    color: var(--main-color);
    transition: color 0.5s;
}

.ext-link::after {
    content: " ↗"
}


a:hover {
    color: var(--sec-color);
    text-decoration: dotted underline blue;
    text-decoration-thickness: 3px;
}

.discord {
    color: var(--main-color);
    transition: color 0.5s;
}

.discord:hover {
    color: var(--sec-color);
}

.instagram {
    color: var(--main-color);
    transition: color 0.5s;
}

.instagram:hover {
    color: var(--sec-color);
}

.mastodon {
    color: var(--main-color);
    transition: color 0.5s;
}

.mastodon:hover {
    color: var(--sec-color);
}


.discord::before {
    content: "💬 ";
}

.instagram::before {
    content: "🌄 ";
}

.mastodon::before {
    content: "😉 "
}


.past-events>ul {
    font-size: 1.5em;
    list-style: none;
    color: var(--main-color);
    transition: color 0.5s;
}

.past-events>ul:hover {
    color: var(--sec-color)
}

.past-events>h2::before {
    content: "🗓 ";
    font-size: 1.2em;
}

.future-events>ul {
    font-size: 1.5em;
    list-style: none;
    transition: color 0.5s;
}

.future-events>ul:hover {
    color: var(--sec-color);
}

.future-events>h2::before {
    content: "⏳ ";
    font-size: 1.2em;
}

.date {
    color: var(--third-color)
}

.date {
    text-decoration: underline dotted grey;
}

.other-links>ul {
    font-size: 1.5em;
    list-style: none;
    color: var(--main-color);
    transition: color 0.5s;
}

.past-events>ul:hover {
    color: var(--sec-color)
}

#ici::before {
    content: "⌂ ";
}

#ailleurs::before {
    content: "🌎 ";
}

.info::before {
    content: "📗 ";
    font-size: 1.3em;
}

.tool::before {
    content: "🔌 ";
    font-size: 1.3em;
}