@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Germania+One&display=swap');

:root {
  --body-color: #ffcd39;
  --body-background-color-light: #084298;
  --body-background-color-dark: #031633;
  --grid-gap: 40px;

  color-scheme: light dark;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  color: var(--body-color);
  background-color: light-dark(
    var(--body-background-color-light),
    var(--body-background-color-dark)
  );
  font-family: 'Bungee', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

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

img {
  max-width: 100%;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: var(--grid-gap);
  height: calc(100dvh - (var(--grid-gap) * 2));
  margin: var(--grid-gap);
}

header {
  align-self: center;
}

header h1 {
  margin: 0;
  font-size: 7.2rem;
  line-height: 1;
}

header h1 img {
  width: 100%;
  height: 100%;
  max-width: 400px;
}

footer {
  align-self: end;
  line-height: normal;
}

footer p {
  margin: 0;
}

footer p span {
  white-space: nowrap;
}

footer a {
  white-space: nowrap;
}