@import "/css/balloon.css";
@import "/css/magic-text.css";
@import "/css/nav.css";
@import "/css/buttons.css";

:root {
  --bkg: #252627;
  --fg: #181818;
  --fg-hover: #4cc9f0;
  --fg-selected: #4361ee;
  --txt: #F2EFE9;
  --card: #ffffff;
  --empty: #00000000;

  --link-link: hsl(236, 100%, 70%);
  --link-visited: hsl(281, 100%, 70%);

  --nav-bkg: hsl(276, 100%, 25%);
  --nav-fg: hsl(276, 100%, 75%);
  --nav-emp: hsl(276, 100%, 50%);
  --fire-bkg: hsl(0, 100%, 25%);
  --fire-fg: hsl(0, 100%, 75%);
  --fire-emp: hsl(0, 100%, 50%);
  --water-bkg: hsl(210, 100%, 25%);
  --water-fg: hsl(210, 100%, 75%);
  --water-emp: hsl(210, 100%, 50%);
  --air-bkg: hsl(159, 100%, 25%);
  --air-fg: hsl(159, 100%, 75%);
  --air-emp: hsl(159, 100%, 50%);
  --earth-bkg: hsl(25, 76%, 25%);
  --earth-fg: hsl(25, 76%, 75%);
  --earth-emp: hsl(25, 76%, 50%);
  --human-bkg: hsl(73, 93%, 25%);
  --human-fg: hsl(73, 93%, 75%);
  --human-emp: hsl(73, 93%, 50%);
}

* {
  margin: 0;
}

body {
  background-color: var(--bkg);
  font-family: "OpenSans", Arial, sans-serif;
}

@font-face {
  font-family: "OpenSans";
  src: url("/font/opensans-variablefont_wdthwght-webfont.eot");
  src: url("/font/opensans-variablefont_wdthwght-webfont.woff") format("woff"),
  url("/font/opensans-variablefont_wdthwght-webfont.svg") format("svg");
  }

.main {
  color: var(--txt);
  font-size: 125%;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  text-align: center;
  max-width: fit;
  overflow: hidden;
}

.main h1 {
  margin-top: 1em;;
}

html, body {
  height: 100%;
}

.noscript {
  background-color: #ff0000;
  margin: 0;
  font-size: 125%;
  color: var(--txt);
  z-index: -1;
}