html {
  font-size: 11px;
  height: 100%;
  min-height: 100%;
  font-family: '-apple-system,BlinkMacSystemFont,"avenir next",avenir,"helvetica neue",helvetica,ubuntu,roboto,noto,"segoe ui",arial,sans-serif';
}
body {
  margin: 0;
}
:root {
  --gray-900: #1a202c;
  --gray-800: #2d3748;
  --gray-700: #4a5568;
  --gray-600: #718096;
  --gray-500: #a0aec0;
  --gray-400: #cbd5e0;
  --gray-300: #e2e8f0;
  --gray-200: #edf2f7;
  --gray-100: #f7fafc;
  --red-100: #fff5f5;
  --red-200: #fed7d7;
  --red-300: #feb2b2;
  --red-400: #fc8181;
  --red-500: #f56565;
  --red-600: #e53e3e;
  --red-700: #c53030;
  --red-800: #9b2c2c;
  --red-900: #742a2a;
  --blue-100: #ebf8ff;
  --blue-200: #bee3f8;
  --blue-300: #90cdf4;
  --blue-400: #63b3ed;
  --blue-500: #4299e1;
  --blue-600: #3182ce;
  --blue-700: #2b6cb0;
  --blue-800: #2c5282;
  --blue-900: #2a4365;
  --white: white;
  --red: #f56565;
  --text-decoration-color: var(--gray-400);
  --text-color: var(--gray-800);
  --focus-ring-color: var(--blue-500);
}
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: var(--gray-900);
    caret-color: white;
  }
  h2
  {
    color: var(--blue-400);
  }
  h1 {
    color: #f7fafc;
  }
  footer {
    color: #bee3f8;
  }
}

h2
{
  color: var(--blue-700);
}
h1 {
  font-size: 5vh;
  color: var(--gray-800);
  margin: 0;
  height: 5vh;
  text-align: center;
}
footer {
  color: var(--blue-700);
  height: 3vh;
  margin: 0;
  text-align: center;
}
iframe {
  width: 100%;
  height: 92vh;
  margin: 0;
}