body {
  --background-color: #f3f3f3;
  --text-color: black;
  --grad1-color: rgb(202, 25, 25);
  --grad2-color: rgb(129, 43, 210);
  --grad3-color: rgb(92, 172, 131);
}

@media (prefers-color-scheme: dark) {
  body {
    --background-color: black;
    --text-color:white;
    --grad1-color: rgb(255, 119, 119);
    --grad2-color: rgb(166, 139, 247);
    --grad3-color: rgb(43, 202, 210);
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  text-align: justify;
  font-size: 1.5rem;
  font-family: sans-serif;
}

h1 {
  text-align: center;
  font-family: sans-serif;
  background: linear-gradient(to right, var(--grad1-color), var(--grad2-color) 50%, var(--grad3-color) 70%);
  background-clip: text;
  color: transparent;
}

h2 {
  text-align: justify;
  font-family: sans-serif;
  background: linear-gradient(to right, var(--grad1-color), var(--grad2-color) 50%, var(--grad3-color));
  background-clip: text;
  color: transparent;
}

.container {
  margin: 2em auto;
  margin-left: 10%;
  margin-right: 10%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}