/* general */
html {
	justify-content: center;
	align-items: center;
	display: flex;
	height: 100%;
	width: 100%;
}

body {
	width: 100%;
	height: 100%;
	display: flex;
	background-color: #bef9de;
	justify-content: center;
	align-items: center;
}

.all {
	font-family: "Karla", sans-serif;
	font-size: 24px;
	text-align: center;
	width: 80%;
	max-height: 100%;
	word-spacing: 0.05em;
	letter-spacing: 0.015em;
	padding: 20px 0;
}

p {
	margin: 8px 0 8px;
}

.link {
	text-shadow: 2px 2px 5px rgba(150, 150, 150, 0.75);
	font-weight: bold;
	text-decoration: none;
	-webkit-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-moz-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-o-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-ms-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
}

.link:hover {
	-webkit-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-moz-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-o-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-ms-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
}

/* Helper for accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.icons {
	-webkit-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-moz-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-o-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	-ms-transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
	transition:
		color 0.2s ease-out,
		background 0.2s ease-out;
}

/* Icons Handling */
.nav-center {
	display: flex;
	justify-content: center;
	gap: 10px;
	/* Space between icons */
}

.icons a {
	display: inline-block;
}

/* New Circular Wrapper Pattern */
.icon-circle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	/* Previous icon size ~1.8em */
	height: 44px;
	border-radius: 50%;
	background-color: currentColor;
	/* Circle follows text color */
	transition: background-color 0.2s ease-out;
}

.icon-circle svg {
	width: 24px;
	/* Icon inside size */
	height: 24px;
	fill: #ffffff;
	/* Icon is always white inside the colored circle */
}

/* Text Sizing/Spacing */
.text {
	padding: 7px 0 2px;
}

/* links */
#tumblrlink {
	color: #394b62;
	/* Removed hover color change per request */
	font-weight: bold;
	text-shadow: 2px 2px 5px rgba(150, 150, 150, 0.75);
}

#linkedinlink {
	color: #107eb8;
}

#eightyfivesixtylink {
	color: #0b4bd1;
}

#twitterlink {
	color: #007bb6;
}

#instagramlink {
	color: #2e5575;
}

#vimeolink {
	color: #007ea3;
}

#hipsterlink {
	color: #8b4513;
}

#soundcloudlink {
	color: #ff3d00;
}

#flickchartlink {
	color: #530103;
}

#hypemlink {
	color: #83c441;
}

#lastfmlink {
	color: #c4181e;
}

#githublink {
	color: #36383a;
}

/* hover links */
#linkedinlink:hover,
#linkedinlink.hover {
	color: #70c6f3;
}

#eightyfivesixtylink:hover,
#eightyfivesixtylink.hover {
	color: #0bdbc2;
}

#twitterlink:hover,
#twitterlink.hover {
	color: #7be0ff;
}

#instagramlink:hover,
#instagramlink.hover {
	color: #95bad7;
}

#vimeolink:hover,
#vimeolink.hover {
	color: #8cdbf5;
}

#hipsterlink:hover,
#hipsterlink.hover {
	color: #b9825b;
}

#soundcloudlink:hover,
#soundcloudlink.hover {
	color: #ff9e80;
}

#flickchartlink:hover,
#flickchartlink.hover {
	color: #996666;
}

#hypemlink:hover,
#hypemlink.hover {
	color: #fc6164;
}

#lastfmlink:hover,
#lastfmlink.hover {
	color: #f07d81;
}

#githublink:hover,
#githublink.hover {
	color: #a2a5a9;
}

/* Icon Colors (Base & Hover) */
/* Twitter */
.twitter {
	color: #007bb6;
}

.twitter:hover,
.twitter.hover {
	color: #7be0ff;
}

/* Github */
.github {
	color: #36383a;
}

.github:hover,
.github.hover {
	color: #a2a5a9;
}

/* LinkedIn */
.linkedin {
	color: #107eb8;
}

.linkedin:hover,
.linkedin.hover {
	color: #70c6f3;
}

/* Instagram */
.instagram {
	color: #2e5575;
}

.instagram:hover,
.instagram.hover {
	color: #95bad7;
}

/* Vimeo */
.vimeo {
	color: #007ea3;
}

.vimeo:hover,
.vimeo.hover {
	color: #8cdbf5;
}

/* Email */
.st-icon-email {
	color: #55585a;
}

.st-icon-email:hover {
	color: #d6d8da;
}

/* responsive */
@media screen and (min-width: 1000px) {
	.all {
		width: 650px;
	}
}

@media screen and (max-width: 400px) and (max-height: 650px) {
	.all {
		margin: 63px 0;
	}
}