:root {
    --ihnm-color-bg: white;
    --ihnm-color-bg2: rgb(244, 244, 244);
    --ihnm-color-bg-transparent: rgb(255, 255, 255, .9);
    --ihnm-color-bg2-transparent: rgb(244, 244, 244, .9);
    --ihnm-color-text: black;
    --ihnm-color-red: rgb(155, 19, 42);
    --ihnm-color-pink: pink;
    --ihnm-color-yellow: rgb(248, 236, 64);
    --ihnm-color-shadow: rgb(222, 222, 222);
    --ihnm-color-border: gray;
    --ihnm-color-a-hover: brown;
    --ihnm-color-a-active: darkred;
    --ihnm-color-selection-bg: brown;
    --ihnm-color-selection-text: white;
    --ihnm-color-progress: rgb(172, 235, 172);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ihnm-color-bg: black;
        --ihnm-color-bg2: rgb(22, 22, 22);
        --ihnm-color-bg-transparent: rgb(0, 0, 0, .9);
        --ihnm-color-bg2-transparent: rgb(22, 22, 22, .9);
        --ihnm-color-text: white;
        --ihnm-color-red: rgb(226, 89, 112);
        --ihnm-color-pink: #672733;
        --ihnm-color-yellow: rgb(204, 190, 0);
        --ihnm-color-shadow: rgb(55, 55, 55);
        --ihnm-color-border: lightgray;
        --ihnm-color-a-hover: darksalmon;
        --ihnm-color-a-active: brown;
        --ihnm-color-selection-bg: brown;
        --ihnm-color-selection-text: white;
        --ihnm-color-progress: rgb(0, 59, 0);
    }
}

::selection {
    color: var(--ihnm-color-selection-text);
    background-color: var(--ihnm-color-selection-bg);
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
    background-color: var(--ihnm-color-bg);
    color: var(--ihnm-color-text);
    font-family: arial, sans;
}

main {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1em 1em 3em 1em;
    gap: 1em;
}

p, ul, ol, h1, h2, h3, h4, h5, h6 {
    box-sizing: border-box;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1.5em 0 .5em 0;
}

pre {
    white-space: pre-wrap;
    font-family: 'Times New Roman', Times, serif;
    font-size: 100%;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 120%;
}

ul {
    margin: 0.5em 0;
}

a {
    color: var(--ihnm-color-text);
    text-decoration: underline;
}

a:hover {
    color: var(--ihnm-color-a-hover);
}

a:active {
    color: var(--ihnm-color-a-active);
}

input {
    background-color: var(--ihnm-color-bg);
    color: var(--ihnm-color-text);
    border: 1px solid var(--ihnm-color-border);
}

button {
    background-color: var(--ihnm-color-bg);
    color: var(--ihnm-color-text);
    border: 1px solid var(--ihnm-color-border);
    padding: 0.5em 0.8em;
    margin: 0.5em;
    border-radius: 0;
}

button:hover {
    cursor: pointer;
    background-color: var(--ihnm-color-bg2);
}

button:active {
    background-color: var(--ihnm-color-shadow);
}

button[disabled] {
    color: var(--ihnm-color-border);
    background-color: var(--ihnm-color-bg2);
    border-color: var(--ihnm-color-bg2);
    cursor: default;
}

svg {
    border: 1px solid var(--ihnm-color-border);
    margin: 1em;
}