* {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

h1 {
  margin: 0 0 2rem 0;
  font-size: 4rem;
}
p {
  margin: 0 0 0.25rem 0;
}
body {
  padding: 0;
  margin: 0;
  background: #222;
}

.wrap {
  padding: 30px;
}

.external {
  position: absolute;
  top: 30px;
  right: 30px;
}
.external a {
  opacity: 0.5;
}
.external a:hover {
  opacity: 1;
}
.external a img {
  width: 24px;
  height: 24px;
}

.intro {
  color: #e85d6f;
  font-weight: bold;
  background-color: #e85d6f;
  font-size: 2rem;
  background-image: linear-gradient(to top, #b648b0, #e85d6f, #ec813f);
  background-clip: text;
  background-size: 100%;
  background-repeat: repeat;
  -webkit-box-decoration-break: clone;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  text-shadow: 0px 0px rgba(0, 0, 0, 0);
}

.links {
  font-size: 1rem;
  margin: 3rem 0 0 0;
  list-style: none;
  padding: 0;
}

.links a,
.links span {
  color: #666;
  text-decoration: none;
  font-weight: bold;
}
.links a:hover {
  color: #ccc;
}

footer {
  color: #666;
  font-weight: bold;
  margin-top: 3rem;
}

@media screen and (min-width: 20rem) {
  .intro p {
    font-size: 8vw;
  }
  .links {
    font-size: 6vw;
  }
}
@media screen and (min-width: 36rem) {
  .wrap {
    padding: 3rem;
  }
  .external {
    top: 3rem;
    right: 3rem;
  }
  .intro p {
    font-size: 3rem;
  }
  .links {
    font-size: 2rem;
  }
}