/*
  meta
*/
::selection {
  background: var(--color-yellow);
  color: var(--color-background);
}

/*
  fonts
*/
@font-face {
  font-family: "Fira Code VF";
  font-style: normal;
  font-weight: 300 700;
  src: url(fonts/fira-code-latin-wght-normal.woff2) format("woff2-variations");
}

/*
  general
*/
html,
* {
  font-family: "Fira Code VF", monospace;
  font-size: var(--base-size);
  color: var(--color-white);
}

html {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
}

body {
  margin: 0;
  padding: var(--base-size);
  height: calc(100vh - var(--base-size) * 2);
  overflow: hidden;
}

header {
  position: absolute;
  padding: calc(var(--base-size) * 0.5) var(--base-size);
  top: 0;
  right: 0;
  text-align: right;
  max-width: 30vw;
  min-width: 30vw;
}

header,
header * {
  font-size: calc(var(--base-size) * 0.8);
  color: var(--color-black);
}

/*
  sections
*/
main {
  position: absolute;
  bottom: var(--base-size);
  top: auto;
}

section {
  transition: display var(--transition-duration),
  opacity var(--transition-duration);
  display: none;
  opacity: 0;
  max-width: 60vw;
}

code {
  font-size: var(--base-size);
  font-style: italic;
  color: var(--color-yellow);
}

a {
  color: var(--color-black);
  text-decoration-color: var(--color-black-darker);
}

/*
  footer
*/
footer {
  position: absolute;
  bottom: var(--base-size);
  right: var(--base-size);
  text-align: left;
  max-width: 30vw;
  min-width: 30vw;
}

footer > div {
  position: relative;
  margin: calc(var(--base-size) * 0.25) 0 0 0;
  padding: calc(var(--base-size) * 0.5) var(--base-size);
  line-height: 2;
  border-radius: calc(var(--base-size) * 0.2);
  background-color: var(--color-yellow);
  color: var(--color-background);
  transition: display var(--transition-duration),
    opacity var(--transition-duration);
  display: none;
  opacity: 0;
}

footer > div,
footer > div * {
  font-size: calc(var(--base-size) * 0.8);
}

footer > div kbd {
  background-color: var(--color-white);
  color: var(--color-black);
  padding: calc(var(--base-size) * 0.2) calc(var(--base-size) * 0.4);
  border-radius: calc(var(--base-size) * 0.2);
  border-bottom: 1px solid var(--color-black);
}

/*
  utilities
*/
.no-transition {
  transition: none;
}