:root {
  --primary: hsl(197, 94%, 41%);
  --primary-dark: hsl(197, 94%, 30%);
  --primary-darker: hsl(197, 74%, 15%);
  --primary-light: hsl(197, 33%, 65%);
  --primary-lighter: hsl(197, 33%, 83%);

  --main-bg-color: white;
  --main-text-color: black;

  --bg-length: max(35vw, 35vh);
  --max-width: 612px;

  /* https://grtcalculator.com/ Input: Font: Arial; Font Size: 18px; Content Width: 612px */
  --font-size-1: 14px;
  --font-size-2: 18px;
  --font-size-3: 23px;
  --font-size-4: 29px;
  --font-size-5: 37px;
  --font-size-6: 47px;
  --font-size-7: 60px;

  --line-height-1: 24px;
  --line-height-2: 30px;
  --line-height-3: 37px;
  --line-height-4: 46px;
  --line-height-5: 58px;
  --line-height-6: 72px;
  --line-height-7: 92px;

  --spacing-1: 4px;
  --spacing-2: 7px;
  --spacing-3: 12px;
  --spacing-4: 19px;
  --spacing-5: 30px;
  --spacing-6: 49px;
  --spacing-7: 78px;

  --border-radius: var(--spacing-1);

  --font-size-primary: var(--font-size-3);
  --line-height-primary: var(--line-height-3);
  --font-size-title: var(--font-size-7);
  --line-height-title: var(--line-height-7);
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: black;
    --main-text-color: white;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--main-text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  font-size: var(--font-size-primary);
  line-height: var(--line-height-primary);
}
html {
  background-color: var(--main-bg-color);
  overflow-x: hidden;
}
div {
  box-sizing: border-box;
}
h1 {
  margin: 0;
}
a:link,
a:visited,
a:active {
  color: var(--main-text-color);
  text-decoration: none;
}
a:hover {
  color: var(--primary-dark);
  text-decoration: underline dotted;
}

@media (prefers-color-scheme: dark) {
  a:hover {
    color: var(--primary-light);
  }
}

#main {
  width: 99%;
  max-width: var(--max-width);
  margin: 0 auto;

  border-radius: var(--border-radius);
  backdrop-filter: blur(10px);
  position: relative;
}

@keyframes color-cycle {
  from {
    background-color: var(--primary);
    transform: translateX(20%);
  }
  25% {
    background-color: var(--primary-darker);
    transform: translateX(50%);
  }
  50% {
    background-color: var(--primary);
    transform: translateX(80%);
  }
  75% {
    background-color: var(--primary-light);
    transform: translateX(50%);
  }
  to {
    background-color: var(--primary);
    transform: translateX(20%);
  }
}
#main:before {
  content: '';
  position: absolute;
  width: var(--bg-length);
  height: var(--bg-length);
  left: calc(var(--bg-length) * -0.5);
  top: calc(var(--bg-length) * -0.5);
  background-color: var(--primary);
  transform: translateX(20%);
  opacity: 0.5;
  filter: blur(calc(var(--bg-length) * 0.5));
  pointer-events: none;
  animation: color-cycle 10s ease-in-out 0s infinite;
  will-change: background-color transform;
  border-radius: 50%;
  z-index: -1;
}
#main-header {
  padding: 0;
  margin-top: var(--spacing-7);
  text-align: center;
}
#main-header-title {
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
}
#main-content {
  margin-top: var(--spacing-7);
  padding: 0 var(--spacing-6);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#main-content > .element {
  padding: var(--spacing-1) var(--spacing-2);
  flex: 1;
  text-align: center;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;

  backdrop-filter: blur(10px);
  background-color: hsla(197, 94%, 41%, 0.25);
}
.element:focus-visible {
  outline: var(--primary) solid 1px;
  outline-offset: var(--spacing-1);
}
#main-content > .element + .element {
  margin-left: var(--spacing-5);
}

@media (max-width: 612px) {
  :root {
    --font-size-primary: var(--font-size-2);
    --line-height-primary: var(--line-height-2);
    --font-size-title: var(--font-size-6);
    --line-height-title: var(--line-height-6);
  }
  #main-header {
    margin-top: var(--spacing-6);
  }
  #main-content {
    margin-top: var(--spacing-6);
  }
}