:root {
  --gradient-1: #928c8c;
  --gradient-2: #ffffff;
}

[data-theme="dark"][data-contrast="high"] {
  --gradient-1: #ebebeb;
  --gradient-2: #ffffff;
}

[data-theme="light"] {
  --gradient-1: #000000;
  --gradient-2: #8d8b8b;
}

[data-theme="light"][data-contrast="high"] {
  --gradient-1: #000000;
  --gradient-2: #2e2c2c;
}

h1.title {
  font-size: 3em;

  background: linear-gradient(
    to top,
    var(--gradient-1),  
    var(--gradient-2)
  );
  
  background: linear-gradient(
    to top in oklch,
    var(--gradient-1),  
    var(--gradient-2)
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  background-clip: text;
  color: transparent;

  transition: background .3s ease;
}

h2.seperator {
  margin-top: 2em;
}

p#subtitle {
  margin-bottom: 2em;
  margin-top: -2em;
}

.grid {
  margin-top: 2em;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.4em;
  font-weight: 900;
  column-gap: 2em;
  column-count: 2;
  gap: 1em;
}

a.button {
  color: var(--text);
  text-decoration: underline;
}

a.button:visited {
  color: var(--text);
}