* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  --darkest-clr: rgb(30, 42, 43);
  --dark-clr: #324646;
  --lighter-theme-clr: rgb(197, 238, 248);
  --theme-clr: #547474;
  --theme-transp-clr: rgba(84, 116, 116, 0.6);
  --highlight-clr: rgb(255, 210, 86);
  --highlight-darker-clr: rgb(255, 187, 0);
  --highlight-transp-clr: rgba(255, 210, 86, 0.178);
}

html {
  font-size: 100%;
}

body {
  background-color: rgba(197, 238, 248, 0.219);
  color: var(--theme-clr);
  font-family: monospace;
  font-size: clamp(0.8em, 1em, 2vw);
  letter-spacing: 0.1ch;
}

h1 {
  font-weight: large;
  font-size: 1em;
  position: absolute;
  top: 5em;
  right: 3vw;
  text-align: end;
}

a {
  display: inline-block;
  background-color: var(--highlight-clr);
  border-radius: 0.2ch;
  letter-spacing: 0.2ch;
  padding: 0.2ch 0.2ch 0 0.2ch;
  text-decoration: none;
}

a:visited,
a:focus,
a:hover {
  background-color: inherit;
  color: var(--darkest-clr);
  font-weight: bold;
  text-decoration: underline var(--highlight-darker-clr) wavy 0.2ch;
  text-underline-offset: 0.2ch;
}

video {
  position: fixed;
  inset: 0;
  min-width: 100%;
  min-height: auto;
  z-index: -1;
}

button {
  position: absolute;
  background-color: var(--highlight-transp-clr);
  font-size: 1.5em;
  padding: 1.5ch;
  border-radius: 0.8ch;
  color: var(--highlight-darker-clr);
  text-shadow: 0.1ch 0.1ch 0.1ch var(--darkest-clr), 0.1ch 0.1ch 0.2ch var(--dark-clr), 0.2ch 0.2ch 0.1ch var(--theme-clr);
  bottom: 6vw;
  right: 4vw;
}

button:hover {
  background-color: var(--theme-transp-clr);
  color: var(--highlight-clr);
  text-shadow: 0.1ch 0.1ch var(--dark-clr), 0.1ch 0.1ch var(--theme-clr);
}