/* =========================================
    Core: Base Defaults
    (html/body defaults, typography, generic element rules)
========================================= */

:root {
    --base-font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --base-page-margin: 0;
    --base-page-padding: 0;

    --base-border-width-thin: 1px;
    --base-inline-gap: clamp(0.35em, 0.3em + 0.25vw, 0.5em);

    --emoticon-line-height: 1;
    --blink-duration: 6s;

    @property --kc-text-scale {
        syntax: "<number>";
        inherits: true;
        initial-value: 1;
    }

    --segment-header-font-size: calc(clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem) * var(--kc-text-scale));
    --segment-header-font-weight: 700;
    --segment-header-margin-bottom: clamp(0.5rem, 1.2vw, 0.625rem);
    --segment-header-padding-bottom: clamp(0.3rem, 0.8vw, 0.375rem);
    --segment-header-border-width: 2px;
}

/* General styles */
body {
    font-family: var(--base-font-family);
    margin: var(--base-page-margin);
    padding: var(--base-page-padding);

    background-color: var(--body-bg-colour);
    color: var(--body-text-colour);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    min-height: var(--body-height, 100dvh);
}

/*Twitter link footer block*/
.twitter-link {
    border-top: var(--base-border-width-thin) solid var(--nav-border-colour);
    text-align: center;

    & svg,
    & img.miku-icon {
        vertical-align: middle;
        margin-right: var(--base-inline-gap);
    }

    & a {
        color: var(--menu-button-text-colour);
        text-decoration: underline;
    }
}

.segment-header {
    font-size: var(--segment-header-font-size);
    font-weight: var(--segment-header-font-weight);
    margin-bottom: var(--segment-header-margin-bottom);
    padding-bottom: var(--segment-header-padding-bottom);
    border-bottom: var(--segment-header-border-width) solid var(--nav-border-colour);
    color: var(--header-text-colour);
    text-align: left;
}

/* Emoticons (including blinking variant)*/
.emoticons,
.emoticon {
    display: inline-block;
    white-space: nowrap;
}

.emoticons {
    vertical-align: middle;
    position: relative;

    /* Blinking emoticons behave like a single inline word */
    & .emoticon-blink {
        display: inline-block;
        white-space: nowrap;
        vertical-align: baseline;
        position: relative;
        line-height: var(--emoticon-line-height);
    }

    /* Both visible and blink frames stay aligned */
    & .blink-open,
    & .blink-closed {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
    }
}

.blink-open {
    animation: blinkOpen var(--blink-duration) infinite;
}

.blink-closed {
    animation: blinkClosed var(--blink-duration) infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes blinkOpen {

    0%,
    83.33% {
        opacity: 1;
    }

    83.34%,
    100% {
        opacity: 0;
    }
}

@keyframes blinkClosed {

    0%,
    83.33% {
        opacity: 0;
    }

    83.34%,
    100% {
        opacity: 1;
    }
}

/* Firefox horizontal overflow containment */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
}

body {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    body {
        overflow-x: hidden;
    }
}