html {
  --dark-text: rgb(194, 190, 210);
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--dark-text);
    background-color: rgb(29, 27, 35);
  }

  a {
    color: var(--dark-text)
  }
}

body {
  margin: 10px;
  font-family: "Open Sans", sans-serif;
}

main {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-around;
  padding: 4rem;
}

/* Mobile */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px) {
  main {
    flex-direction: column;
    padding: 2rem;
  }
}

.fancy {
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
  &:after {
    --deco-height: 0.3125em;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--deco-height) * -0.625);
    height: var(--deco-height);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%2300FDCF' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: auto 100%;
    background-repeat: round;
    background-position: 0em;
  }
}