html {
  background-color: #141928;
  color: white;
  font-size: 1.2rem;
  font-family: sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

@font-face {
  font-family: "Rubik";
  src: url("./fonts/Rubik/Rubik-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Emoji";
  src: url("./fonts/Noto_Emoji/NotoEmoji-VariableFont_wght.ttf")
    format("truetype");
}

@font-face {
  font-family: "Rubik Mono One";
  src: url("./fonts/Rubik_Mono_One/RubikMonoOne-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik Black";
  src: url("./fonts/Rubik/static/Rubik-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik Vinyl";
  src: url("./fonts/Rubik_Vinyl/RubikVinyl-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik Italic";
  src: url("./fonts/Rubik/Rubik-Italic-VariableFont_wght.ttf")
    format("truetype");
}

:root {
  --slate: var(--bad);
  /* --slate: #1e1f22; */
  --pink: #ff00f6;
}

* {
  box-sizing: border-box;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

body {
  /* max-width: 800px; */
  /* margin: 0 auto; */
  padding: 0px;
  margin: 0px;
  max-height: 100%;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

header {
  max-width: 820px;
  margin: 0 auto;
  padding-left: calc(16px);
  padding-right: calc(16px);
  padding-bottom: 16px;
  width: 100%;
}

iframe {
  background-color: rgb(247, 248, 249);
  width: 100%;
  height: 100%;
}

a {
  color: var(--pink);
}

a:hover {
  color: white;
}