:root {
  --accent-color: #23c089;
  --bg-light-color: #f0f0f0;
  --text-color: #443333;
  --text-lightest-color: #d0e0d0;
  --text-light-color: #bbccbb;
}

@font-face {
  font-family: "RobotoSlab";
  src: url("/fonts/RobotoSlab-Thin.woff2") format("woff2"),
    url("/fonts/RobotoSlab-Thin.woff") format("woff");
}

body {
  font-family: RobotoSlab, helvetica, sans-serif;
  color: var(--text-color);
  background: var(--bg-light-color);
  font-size: 16pt;
  text-transform: lowercase;
}

@media (max-width: 600px) {
  body {
    font-size: 12pt;
  }
}

::selection {
  background-color: var(--accent-color);
  color: var(--bg-light-color);
}

h1 {
  font-size: 4em;
}

h3 {
  font-size: 1.2em;
  margin: .2em 0;
}

ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.inverse {
  background-color: var(--accent-color);
  color: var(--bg-light-color);
}

.container {
  margin: auto;
  width: 300px;
}

@media (min-width: 600px) {
  .container {
    width: 560px;
  }
}

footer {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px dotted var(--text-light-color);
}

.header h1 a,
.header h1 a:visited,
.header h1 a:hover,
.header h1 a:active {
  text-decoration: none;
  color: #333;
}

h2.page-header {
  text-decoration: underline;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: #555;
}

::-webkit-scrollbar {
	border: none;
	width: 8px;
}
::-webkit-scrollbar:vertical {
	width: 8px;
}
::-webkit-scrollbar:horizontal {
	height: 8px;
}
::-webkit-scrollbar-track {
	background: var(--text-lightest-color);
}

::-webkit-scrollbar-thumb {
	background: var(--text-light-color);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--text-light-color);
}