body {
	touch-action: pan-x pan-y;
	font-family: 'Roboto', sans-serif !important;
	//background-color: #fff;
	margin: 0 0 2em 0;
	padding: 0;
}

.link {
	cursor: pointer;
}

.ml05 {
	margin-left: 0.5em;
}

.mr05 {
	margin-right: 0.5em;
}

#bg {
	z-index: -1;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #43cea2;
	background: -webkit-linear-gradient(to top, #2f9d18, #cce328);
	background: linear-gradient(to top, #2f9d18, #cce328);
}

.header {
	font-size: 200%;
	color: white;
	padding: 0 0 0.5em 0;
	text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

#about {
	text-align: center;
	padding: 2em 1em 1em 1em;
	margin: 0 0 1em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	background: linear-gradient(to top, #00000020, #ffffff50);
}

#about .userpic {
	margin: 0.5em 0 1.5em 0;
	height: 150px;
	width: 150px;
	border-radius: 0.2em;
	//transform: rotate(5deg);
	box-shadow: 0 12px 10px 1px rgb(0, 0, 0, 0.3);
	border: .3em solid rgba(255, 255, 255, 0.6);
}

#about .title {
	font-size: 2em;
	color: white;
	width: 100%;
	padding: 0 0 0.5em 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#about .subtitle {
	font-size: 1em;
	color: white;
	display: inline-block;
//	width: 100%;
	padding: 0 0 1em 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#about .subtitle .icon {
	width: 24px;
	border-radius: 0.15em;
}

#intro {
	text-align: center;
	padding: 1em;
	margin-bottom: 1em;
}

#intro .title {
	color: white;
	width: 100%;
	padding: 0.75em 0 0.75em 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#intro .subtitle {
	color: white;
	width: 100%;
	font-size: 75%;
	padding: 0.75em 0 0.75em 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#contacts {
	text-align: center;
	padding: 1em;
	margin-bottom: 1em;
}

.contact-card {
	display: inline-block;
	padding: 0;
	text-align: center;
	margin: 0.25em;
	background-color: rgba(255, 255, 255, 0.15);
    transition: all 0.1s ease-out;	
//	border-radius: 1em 1em 0.5em 0.5em;
	border-radius: 0.2em;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.contact-card:hover {
	background: #ff4e50;
	background: -webkit-linear-gradient(to top, #f9d423, #5cc436);
	background: linear-gradient(to top, #f9d423, #5cc436);

	box-shadow: 0 6px 25px 2px rgb(0, 0, 0, 0.4);
	transform: translateY(-0.25em);
}

.contact-card:active {
	background: #ff4e50;
	background: -webkit-linear-gradient(to top, #f9d423, #5cc436);
	background: linear-gradient(to top, #f9d423, #5cc436);

	box-shadow: 0 0 80px 2px rgb(255, 255, 255, 0.4);
	transform: translateY(-0.1em);
}

.contact-card .title {
	color: white;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.025);
	padding: 0.75em 0 0.75em 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-card .icon {
	margin: 2em 1em 1em 1em;
	height: 72px;
	width: 72px;
}

#socials {
	text-align: center;
	padding: 1em;
	margin-bottom: 1em;
}

.social-card {
	display: inline-block;
	padding: 0;
	text-align: center;
	margin: 0.25em;
	background-color: rgba(255, 255, 255, 0.15);
    transition: all 0.1s ease-out;	
//	border-radius: 1em 1em 0.5em 0.5em;
	border-radius: 0.2em;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.social-card:hover {
	background: #ff4e50;
	background: -webkit-linear-gradient(to top, #f9d423, #5cc436);
	background: linear-gradient(to top, #f9d423, #5cc436);

	box-shadow: 0 6px 25px 2px rgb(0, 0, 0, 0.4);
	transform: translateY(-0.25em);
}

.social-card:active {
	background: #ff4e50;
	background: -webkit-linear-gradient(to top, #f9d423, #5cc436);
	background: linear-gradient(to top, #f9d423, #5cc436);

	box-shadow: 0 0 80px 2px rgb(255, 255, 255, 0.4);
	transform: translateY(-0.1em);
}

.social-card .title {
	color: white;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.025);
	padding: 0.75em 0 0.75em 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.social-card .icon {
	margin: 2em 1em 1em 1em;
	height: 72px;
	width: 72px;
}


::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background: #6c757d;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover{
	background: #6c757d;
}

::-webkit-scrollbar-track{
	background: #242a30;
	border-radius: 4px;
}