/* Colorscheme */
:root {
  --bg-page: #272e33;
  --bg-hover: #4f5b58;
  --bg-select: #83c092;
  --font-main: #d3c6aa;
  --font-header: #e67e80;
  --font-link: #a7c080;
  --font-label: #e69875;
  --active-link: #3c4841;
  --ui-borders: #859289;
}

/* General */
* {
  margin: 0;
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.5;
  font-family:
    "Roboto Mono", Consolas, "Lucida Console", monaco, "Courier New", monospace;
  color: var(--font-main);
  background-color: var(--bg-page);
}

html,
body {
  min-height: 100vh;
  min-width: 100vw;
}

/* Typography */
p {
  max-width: 120ch;
}

ul {
  list-style: none;
  padding: 0.2em;
}

ol {
  list-style-type: decimal;
  padding: 0.2em;
}

fieldset {
  border-radius: 5px;
  padding: 0;
  margin: 2px;
  border-width: 1px;
}

legend {
  margin: 0 auto;
  font-weight: bold;
  color: var(--font-label);
}

input {
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
  margin: 1.5rem 0 0 0;
  font-weight: bold;
  color: var(--font-header);
}

h1:before {
  content: "# ";
}

h2:before {
  content: "## ";
}

h3:before {
  content: "### ";
}

h4:before {
  content: "#### ";
}

h5:before {
  content: "##### ";
}

h6:before {
  content: "###### ";
}

h1:first-child {
  margin-top: 0;
}

li:hover,
li:hover *,
.logo:hover,
.hover-color:hover {
  color: var(--font-main);
  background-color: var(--bg-select);
  opacity: 0.99;
}

a {
  color: var(--font-link);
  text-decoration: none;
}

/* Layout */
.base-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100hw;
}

.base-top {
  display: flex;
  flex-direction: row;
  height: 96vh;
}

.base-bottom {
  display: flex;
  border-top: 1px solid var(--ui-borders);
  position: sticky;
  bottom: 0;
  height: 4vh;
}

.footer-layout {
  display: flex;
  position: sticky;
  bottom: 0;
  flex: 1;
  flex-direction: row;
  z-index: 1000;
  min-width: 100vw;
}

.left-footer {
  width: 30vh;
}

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

header {
  position: sticky;
  top: 0;
  width: 30vh;
}

main {
  border-left: 1px solid var(--ui-borders);
  padding-left: 2rem;
  width: 70vh;
}