:root {
  /* FONT SIZES */
  --font-size-text: 16px;
  --line-size-footer: 16px;

  /* LINE HEIGHTS */
  --line-height-text: 20px;

  /* FONT WEIGHTS */
  --font-weight-regular: 400;

  /* BASIC COLORS */
  --color-light-background: #f7f7fc;
  --color-light-text: #9696a2;
  --color-light-footer-text: #9696a2;
  --color-light-primary: #5d20d5;
  --color-light-link: #834be5;

  --color-dark-background: #282c34;
  --color-dark-text: #fcfcfd;
  --color-dark-footer-text: #9696a2;
  --color-dark-primary: #834be5;
  --color-dark-link: #aa76f6;

  --gradient-magenta: rgb(232, 61, 251);
  --gradient-violet: rgb(170, 118, 246);
  --gradient-cyan: rgb(0, 212, 255);

  --gradient: linear-gradient(
    45deg,
    var(--gradient-magenta) 0%,
    var(--gradient-violet) 50%,
    var(--gradient-cyan) 100%
  );
}

html {
  font-family: 'Albert Sans', sans-serif;
  min-height: 100dvh;
  background: var(--color-light-background);
  font-weight: var(--font-weight-regular);
  color: var(--color-light-text);
  font-optical-sizing: auto;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-width: 360px;
}
main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 100dvh;
}

/*** CONTAINERS ***/
header {
  margin: 0 auto 16px;
  display: flex;
  flex-direction: column;
}
header object {
  pointer-events: none;
  height: 60px;
}
section {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
}
article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  padding: 32px;
  justify-content: center;
  width: calc(100% - 64px);
}
footer {
  display: flex;
  width: calc(100% - 64px);
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: space-between;
  padding: 32px;
  color: var(--color-light-footer-text);
  font-size: var(--font-size-footer);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-regular);
}
footer span a {
  margin-left: 24px;
}

/*** COMPONENTS ***/
header svg path {
  fill: var(--color-light-primary);
}
p {
  color: var(--color-light-text);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
}
a {
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  background: var(--color-light-link);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
a:active,
a:focus,
a:hover {
  background: var(--gradient);
  background-clip: text;
}

header svg path.sign {
  transition: transform 0.25s ease-in-out;
  transform-origin: 36px 36px;
  animation-duration: 4s;
  animation-name: rotate;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  40% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0);
  }
}

/*** MEDIA QUERIES ***/

@media (max-width: 720px) {
  footer {
    width: calc(100% - 48px);
    padding: 32px 24px;
  }
  footer span a {
    margin-left: 12px;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    background: var(--color-dark-background);
  }
  header svg path {
    fill: var(--color-dark-primary);
  }
  html,
  p {
    color: var(--color-dark-text);
  }
  footer {
    color: var(--color-dark-footer-text);
  }
  a {
    background: var(--color-dark-link);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}