@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

:root {
  --gradient-one: #30cfd0;
  --gradient-two: #330867;
  --bg-color: #ffffff;
  --links: #000000;
}

body {
  text-align: center;
  font-family: "Poppins", sans-serif;
  background-color: var(--bg-color);
}

[data-theme="light"] {
  --gradient-one: #30cfd0;
  --gradient-two: #330867;
  --bg-color: #ffffff;
  --links: #000000;
  color: black;
}

[data-theme="dark"] {
  --gradient-one: rgba(245, 107, 244, 0.79);
  --gradient-two: #efad05;
  --bg-color: #21232f;
  --links: #FFFFFF;
  color: white;
}

.container h1 {
  background: linear-gradient(
    to right,
    var(--gradient-one) 0%,
    var(--gradient-two) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 350ms ease-in-out;
}

@media screen and (min-width: 768px) {
.container {
  width: 50%;
  margin: auto;
  padding: 100px 0;
}
.container h1 {font-size: 3em;}
}