:root {
    --gradient: linear-gradient(90deg, #ee6352, #aa77c3, #23BAC4);

  }

  body {
    font-family: basic-sans, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.125em;
    line-height: 1.4;
    color: #333;
    background: #ddd;
    background-size: 300%;
    background-image: var(--gradient);
    animation: bg-animation 5s infinite;
  }

  @keyframes bg-animation {
    0% {background-position: left}
    50% {background-position: right}
    100% {background-position: left}
  }

  .content {
    width: 70vw;
    padding: 2em;
  }

  @font-face {
    font-family: 'Pacifico-Regular';
    src: url('fonts/Pacifico-Regular.ttf');
  }

  @font-face {
    font-family: 'Quicksand-Light';
    src: url('fonts/Quicksand-Light.ttf');
  }

  @font-face {
    font-family: 'Quicksand-Regular';
    src: url('fonts/Quicksand-Regular.ttf');
  }

  @font-face {
    font-family: 'Quicksand-Medium';
    src: url('fonts/Quicksand-Medium.ttf');
  }

  @font-face {
    font-family: 'Quicksand-Bold';
    src: url('fonts/Quicksand-Bold.ttf');
  }

  h1 {
      color: antiquewhite;
      font-family: 'Quicksand-Regular';
      font-size: 1.8em;
  }

  abbr {
    font-family: 'Pacifico-Regular';
    font-size: 40px;
    text-decoration: none;
    cursor: default;
  }


  h3 {
    font-family: 'Quicksand-Medium';
  }

  p {
    font-family: 'Quicksand-Regular';
  }

  .icons {
    font-size: 1.5em;
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    list-style: none;
    margin-left: -40px;
  }

  .icons a {
    text-decoration: none;
  }

  .icons li {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    margin-right: 15;
  }

  .copyright {
    margin-top: 200px;
    text-align: center !important;
    font-family: 'Quicksand-Light';
    font-size: 15px;
  }