@import url("/font/font.css");

* { box-sizing: border-box; }

:root {
    --color: #000; --background: #fff; --background-dim: #d6d6d6;
    --link-color: #777; --link-hover: #333;
    --border-color: #ccc; --border-color-light: #f3f3f3;
    --anim-fast: 0.1s; --anim-quick: 0.2s; --anim-mid: 0.3s;
    
    --transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;

    --font: "Adelle Sans ARM", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-serif: Georgia, 'Times New Roman', Times, serif;
    --font-size: 16px; --font-size-smsl: 14px; --padding-smid: 6px; --padding-mid: 12px;
    --rem-1: 1rem 0 1rem 0; --rem-1-full: 1rem;

    --postlist-color: #333; --postlist-hover: #222; --postlist-active: #111;
    --color-disabled: #aaa; --color-border: #ddd;
    --color-primary: #007aff;

    --btn-color: #999; --btn-border: #ddd;
    --btn-color-hover: #666; --btn-border-hover: #aaa;

    --background-light: #f3f3f3; --background-light-hover: #e7e7e7; --background-light-active: #d3d3d3;

    --selected-shadow: 0 0 0 2px var(--background), 0 0 0 5px var(--btn-border);
    --selected-shadow-primary: 0 0 0 2px var(--background), 0 0 0 5px var(--color-primary);
}
@media(prefers-color-scheme: dark) {
    :root {
        --color: #fff; --background: #000; --color-hover: #f0f0f0; --color-active: #ddd;
        --link-color: #eee; --link-hover: #ccc;
        --background-light: #646464; --background-light-hover: #303030; --background-light-active: #484848;
        --btn-color: #e9e9e9; --btn-border: #777;
        --btn-color-hover: #ccc; --btn-border-hover: #282828;
        --border-color: #444; --border-color-light: #666;
    }
}

::selection { color: var(--background); background-color: var(--color); }
::moz-selection { color: var(--background); background-color: var(--color); }

@keyframes fade { from { opacity: 0%; } to { opacity: 100%; } }

body {
    margin: 0; padding: 0;
    font-family: var(--font); font-size: var(--font-size);
    color: var(--color); background-color: var(--background);
    animation: fade var(--anim-mid);
}

a { color: var(--link-color); text-decoration: none; transition: var(--transition); border-bottom: 1px solid transparent; }
a:hover { color: var(--link-hover); border-color: var(--link-hover); }

br {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
} select, select option { cursor: pointer; }

nav { margin: 1rem 0 1rem 0; padding: 1rem; border-radius: 6px; background-color: var(--background-light-hover, #fff); box-shadow: 0 1px 2px rgb(from var(--background) r g b / 0.2); }
nav ul { margin: 0; padding: 0; list-style: none; overflow: hidden; } nav ul li { float: left; }
nav ul li a { display: inline-block; padding: 6px 9px 6px 9px; border-radius: 6px; transition: background-color 0.1s ease; }
nav ul li a:hover { background-color: rgb(from var(--background) r g b / 0.1); text-decoration: none; }
nav ul li a:active { background-color: rgb(from var(--background) r g b / 0.2); }

main {
    width: 64%;
    margin: 0 auto;
} main.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

footer {
    font-size: 11px;
    padding: 1rem 0 1rem 0;
}

.btn {
    display: inline-flex;
    padding: .35rem .5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
} .btn:hover {
    text-decoration: none;
    background-color: #00000010;
} .btn:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 2px #007aff50;
}

navbar {
    display: flex;
    gap: .5rem;
} navbar a {
    display: inline-flex;
    box-shadow: 0 2px 0 transparent;
    transition: all .2s ease;
    font-size: 20px;
    text-transform: lowercase;
} navbar a:hover {
    text-decoration: none;
    box-shadow: 0 2px 0 #000;
}