/**
 * Josh's Custom CSS Reset
 * https://www.joshwcomeau.com/css/custom-css-reset/
 */
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}

/**
 * Fonts
 * Kreon 400+600 and ShareTechMono
 */
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Kreon-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/Kreon-SemiBold.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/ShareTechMono-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  background-image: url(./images/mycelium.png);
  background-color: #000;
  color: #fff;
}

iframe {
  border: 0px;
  outline: none;
}

main {
  text-align: center;
}

header {
  text-align: center;
  margin: 40px 0 40px 0;
}

header > h1 {
  font-family: 'Kreon', serif;
  font-weight: 400;
  font-size: 80px;
  margin: 0;
}

header > h2 {
  font-family: 'Share Tech Mono', monospace;
  font-weight: 400;
  font-size: 30px;
  margin: 0;
}

header > h2 > span {
  color: #000;
  background-color: #ffe893;
}

footer {
  margin: 40px 0 40px 0;
  text-align: center;
}

footer > p {
  font-family: 'Share Tech Mono', monospace;
  font-size: 18px;
  width: 500px;
  margin: 20px auto 20px;
}

a {
  color: #ffe893;
  text-decoration: none;
  transition: all 100ms linear;
}

a:hover, a:active {
  color: #000;
  background-color: #ffe893;
}