<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="github" viewBox="0 0 24 24">
    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
  </symbol>

  <symbol id="codepen" viewBox="0 0 24 24">
    <path d="m.455 16.512 10.969 7.314c.374.23.774.233 1.152 0l10.969-7.314c.281-.187.455-.522.455-.857v-7.312c0-.335-.174-.67-.455-.857l-10.969-7.313c-.374-.23-.774-.232-1.152 0l-10.969 7.313c-.281.187-.455.522-.455.857v7.312c0 .335.174.67.455.857zm10.514 4.528-8.076-5.384 3.603-2.411 4.473 2.987zm2.062 0v-4.808l4.473-2.987 3.603 2.411zm8.907-7.314-2.585-1.727 2.585-1.728zm-8.907-10.767 8.076 5.384-3.603 2.411-4.473-2.987zm-1.031 6.602 3.643 2.438-3.643 2.438-3.643-2.438zm-1.031-6.602v4.808l-4.473 2.987-3.603-2.411zm-8.906 7.314v-.001l2.585 1.728-2.585 1.728z" />
  </symbol>
</svg>

<ul class="social">
  <li>
    <a href="https://codepen.io/MichaelVanDenBerg">
      <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#codepen"></use>
      </svg>
    </a>
  </li>
  <li>
    <a href="https://github.com/MichaelVanDenBerg">
      <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
      </svg>
    </a>
  </li>
</ul>
<h1 class="title">Blue Squares</h1>
<p class="text">Just a simple page with a CSS gradient background.</p>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  text-shadow: 0px 0px 5px #123456;
  height: 100vh;
  background:
    linear-gradient(-135deg, rgb(34, 76, 152) 10%, transparent),
    repeating-linear-gradient(45deg, rgba(34, 76, 152, 1) 0%, rgba(31, 48, 94, 0.6) 5%, transparent 5%, transparent 10%),
    repeating-linear-gradient(-45deg, rgba(34, 76, 152, 0.4) 0%, rgba(31, 48, 94, 0.5) 5%, transparent 5%, transparent 10%);
  background-color: rgba(34, 76, 152, 0.25);
}

.social {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 0.5em;
  list-style-type: none;
  
  li {
    display: inline;
    margin: 0.25em;
  }
  
  svg {
    fill: white;
    width: 1.75em;
    height: 1.75em;
  }
}

.title {
  font-size: 5em;
  font-weight: bold;
  margin-bottom: 0.2em;
}

.text {
  font-size: 1.25em;
}

@media only screen and (min-width: 420px) {
  .social svg {
    height: 2.25em;
    width: 2.25em;
  }
  .title {
    font-size: 8em;
  }
  .text {
    font-size: 1.5em;
  }
}