:root[data-theme='light'] {
  --background: #ffffff;
  --text-color: #000000;
}

:root[data-theme='dark'] {
  --background: #000000;
  --text-color: #ffffff;
}

body {
  background: var(--background);
  color: var(--text-color);
  min-height: 100vh;
  justify-content: center;
  padding: 8% 2%;
  display: grid;
}

h1 {
  font-size: calc(12px + 2vh);
}

h2 {
  font-size: calc(6px + 2vh);
}

a {
  color: dodgerblue;
  animation: flashing 0.4s;
}

a:hover {
  color: black;
  text-decoration: none;
}

.pro {
  color: green;
}

.separator {
  margin: 1.5rem 0;
  border: 1px solid transparent;
}

.separator-sm {
  margin: 0.8rem 0;
  border: 1px solid transparent;
}

.separator-border {
  margin: 2rem 0;
  border: 1px solid #00000016;
}

@keyframes flashing {

  0%,
  100% {
    opacity: 0.5;
    color: dodgerblue;
  }

  50% {
    opacity: 1;
    color: black;
  }
}