<p>
    <div class="headline">
       Web controls <br>        <strong>everything!</strong></br>
    </div>

   <br> </br>

    <div class="subtitle">
      <em>Never</em> forget this.
    </div>

    <br> </br>

  <div id="body">
    <div class="list">
       How, you might ask?
    </div>

     <hr>

    <div class= "list-items">
      <span style="--color:#fff;">it</span>
      <span style="--color:#fff;">just</span>
      <span style="--color:#fff;">does</span>
    </div>
  </div>

   <br> </br>

  <button type="submit">Yes</button>
  <button type="submit">Yes</button>

  <div class="meme">
      <iframe src="https://giphy.com/embed/15BuyagtKucHm" width="480" height="272" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/15BuyagtKucHm"></a></p>
    </div>


  </p>

index.html

body {
    background-color: lavender;
    color: midnightblue;
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Red Hat Mono, monospace;
    font-size: 100px
  }

  p {
    margin-top: 50px;
  }

  .headline {
    font-size: 100%;
  }

  .subtitle {
    font-size: 20%;
    background: #f2f2fc;
    width: 50vw;
    padding: 50px;
    margin: auto;
    justify-content: center;
    border-radius: 0px 50px;
    border: 2px solid white;
  }

  #body {
    background: midnightblue;
    color: #f2f2fc;
  }

  .list {
    padding: 60px 0px 0px 0px;
    font-size: 40%;
  }

  .list-items {
    font-size: 100%;
    padding: 20px 0px 50px 0px;
    text-transform: uppercase;
  }


  hr /* eraldusjoon */ {
      border: 0;
      height: 1px;
      background-image: linear-gradient(to right, rgba(118, 118, 197, 0), rgba(199, 199, 255, 0.75), rgba(118, 118, 197, 0));
  }

  span {
    font-size: 100%;
    text-transform: uppercase;
    transition: color 500ms ease;
    color: #191970;
  }

  span:hover {
    color:var(--color);

  }
  #circle {
    display: inline-block;
    text-align: center;
    text-color: white;
    background: #191970;
    border-radius: 50%;
    width: 200px;
    height: 200px;
  }

  .meme {
    margin-top: 100px;
  }

index.css