hrtime/gen/style.css

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

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

html {
	color: var(--d);
	background-color: var(--w);

  	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  	font-feature-settings:normal;
  	font-variation-settings:normal

	font-size: 12pt;
	line-height: 1.5em;
	word-spacing: 0.04ch;

	overflow-x: hidden;

	height: 100%;
}

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

	height: 100%;
}

body > * {
	width: 100%;
	max-width: max(70ch, 60%);
	margin: 0 auto;
	margin-bottom: 1em;
}

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

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

	margin-bottom: 1rem;
}

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

header div {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#nav {
	position: relative;
}

#hamburger:hover, #hamburger:focus, #hamburger:active {
	cursor: pointer;
}

#nav img {
	padding: 0;
	margin: 0;
}

nav {
	position: absolute;
	display: none;

	z-index: 1;
	background-color: var(--w);
	right: 0px;
	top: 35px;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

nav a {
	display: block;

  	text-align: right;

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

	padding: 4px 4px 4px 0;
	margin: 0;
}

nav a:last-child {
	border-image-width: 2px 0 2px 0;
}

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

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

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

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

h1 {
	font-size: 24pt;
	font-weight: 700;
}

h1:not(header h1), h2 {
	margin: 0;
	padding-bottom: 0.5em;

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

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

.medication div {
	border-image: repeating-linear-gradient(to right,
		var(--b),      var(--b) 5px,  transparent 5px,  transparent 10px,
		var(--p) 10px, var(--p) 15px, transparent 15px, transparent 20px);
	border-image-width: 2px 0 0 0;
	border-image-slice: 1;

	padding: 1em;
}

.medication div:last-child {
	border-image-width: 2px 0 2px 0;
}

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;
}

textarea {
	max-width: calc(100% - 0.75em);
}