:root {
    --color-background: #111111;
    --color-shadow: #00000080;
    --color-white: #FFFFFF;
    --color-black: #000000;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    margin: 0;
}

object {
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6, p, a {
    font-family: Torus, Comfortaa, Inter, sans-serif;
}

.resizable-link {
    text-decoration: none;
    transition: 0.2s;
}

.resizable-link:hover {
    transform: scale(1.05);
}

.loading {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    justify-content: center;
    align-items: center;
    background-color: var(--color-background);
    transition: 0.5s;
}

.loading-image {
    width: max(10vw, 20vh);
}

header {
    display: flex;
    position: fixed;
    z-index: 9999;
    width: 100%;
    flex-direction: column;
    background-image: linear-gradient(to top left, #73A5FF, #FF4BFF), linear-gradient(to top right, #5F55FF, #EC76FF);
    background-color: var(--color-shadow);
    background-blend-mode: color;
}

.header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.header-content-title {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 12px;
}

.header-content-title-home {
    position: relative;
    width: 48px;
    height: 48px;
    transition: 0.2s;
}

.header-content-title-home:hover {
    transform: scale(1.1);
}

.header-content-title-home-image {
    width: 90%;
    margin: 5%;
}

.header-content-title-text {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-white);
    margin: -2px 0 0 0;
}

.header-content-version {
    font-size: 14px;
    text-align: center;
    color: var(--color-white);
    margin: 0;
}

.section-header {
    justify-content: left;
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    color: var(--color-white);
    margin: 24px 36px;
}

.section-contacts, .section-projects, .section-forks, .section-archives {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 36px;
    margin: 24px;
}

.contacts-item {
    display: flex;
    aspect-ratio: 1;
    width: 5%;
    min-width: 64px;
    max-width: 128px;
    transition: 0.2s;
}

.contacts-item:hover {
    transform: scale(1.07);
}

.contacts-item-image {
    display: flex;
    aspect-ratio: 1/1;
    width: 100%;
}

.projects-item {
    display: flex;
    aspect-ratio: 11/6;
    width: 30%;
    min-width: 350px;
    max-width: 800px;
    flex-direction: column;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    text-decoration: none;
    transition: 0.2s;
}

.projects-item:hover {
    transform: scale(1.02);
}

.projects-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px;
}

.projects-item-top-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.projects-item-top-title-image {
    display: flex;
    aspect-ratio: 1/1;
    width: 10%;
}

.projects-item-top-title-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(14px + 4 * (100vw - 300px) / 900);
    font-weight: bold;
    text-align: center;
    color: var(--color-white);
    margin: -4px 0 0;
}

.projects-item-top-skill-icon {
    display: flex;
    aspect-ratio: 1/1;
    width: 8%;
}

.projects-item-description {
    display: flex;
    flex: content;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    font-size: calc(12px + 2 * (100vw - 300px) / 900);
    text-align: center;
    white-space: pre-wrap;
    color: var(--color-white);
    margin: 20px;
}

.projects-item-top-title-text.project-elkollege-schedule,
.projects-item-description.project-elkollege-schedule,
.projects-item-top-title-text.project-osu-wiki {
    color: var(--color-black);
}

.projects-item-top-title-image.project-osu-parser,
.projects-item-top-title-image.project-diquoks-web,
.projects-item-top-title-image.project-osu-lazer {
    width: 9%;
    padding: 0.5%;
}

.projects-item-top-title-image.project-music-bot,
.projects-item-top-title-image.project-osu-wiki {
    width: 8%;
    padding: 1%;
}

footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 36px;
    background-image: linear-gradient(to top, var(--color-shadow), transparent);
    padding: 36px 24px 24px;
}

.footer-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.footer-title-image {
    display: flex;
    width: 36px;
    height: 36px;
}

.footer-title-text {
    font-size: 18px;
    color: var(--color-white);
}

.footer-link {
    font-size: 14px;
    color: var(--color-white);
}