:root {
  --base: 16px;
  --rhythm: 1.618;
  --huge: calc(
    var(--base) * var(--rhythm) * var(--rhythm) * var(--rhythm) *
      var(--rhythm) * var(--rhythm)
  );
  --big: calc(var(--base) * var(--rhythm) * var(--rhythm) * var(--rhythm));
  font-size: var(--base);
  --small: calc(var(--base) / var(--rhythm));
  --black: #1a1a1a;
  --white: #f9f9f9;
  --grey: #ececec;
  --line-length: calc(23 * var(--rhythm) * var(--base));
}

@font-face {
  font-family: "Monopol";
  src:
    url("/css/Monopol.woff2") Format("woff2"),
    url("/css/Monopol.woff") Format("woff"),
    url("/css/Monopol.svg") format("svg"),
    local("☺");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Monopol";
  src:
    url("/css/MonopolLight.woff2") Format("woff2"),
    url("/css/MonopolLight.woff") Format("woff"),
    url("/css/MonopolLight.svg") format("svg"),
    local("☺");
  font-weight: 300;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Roboto", "Helvetica", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}

header {
  height: var(--big);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--black);
}

nav .menu {
  display: flex;
  justify-content: space-between;
}

nav .menu a {
  text-decoration: none;
  margin: 0 var(--small);
  font-family: Monopol;
  font-size: calc(var(--base) * var(--rhythm));
  font-weight: 300;
  color: var(--white);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main > div {
  width: var(--line-length);
}

main > div > p {
  padding-bottom: var(--small);
}

h1 {
  font-family: Monopol;
  font-size: var(--huge);
  font-weight: 300;
}

h2 {
  font-family: Monopol;
  font-size: var(--big);
  font-weight: 300;
}

address {
  font-style: normal;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 10rem;
  justify-content: space-around;
}

footer {
  display: flex;
  justify-content: center;
  padding-bottom: 1rem;
  font-family: Monopol;
}

tspan {
  font-family: Monopol;
  font-weight: 500;
  fill: var(--white);
  font-size: 110px;
}

tspan.tiny {
  font-weight: 300;
  fill: var(--grey);
}

rect {
  fill: var(--black);
}

@media screen and (max-width: 1000px) {
  :root {
    --base: 13px;
    --line-length: calc(18 * var(--rhythm) * var(--base));
  }
}

/* make confitional */
nav.dev {
  background-color: var(--white);
  position: fixed;
  top: 0;
  left: 50vw;
}
nav.dev details {
  padding: var(--small);
}