:root {
  --color-background: #edf2f7;
  --color-black: #1e1c1c;
  --color-gray: #212121;
  --color-yellow-light: #faf089;
  --color-yellow-dark: #f6e05e;
}

html {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
}

body {
  font-family: "Red Hat Display", Helvetica, Arial, sans-serif;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  background-image: linear-gradient(
    45deg,
    hsl(6deg 38% 95%) 0%,
    hsl(12deg 100% 95%) 11%,
    hsl(20deg 100% 93%) 22%,
    hsl(27deg 100% 91%) 33%,
    hsl(33deg 100% 89%) 44%,
    hsl(38deg 100% 86%) 56%,
    hsl(43deg 100% 84%) 67%,
    hsl(46deg 100% 81%) 78%,
    hsl(49deg 100% 79%) 89%,
    hsl(55deg 92% 76%) 100%
  );
  flex: 1;
  justify-content: center;
  align-items: center;
}

body > main {
  display: flex;
  flex: 1;
}

*,
all {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  padding: 2rem;
}

header > img {
  max-height: 4rem;
}