@charset "UTF-8";

/* 基本設定 */
body, p, ul, input {
    margin: 0;
}

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

input, button, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

/* 背景 */
html {
    background: var(--background);
    color: var(--default-font);
    scroll-behavior: smooth;
}

/* 見出し */
.title {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}

/* aタグ */
a {
    text-decoration: none;
    word-break: break-all;
}

a.normal-anchor {
    color: #3478f6;
}

/* 折り返し位置指定 */
p {
    word-break: keep-all;
}

/* チェックボックス */
input + label > div {
    display: flex;
    cursor: pointer;
    align-items: center;
}

input + label > div {
    user-select: none;
}

input + label > div > div {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--transparent);
    border-radius: 25%;
    margin-right: 0.5rem;
    transition: background 250ms;
    background: transparent;
}

input:checked + label > div > div {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

input + label > div > div > .icon {
    display: none;
    color: var(--background);
}

input:checked + label > div > div > .icon {
    display: inline-flex;
}

/* ロゴ */
.logo {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    height: 2rem;
    background-repeat: round;
}

/* ほかの言語 */
.another-lang {
    font-size: 1.2rem;
    color: var(--thin-font);
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    cursor: pointer;
}

/* ライトモード配色 */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --background: #fff;
        --default-font: #000;
        --transparent: rgba(0, 0, 0, 0.5);
        --thin-font: #444;
    }
}

/* ダークモード配色 */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: #000;
        --default-font: #fff;
        --transparent: rgba(255, 255, 255, 0.5);
        --thin-font: #ddd;
    }
    .logo {
        background-image: url(/logo/dark.png);
    }
}