html {
      font-family: 'Lato', Helvetica, sans-serif;
    }

    body {
      margin: 0;
      padding: 0;
    }

    #app {
      width: 660px;
      display: inline-block;
      text-align: center;
      color: #A663CC;
      background-color: #fff;
    }

    .banner {
      height: 350px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: #fff;
    }

    .banner:before {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 350px;
      content: '';
      opacity: .7;
      background-color: #222;
    }

    .banner-link {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 1;
    }

    .banner-link>p {
      color: white;
      margin: 0;
    }

    .banner-link>p>a {
      color: white;
      text-decoration: none;
      font-size: 1.8em;
      font-weight: bold;
    }

    .title {
      font-size: 2.33em;
      color: #fff;
      text-transform: uppercase;
      word-wrap: break-word;
      text-align: center;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .title>h1 {
      margin: 0;
    }

    .content-holder {
      text-align: center;
      background-size: contain;
    }

    #app>h2 {
      color: #6F2DBD;
      }

    li {
      list-style-type: none;
          }
  
    body:after {
            content: 'Designed by Calisaurus 2021';
            text-align: center;
            color: white;
            background-color: #333;
            padding: 20px;
            display: block;
    }