html {
	background: linear-gradient(to right, #c6fcff, #1ed0ec);
}

h1 {
	font-family: 'Landa', 'Sorts Mill Goudy', 'Garamond', serif;
	font-size: 4.5em;
	text-align: left;
	margin-bottom: 0.5em;
	font-weight: 400;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1.35em;
	text-align: left;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	line-height: 2em;
	margin-bottom: 1em;
}

.wrapper {
	margin: 5% 10% auto 10%;
}

a {
	text-decoration-skip-ink: auto;
	color: #218484;
}

a:hover {
	color: #2EB8B8;
}

span::selection, span a::selection {
	background: #ff8080;
}

span a {
	color: black;
}

span a:hover {
	color: black;
}

/* Hi there! Hire me already: hi+shibboleet@simoncollinson.com */

.emoji {
	-webkit-animation: hue 10s infinite;
}

@keyframes hue {
	0%, 100%  { -webkit-filter: hue-rotate(0deg); }
	50% { -webkit-filter: hue-rotate(360deg); }
}

@-webkit-keyframes hue {
	0%, 100%  { -webkit-filter: hue-rotate(0deg); }
	50% { -webkit-filter: hue-rotate(360deg); }
}

@keyframes backgroundRise {
	0%{background-position:0 0%}
	100%{background-position:0 -300px}
}

@-webkit-keyframes backgroundRise {
	0%{background-position:0 0%}
	100%{background-position:0 -300px}
}


#headshot {
	float: right;
	width: 25%;
	border-radius: 5%;
	margin: 1em 0 3em 3em;
}

.awesome {
	display: none;
}

@media only screen and (min-width: 750px) and (max-width: 950px) {
	#headshot {
		width: 33%;
	}
}

@media only screen and (min-width: 420px) and (max-width: 421px) {
	.awesome {
		display:inline;
		position:fixed;
		width:882px;
		height:1000px;
		z-index: 100;
		background-image: url("../images/css.jpg");
		margin: 0;
		animation: backgroundRise 4s infinite linear;
	}

	.awesome h1 {
		z-index: 101;
		float:left;
		font-family: 'Impact', sans-serif;
		color:#fff;
		margin-left: 150px
	}
}

@media only screen and (min-width: 600px) and (max-width: 749px) {
	#headshot {
		width: 45%;
	}
}

@media only screen and (max-width: 599px) {
	h1 {
		text-align: center;
		font-size: 3em;
	}

	#headshot {
		width: 75%;
		display: block;
		float: none;
		margin: 1em auto;
	}
}