:root {
    --background: #e3e3e3;
    --color: #171616;
    --link: #005cb3;
    --link-hover: #0081fa;
    --accent: #002547;
    --accent-low: #00478a;

    --tablet: 760px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #171616;
        --color: #e3e3e3;
        --link: #0081fa;
        --link-hover: #4da9ff;
        --accent: #e3e3e3;
        --accent-low: #ccc;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: var(--background);
    color: var(--color);
    font-family: system-ui, sans-serif;
    min-height: 100%;
}

.home-main {
    width: min(100%, 920px);
    max-width: 920px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 1.5rem) 2rem;
    box-sizing: border-box;
}

.home-hero {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
}

a {
    color: var(--link);
    transition: color 0.2s ease-out;
}

a:hover {
    color: var(--link-hover);
}

.logo {
    width: min(100%, 42rem);
    max-width: 800px;
    height: auto;
    padding-top: clamp(1rem, 4vw, 2rem);
    margin: clamp(1.5rem, 6vw, 3rem) auto 1.5rem;
    display: block;
}

.home-hero h1 {
    margin: 0;
    font-size: 1.6rem;
}

.home-hero p {
    max-width: 34rem;
    margin: 0 0 1.8em;
    font-size: 1.05rem;
    opacity: 0.9;
}

.logo .accent {
    fill: var(--accent);
}

.logo .accent-low {
    fill: var(--accent-low);
}

.taskbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1rem, 3vw, 2rem);
    max-width: 800px;
    margin: 4em auto;
    padding: 1.25em 1.5em;
    box-sizing: border-box;
    text-align: left;
    background: linear-gradient(90deg, #7f8cfa 0%, #a0c0ff 100%);
    color: #222;
    border-radius: 1.5em;
    box-shadow: 0 4px 24px 0 #a0c0ff22;
    font-size: 1.25em;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    line-height: 1.6em;
}

.taskbar.emoji-picker {
    background: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
    box-shadow: 0 4px 24px 0 #fda08522;
}

.taskbar.emoji-picker img {
    max-width: 200px;
    width: 18vw;
    height: auto;
    object-fit: contain;
    transform: translateY(-10px);
}

.taskbar.emoji-picker a {
    color: #5a1b00;
    background: #ffffffb5;
}

.taskbar.emoji-picker a:hover,
.taskbar.emoji-picker a:focus {
    background: #fff;
    color: #ff4f2b;
    box-shadow: 0 4px 18px #ff7f4a55;
}

.taskbar img {
    max-width: 200px;
    filter: drop-shadow(0 1px 2px #0002);
    width: 18vw;
    flex-shrink: 0;
}

.taskbar > div {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.taskbar .msg {
    margin-right: 0;
}

.taskbar a {
    color: #003399;
    background: #ffffffa0;
    padding: 0.25em 0.9em;
    border-radius: 1em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 6px #fff2;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    display: inline-block;
}

@media (max-width: 760px) {
    .home-main {
        padding-inline: 1rem;
    }

    .logo {
        width: min(100%, 20rem);
        margin-bottom: 1rem;
    }

    .home-hero h1 {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
    }

    .home-hero p {
        max-width: 30ch;
        font-size: 1rem;
    }

    .taskbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 2.5em auto;
        padding: 1.5em 1.25em;
    }
    .taskbar img {
        width: min(50vw, 12rem);
    }
    .taskbar.emoji-picker img {
        width: min(50vw, 12rem);
        transform: translateY(0);
    }
    .taskbar > div {
        flex-direction: column;
        margin: 0.5em 0 0;
        gap: 0.5rem;
    }
}


.taskbar a:hover,
.taskbar a:focus {
    background: #e0ebff;
    color: #7f8cfa;
    box-shadow: 0 4px 18px #7f8cfa55;
}

.imprint {
    width: min(100%, 420px);
    margin: 2em auto 1em auto;
    padding: 2em 1.2em 1.5em 1.2em;
    background: linear-gradient(120deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 1.2em;
    border: 1.5px solid #e0e4ec;
    box-shadow: 0 2px 12px 0 #d0d6e155;
    color: #24314d;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.imprint .emoji {
    position: absolute;
    top: 1em;
    right: 1.2em;
    font-size: 1.6em;
    opacity: 0.7;
    pointer-events: none;
    filter: drop-shadow(3px 3px 2px #999);
}

.imprint h3 {
    margin: 0 0 1em 0;
    font-size: 1.25em;
    letter-spacing: 0.02em;
    color: #213059;
}

.imprint strong {
    color: #546da9;
    font-weight: 600;
}

.imprint div {
    font-size: 1.05em;
    line-height: 1.6;
}