@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Sans:ital@0;1&display=swap");

:root {
	--fg: hsl(220, 35%, 15%);
	--bg: hsl(220, 35%, 95%);
}

html {
	box-sizing: border-box;
	background-color: var(--bg);
	color: var(--fg);
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 16px;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	color: inherit;
}

body {
	line-height: 1.5;
	font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-weight: normal;
	&.thin {
		margin: 0;
	}
}

ul {
	list-style-type: "▸  ";
}

/* LAYOUT */

header {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: min(30vh, 200px) auto 32px auto;

	h1 {
		margin: 0;
		min-width: 0;
	}

	nav {
		flex-shrink: 0;
	}
}

header.header--slim {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	margin: 16px auto;
	width: min(90%, 161ch);
}

main {
	margin: 0 auto;
}

main.main--fw {
	width: 90%;
}

footer {
	margin: 100px auto 0 auto;
	border-top: 1px solid var(--fg);
	padding: 1rem 0;
}

body > header,
body > main,
body > footer {
	width: min(90%, 80ch);
}

/* INPUT COMPONENTS */

button {
	background-color: var(--bg);
	border: 1px solid var(--fg);
	border-bottom: 2px solid var(--fg);
	cursor: pointer;
	padding: 2px 16px 2px 16px;

	&:hover {
		border-bottom: 3px solid var(--fg);
		padding-bottom: 1px;
	}

	&:active {
		background-color: var(--fg);
		color: var(--bg);
	}
}

button[disabled] {
	border-bottom: 1px solid var(--fg);
	padding-bottom: 3px;
	cursor: default;

	&:active {
		background-color: var(--bg);
		color: var(--fg);
	}
}

/* TABLE */

table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fg);
	border-left: 3px solid var(--fg);
}

th,
td {
	border-bottom: 1px solid var(--fg);
	padding: 2px 8px;
	vertical-align: top;
	line-height: 1.5;
}

td.td--right {
	text-align: right;
}

td.td--center {
	text-align: center;
}

.table-col--min-width {
	width: 1px;
	whitespace: nowrap;
}