:root {
	--clr-bg-100: white;
	--clr-fg-100: black;
	--clr-bg-200: #f60;
	--clr-fg-200: white;
	--clr-accent-100: yellow;
	--fs-100: clamp(0.6rem, 0.4667rem + 0.5926vw, 0.8rem);
	--fs-200: clamp(0.8rem, 0.6667rem + 0.5926vw, 1rem);
	--fs-300: clamp(0.9rem, 0.7667rem + 0.5926vw, 1.1rem);
	--fs-400: clamp(1rem, 0.8667rem + 0.5926vw, 1.2rem);
	--fs-500: clamp(1.1rem, 0.9667rem + 0.5926vw, 1.3rem);
	--fs-600: clamp(1.2rem, 1.0667rem + 0.5926vw, 1.4rem);

	--hspacer: 2em;
	--br: 5px;
	--default-padding: 1em;
}

/* Reset */

*::before,
*::after,
* {
	box-sizing: border-box;
}

img {
	display: block;
	max-width: 100%;
	object-fit: contain;
}
body {
	margin: 0;
}
main {
	padding: 0 1em;
	overflow: auto;
}

code {
	font-family: monospace;
}
body,
h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
	margin: 0;
}
h1,
h2,
h3,
h4 {
	line-height: 1.1;
}

ul[class],
ol[class],
nav ul {
	list-style: none;
	padding: 0;
}
button {
	cursor: pointer;
	padding: 0.04em 0.7em;
}
/* button[class] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
} */

input,
button,
textarea,
select {
	font: inherit;
}

/* typography */
body {
	font-family: sans-serif;
	font-size: var(--fs-200);
	letter-spacing: 0.01em;
	line-height: 1.6;
	/* letter-spacing: 0.05em; */
}
h1,
h2,
h3,
h4 {
	font-family: inherit;
	/* margin-top: 0.5em; */
	color: #f60;
}
h1 {
	font-size: var(--fs-400);
}
h2 {
	font-size: var(--fs-400);
}
h3 {
	font-size: var(--fs-300);
}
h4 {
	font-size: var(--fs-300);
}
/* fonts */

/* general styling */
html {
	scroll-behavior: smooth;
}
body {
	background: var(--clr-bg-100);
	color: var(--clr-fg-100);
}
nav {
	background: var(--clr-bg-200);
}
a {
	color: var(--clr-link);
	text-decoration: none;
}
.link-look:hover,
.link-look:focus,
a:hover,
a:focus {
	/* color: var(--clr-accent-100); */
	text-decoration: underline;
}
.link-look {
	text-decoration: underline;
	cursor: pointer;
}
table {
	border-spacing: 0px;
	border-collapse: collapse;
	margin: 10px 0;
	font-size: 16px;
}
th,
td {
	padding-left: 0.5em;
	padding-right: 0.5em;
	border: 1px #666 solid;
}
th {
	background: rgba(190, 190, 190, 0.8);
}

.flow-content > * + * {
	margin-top: var(--flow-spacer, 1em);
}
.space-between > * + * {
	margin-left: var(--hspacer, 2em);
}
input[type='date'] {
	width: 9em;
}
/* Utility */
.small {
	font-size: var(--fs-100);
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}
.bold {
	font-weight: bold;
}
.txt-bigger {
	font-size: var(--fs-400);
}
.txt-smaller {
	font-size: var(--fs-100);
}
.txt-bold {
	font-weight: bold;
}
.padding {
	padding: var(--padding, var(--default-padding));
}
.cursor-pointer {
	cursor: pointer;
}
.gridrow {
	display: contents;
	cursor: pointer;
}
.grid-span-row {
	grid-column: 1/-1;
}
.gridrow div {
	transition: border, background-color 0.5s ease;
}
.gridrow:hover > div {
	background: var(--clr-accent-100);
	border-top: 1px solid var(--clr-light-300);
	border-bottom: 1px solid var(--clr-light-300);
}
.flex-vert-align {
	display: flex;
	align-items: center;
}
.flex-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.flex-row {
	flex-direction: row;
}
.fullscreen {
	width: 100vw;
	height: 100vh;
}
.box {
	border: 2px solid #333;
	padding: 0.5em 1em;
	border-radius: var(--br);
}
.font-tiny {
	font-size: var(--fs-100);
}
.left-margin-10 {
	margin-left: 0.8em;
}
.button {
	display: inline-block;
	padding: 0.1em 1em;
	background: #eee;
	border: 1px solid #999;
	border-radius: var(--br);
	margin: 0.3em;
}
.button:hover {
	background: #ccc;
	text-decoration: none;
}