/* =================================================================================
    フォントの読み込み
================================================================================== */

/* ==== 'M PLUS 1p' - 通常フォント ==== */
/* ==== 'Ubuntu' - 英字デザインフォント ==== */
/* ==== 'M PLUS 1 Code' - 等幅フォント ==== */
/* ==== 'Zen Kurenaido' - 手書きフォント ==== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Zen+Kurenaido&display=swap');
/* ==== 'Font Awesome 6 Free' - アイコンフォント ==== */
@import url('https://use.fontawesome.com/releases/v6.5.2/css/all.css');

/* =================================================================================
    色変数
================================================================================== */

:root {
    --brand: #222244;
    --base: oklch(from var(--brand) 25% 0 h);
    --text: oklch(from var(--brand) 80% 0.01 h);
    --button-left: oklch(from var(--base) 27% c h);
    --button-right: oklch(from var(--base) 31% c h);
    --shadow-light: oklch(from var(--base) 45% c h / .4);
    --shadow-dark: oklch(from var(--base) 5% c h / .4);
}

/* =================================================================================
    CSSのNormalize
================================================================================== */

* {
    margin: 0;
    border: 0;
    outline: 0;
    padding: 0;
    box-sizing: border-box;
    font: 300 1rem/1.25 'Ubuntu', 'M PLUS 1p';
    word-break: auto-phrase;
    color: var(--text);
}

:where(ul, ol, li) {
    padding-left: revert;
}

/* =================================================================================
    ニューモーフィズム
================================================================================== */
.neumorphism-up {
    box-shadow: -3px -3px 4px var(--shadow-light), 3px 3px 4px var(--shadow-dark);
    border-radius: 1rem;
}

.neumorphism-down {
    box-shadow: inset -2px -2px 3px var(--shadow-light), inset 2px 2px 3px var(--shadow-dark);
    border-radius: 1rem;
}

button,
.neumorphism-button {
    border-radius: 1.5rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    box-shadow:
        -3px -3px 5px var(--shadow-light),
        3px 3px 5px var(--shadow-dark),
        inset 0px 0px 0px var(--shadow-light),
        inset 0px 0px 0px var(--shadow-dark);
    background: linear-gradient(to right bottom, var(--button-left), var(--button-right));
    transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);

    &:hover {
        box-shadow:
            -4px -4px 6px var(--shadow-light),
            4px 4px 6px var(--shadow-dark),
            inset 0px 0px 0px var(--shadow-light),
            inset 0px 0px 0px var(--shadow-dark);
        transform: translateY(-.125px) scale(1.005);
    }

    &:active {
        box-shadow:
            0px 0px 0px var(--shadow-light),
            0px 0px 0px var(--shadow-dark),
            inset -2px -2px 3px var(--shadow-light),
            inset 2px 2px 3px var(--shadow-dark);
        transform: translateY(.125px) scale(0.995);
    }
}

/* =================================================================================
    body
================================================================================== */

body {
    width: 100dvw;
    min-height: 100dvh;
    background: var(--base);
    overscroll-behavior: none;
    padding: 1rem 20%;

    &>* {
        width: 100%;

        &+* {
            margin-top: 1rem;
        }
    }
}

/* =================================================================================
    h1
================================================================================== */

h1 {
    font: 400 2rem/3rem 'Ubuntu';
    color: var(--text);
    text-align: center;
}

/* =================================================================================
    div.canvas
================================================================================== */

div.canvas {
    width: 100%;
    aspect-ratio: 16 / 9;

    &>canvas {
        width: 100%;
        height: 100%;
        border-radius: 1rem;
        /* グレーと白の市松模様 */
        --bg-size: 2rem;
        --bg-color-a: #999;
        --bg-color-b: #ddd;
        background-image: linear-gradient(45deg, var(--bg-color-a) 25%, transparent 25%, transparent 75%, var(--bg-color-a) 75%), linear-gradient(45deg, var(--bg-color-a) 25%, transparent 25%, transparent 75%, var(--bg-color-a) 75%);
        background-position: 0 0, calc(var(--bg-size) / 2) calc(var(--bg-size) / 2);
        background-size: var(--bg-size) var(--bg-size);
        background-color: var(--bg-color-b);
    }
}

/* =================================================================================
    section.settings
================================================================================== */

section.settings {

    &>*+* {
        margin-top: .5rem;
    }

    & input {
        width: 20rem;
        padding: 0.25rem .5rem;
        border-radius: 1rem;
        background: var(--base);
        color: var(--text);
        font: 300 1rem/1.25 'Ubuntu';
    }

    &>textarea {
        width: 100%;
        min-height: 12rem;
        padding: .5rem;
        border-radius: 1rem;
        background: var(--base);
        color: var(--text);
        resize: vertical;
        font: 300 1rem/1.1 'M PLUS 1 Code';
    }

    &>img {
        width: 1px;
        height: 1px;
    }
}