body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-display: swap;
  height: 100%
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

html, body, #root{
  height: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}

.loader {
  animation: spin infinite 20s linear;
  height: 80px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* https://www.w3schools.com/css/css3_fonts.asp */
@font-face {
  font-display: swap;
  font-family: 'GothamBlack';
  src: local('GothamBlack'), url(fonts/Gotham/GothamBlack.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamBlack-Italic';
  font-style: 'italic';
  src: local('GothamBlack-Italic'), url(fonts/Gotham/GothamBlack-Italic.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamBook';
  font-weight: 500;
  src: local('GothamBook'), url(fonts/Gotham/GothamBook.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamBook-Italic';
  font-style: 'italic';
  src: local('GothamBook-Italic'), url(fonts/Gotham/GothamBook-Italic.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamExLight';
  src: local('GothamExLight'), url(fonts/Gotham/GothamExLight.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamExLight-Italic';
  font-style: 'italic';
  src: local('GothamExLight-Italic'), url(fonts/Gotham/GothamExLight-Italic.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamLight';
  src: local('GothamLight'), url(fonts/Gotham/GothamLight.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamLight-Italic';
  font-style: 'italic';
  src: local('GothamLight-Italic'), url(fonts/Gotham/GothamLight-Italic.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamMediun';
  src: local('GothamMediun'), url(fonts/Gotham/GothamMediun.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamMediun-Italic';
  font-style: 'italic';
  src: local('GothamMediun-Italic'), url(fonts/Gotham/GothamMediun-Italic.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamThin';
  src: local('GothamThin'), url(fonts/Gotham/GothamThin.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamThin-Italic';
  font-style: 'italic';
  src: local('GothamThin-Italic'), url(fonts/Gotham/GothamThin-Italic.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamUltra';
  src: local('GothamUltra'), url(fonts/Gotham/GothamUltra.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamUltra-Italic';
  font-style: 'italic';
  src: local('GothamUltra-Italic'), url(fonts/Gotham/GothamUltra-Italic.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamBold';
  font-weight: bold;
  src: local('GothamBold'), url(fonts/Gotham/GothamBold.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: 'GothamBold-Italic';
  font-style: 'italic';
  font-weight: bold;
  src: local('GothamBold-Italic'), url(fonts/Gotham/GothamBold-Italic.otf) format("opentype");
}