@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";

#content img {
    border-radius: .25rem
}

#header {
    max-height: fit-content
}

.column {
    flex: 1 1 100%;
    border-radius: .25rem;
    padding: 1rem
}

.container {
    max-width: 900px;
    margin: auto;
    display: flex;
    gap: 1rem
}

.fluid-image {
    max-width: 100%;
    height: auto
}

body {
    font-family: "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif
}

h1,
h2,
h3,
h4,
h5 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

@media screen and (max-width: 990px) {
    .container {
        flex-wrap: wrap
    }

    .item:first-child {
        flex-basis: 100%
    }
}

.container {
    opacity: 1;
    animation: fadeIn .5s ease-in-out
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -.1em
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

* {
    color: inherit
}

.background {
    background-color: var(--background-lighter);
    color: #fff
}

.container {
    background-color: var(--background-container);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 30px var(--shadow-color)
}

.left-panel {
    background-color: var(--background-left-panel);
    border-right: 1px solid var(--border-color)
}

body {
    background-color: var(--background-body);
    color: var(--text-color)
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--heading-color)
}

hr {
    border-top-color: #ffffff1a
}

p.disclaimer {
    text-align: center
}

p.smol,span.smol {
    font-size: small
}

.text-center {
    text-align: center
}

@media (prefers-color-scheme: dark) {
    * {
        color: #ccc
    }

    :root {
        --background-body: #1a2a4b;
        --background-container: #0d1a33;
        --background-left-panel: #0d1a33d9;
        --background-lighter: #3174af;
        --text-color: #e0e0e0;
        --heading-color: #87cefa;
        --border-color: #ffffff26;
        --shadow-color: #00000080;
        --plyr-audio-controls-background: var(--background-left-panel);
        --plyr-menu-background: var(--background-left-panel);
        --plyr-control-spacing: 15px;
        --plyr-audio-control-color: var(--text-color);
        --plyr-color-main: #6cb6ff;
        --plyr-range-track-color: #fff3;
        --plyr-tooltip-background: var(--background-lighter);
        --plyr-tooltip-color: #fff
    }

    body {
        background: #1a2a4b
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --background-body: #e0f2f7;
        --background-container: #fff;
        --background-left-panel: #ffffffe6;
        --background-lighter: #87cefa;
        --text-color: #333;
        --heading-color: #0056b3;
        --border-color: #0000001a;
        --shadow-color: #00000026;
        --plyr-audio-controls-background: var(--background-left-panel);
        --plyr-menu-background: var(--background-left-panel);
        --plyr-color-main: #007bff;
        --plyr-range-track-color: #0000001a;
        --plyr-tooltip-background: #333;
        --plyr-tooltip-color: #fff
    }
}