body {
  padding-left: 5em;
  padding-top: 5em;
  max-width: 70%;
}

h1 {
  color: var(--accent-dark);
  font-family: "Cinzel Decorative";
  font-size: 40px;
  font-weight: normal;
  line-height: 1;

  max-width: 600px;

  padding-bottom: 25px;
  margin-bottom: 30px;

  border-bottom: 1px solid var(--accent);
}

h1::first-letter {
  font-size: 55px;
}

a {
  font-family: "Crimson";
  font-weight: normal;
  text-decoration: none;
  font-size: 1.8em;

  color: var(--url);
}

a::before {
  content: "◆";
  font-size: 0.5em;
  padding-right: 3px;
  position: relative;
  bottom: 4px;
}

a:hover {
  animation: glow 0.2s ease-in-out both;
}
html {
  height: 100%;
  box-shadow: inset 0 0 100px #02020470;
}

* {
  filter: drop-shadow(20px 0 3px rgba(95, 95, 153, 0.36));
}

/* animations */

@keyframes glow {
  from {
    font-weight: normal;
  }

  to {
    filter: drop-shadow(0.5px 0.5px 2px);
  }
}

/* small screens */

@media (max-width: 600px) {
  body {
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    max-width: unset;
  }
}