:root {
  --color-primary: rgb(131, 133, 153);
  --color-secondary: rgb(61, 68, 80);
  --color-white: #ffffff;
  --color-accent: #10325b;
}

@font-face {
  font-family: function;
  src: url('./Function Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

html {
  font-size: 10px;
  overflow-x: hidden;
  width: 100vw;
}

body {
  overflow-x: hidden;
  width: 100vw;
}

body {
  font-family: function;
  color: var(--color-secondary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

ul {
  position: relative;
}

li > p {
  display: inline;
}

a,
a:visited {
  color: var(--color-accent);
}

.no-wrap {
  white-space: nowrap;
}

.content {
  flex-grow: 1;
}

header {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

header h1,
header h2 {
  margin: 0;
  line-height: 1;
}

header h1 {
  font-size: 4.4rem;
}

header h2 {
  font-size: 3.4rem;
}

footer,
header {
  position: relative;
}

header {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: 1rem 2rem;
  margin-top: calc(10px + 2rem);
  margin-bottom: 2rem;
  left: 2rem;
}

header > span {
  padding-right: 2rem;
}

footer {
  right: 2rem;
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: 1rem 2rem;
  margin-top: calc(10px + 2rem);
  margin-bottom: 2rem;
}

footer > p {
  padding-left: 2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}

footer a:visited,
footer a {
  color: var(--color-white);
}

footer a:hover {
  color: var(--color-primary);
}

header::before,
footer > p::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  z-index: -1;
}

/* Larger than mobile screen */
@media (min-width: 40rem) {
}

/* Larger than tablet screen */
@media (min-width: 80rem) {
}

/* Larger than desktop screen */
@media (min-width: 120rem) {
}

@media (min-width: 65rem) {
  header {
    left: calc((100vw - 112rem) / -2);
  }

  header > span {
    padding-right: 0;
  }

  footer {
    right: calc((100vw - 112rem) / -2);
  }

  footer > p {
    padding-left: 0;
  }
}