<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;
	}
}