/* VARIABLES */
:root {
  --hue:220;
  --lumin-dark:24%;
  --lumin-vibrant:60%;
  --lumin-medium:84%;
  --lumin-pale:96%;
  --color-dark:hsl(var(--hue),100%,var(--lumin-dark));
  --color-vibrant:hsl(var(--hue),100%,var(--lumin-vibrant));
  --color-medium:hsl(var(--hue),100%,var(--lumin-medium));
  --color-pale:hsl(var(--hue),100%,var(--lumin-pale));
  --compl-dark:hsl(calc(var(--hue) + 180),100%,var(--lumin-dark));
  --compl-medium:hsl(calc(var(--hue) + 180),100%,var(--lumin-medium));
  --compl-pale:hsl(calc(var(--hue) + 180),100%,var(--lumin-pale));
  --bw-vibrant:hsl(var(--hue),0%,var(--lumin-vibrant));
  --bw-medium:hsl(var(--hue),0%,var(--lumin-medium));
  --bw-pale:hsl(var(--hue),0%,var(--lumin-pale));
}

/* GENERAL */
*, *::before, *::after {box-sizing: border-box; font-family:inherit;}
html {background:#333; color:var(--color-pale); font:16px Arial, sans-serif; line-height:1.5; margin:0 auto; max-width:700px; padding:0; place-content:center;}
body {margin:0; padding:0;}
header {padding:10px 0 10px 0;}
footer {padding:10px 0 10px 0;}
canvas, img, picture, svg, video {display:block; max-width:100%;}
@media (max-width:700px) {
	p, h1, h2, h3, h4, h5 {padding:0 10px;}
}
::selection {background:#ddd; color:#333;}

/* LINKS */
a {color:inherit; text-decoration-color:var(--color-vibrant)}
a:focus, a:hover {color:var(--color-medium); text-decoration:none; text-shadow:0px 0px 15px var(--color-vibrant);}

/* TEXT */
h1, h2, h3, h4, h5 {color:var(--color-medium); font-family:Georgia, serif; font-weight:normal; margin:15px 0 10px 0;}
h1 {font-size:40px;}
h2 {font-size:32px;}
h3 {font-size:26px;}
h4 {font-size:22px;}
h5 {font-size:20px;}
p {margin:12px 0;}

/* UNGRID COLUMNS */
.row {display:table; table-layout:fixed; width:100%;}
.col {display:table-cell;}
.r-col {display:inline;}
@media (min-width: 400px) {
    .r-row {display:table; table-layout:fixed; width:100%;}
    .r-col {display:table-cell;}
}

/* CODE */
code {background:var(--color-pale); border-radius:5px; color:var(--color-dark); display:block; font:85% monospace; margin:10px 0; line-height:1.3; overflow-x:auto; padding:10px; white-space:pre;}
p > code {display:inline-block; margin:0; padding:0 3px; vertical-align:middle;}

/* TABLES */
table {border-collapse:collapse;}
th {background:var(--color-dark); color:var(--color-pale);}
td {background:var(--color-pale); color:var(--color-dark);}
td, th {border:1px solid var(--color-dark); font-weight:normal; padding:5px 10px;}

/* LISTS */
ul {list-style-type:square;}
ul, ol {line-height:1.5; padding:0; padding-inline-start:20px;}

/* FORMS */
fieldset {border:1px solid var(--color-medium); border-radius:5px; margin:0; padding:10px;}
form {margin:0;}
legend, label {font:16px Georgia, serif;}
button, input, select, textarea {font:inherit;}
label, button {cursor:pointer; display: inline-block;}
textarea {resize:block;}
input, textarea {border-radius:5px; margin:5px 0; padding:5px;}
select, button {border:transparent; border-radius:5px; margin:5px 0; padding:5px 10px;}
input, select, textarea {background:var(--compl-pale); border:0; color:var(--compl-dark)}
input::placeholder {color:var(--color-medium);}
input:focus, select:focus, textarea:focus, input:hover:not([disabled]), select:hover:not([disabled]), textarea:hover:not([disabled]) {box-shadow:0 0 10px var(--color-vibrant); outline:none;}
button {background:transparent; border:1px solid var(--color-vibrant); color:var(--color-pale);}
button:hover {color:var(--color-medium); text-shadow:0px 0px 15px var(--color-vibrant);}
button:active {transform:translate(1px, 1px);}