hrt.git

:root {
	--w: #F6F7F7;
	--d: #000000;
	--b: #2BD2FF;
	--p: #FC9DB8;
	--g: #545454;
	--h: #54545450
}

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

html {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 16pt;

	line-height: 1.5em;
	word-spacing: 0.04ch;

	overflow-x: hidden;

	color: var(--d);
	background-color: var(--w);
}

body {
	margin: 0;
	padding: 0 1em;
	overflow-x: hidden;
}

body > * {
	width: 100%;
	max-width: 70ch;
	margin: 0 auto;
}

header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	vertical-align: middle;
	align-items: center;

	border-image: repeating-linear-gradient(to left,
	transparent, transparent 5px, var(--b) 5px, var(--b) 10px,
	transparent 10px, transparent 15px, var(--p) 15px, var(--p) 20px);
	border-image-width: 0 0 3px 0;
	border-image-slice: 1;

	margin-bottom: 1.5rem;
}

header img {
	margin: 1rem 1rem 1rem 0;
}

header h1 {
	line-height: 2rem;
	font-weight: 400;
}

header div {
	display: flex;
	flex-direction: row;
	justify-content: space-after;
	vertical-align: middle;
	align-items: center;
}

div > * {
	flex: 1;
}

nav {
	display: flex;
	flex-direction: row;

	gap: 0.75ch;
	padding: 0.5em 0;
}

nav a, footer a {
	padding: 0;
	border-bottom: none;
	color: var(--d);
}

nav a {
	margin-left: 1em;
}

nav a:last-child {
	padding: 0;
	margin: 0;
	padding-inline-end: 0;
	border: none;
}

nav a:last-child::after {
	content: ' ';
	border-image: repeating-linear-gradient(to bottom,
	transparent, transparent 5px, var(--b) 5px, var(--b) 10px,
	transparent 10px, transparent 15px, var(--p) 15px, var(--p) 20px);
	border-image-width: 0 0 0 3px;
	border-image-slice: 1;

	margin-inline-start: 1.5ch;
	padding: 0.5em 0 0.5em 3px;
}

footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	border-image: repeating-linear-gradient(to left,
	transparent, transparent 5px, var(--b) 5px, var(--b) 10px,
	transparent 10px, transparent 15px, var(--p) 15px, var(--p) 20px);
	border-image-width: 3px 0 0 0;
	border-image-slice: 1;

	margin-top: 2em;
	padding: 1em 0;
}

section + section {
	margin-top: 2.5em;
}

a {
	color: var(--d);
	text-decoration: none;

	transition-property: color;
	transition-duration: 0.5s;
}

a {
	border-image: repeating-linear-gradient(to left,
	transparent, transparent 5px, var(--b) 5px, var(--b) 10px,
	transparent 10px, transparent 15px, var(--p) 15px, var(--p) 20px);
	border-image-width: 0 0 2px 0;
	border-image-slice: 1;
}

a:hover, a:focus, a:active {
	color: var(--g);
}

h1:not(header h1) {
	font-size: 2rem;
	font-weight: 400;

	display: inline;

	border-image: repeating-linear-gradient(to left,
	transparent, transparent 5px, var(--b) 5px, var(--b) 10px,
	transparent 10px, transparent 15px, var(--p) 15px, var(--p) 20px);
	border-image-width: 0 0 3px 0;
	border-image-slice: 1;

	margin: 1.5rem 0 1rem;
	padding-bottom: 0.25rem;
}

h2 {
	font-size: 1.5rem;
	font-weight: 400;

	display: inline;

	border-image: repeating-linear-gradient(to left,
	transparent, transparent 5px, var(--b) 5px, var(--b) 10px,
	transparent 10px, transparent 15px, var(--p) 15px, var(--p) 20px);
	border-image-width: 0 0 3px 0;
	border-image-slice: 1;

	margin: 1.5rem 0 1rem;
	padding-bottom: 0.25rem;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul li::before {
	content: "–";
	margin: 0.25em 0;
	padding-right: 1em;
}

ul li {
	position: relative;
	left: 1.5em;
	margin: 0.25em 1.5em 0.25em 0;
	text-indent: -1.5em;
}

table {
	overflow: scroll;
	display: inline-block;
	max-width: 70ch;
	padding-bottom: 10px;
}

td {
	white-space: nowrap;
	padding: 0 5px;
}

div:not(header div) {
	padding: 0;
	margin: 0;
	border: 0;
}

h2, p {
}

h1 {
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}