@charset "utf-8";

.about-page{
	width: 100%;
	overflow: hidden;
	text-align: center;
	position: relative;
	z-index: 1;
}
.about-page__title{
	font-family: 'Quicksand', sans-serif;
	width: 100%;
	text-align: center;
	font-weight: normal;
	line-height: 0.8;
	padding: 0.8em 0;
	margin: 0 0 5%;
	font-size: 1.5em;
	letter-spacing: 0.08em;
	color: #452525;
}
.about-page__image{
	width: 260px;
	height: auto;
}
.about-page section{
	width: 80%;
	margin: 0 10%;
	padding: 0 3%;
	box-sizing: border-box;
	text-align: center;
}
.about-page__name{
	color: #452525;
	width: 100%;
	line-height: 2.0;
	margin: 0 0 1em;
	font-size: 1.1em;
	text-align: left;
}
.about-page__name .s{
	font-size: 0.7em;
	padding: 0;
	line-height: 2;
    display: inline-block;
}
.about-page__details{
	color: #452525;
	font-size: 1em;
	text-align: justify;
	width: 100%;
	margin: 0 0 2em;
	line-height: 2.0;
}
.about-skills{
	margin: 0;
	font-size: 1.1em;
	display: inline-block;
	vertical-align: bottom;
    font-family: 'Quicksand', sans-serif;
}
.about-skills h3{
	font-size: 1.2em;
	display: inline-block;
	color: #452525;
	vertical-align: middle;
	line-height: 1;
	letter-spacing: 0.1em;
	margin: 0 0 1em;
}
.about-skills ul{
	text-align: center;
	width: 100%;
	margin: 0;
}
.about-skills li{
	display: inline-block;
	font-size: 0.8em;
	display: inline-block;
	vertical-align: middle;
	color: #493425;
	letter-spacing: 0.08em;
	line-height: 1.6;
	padding: 0.1em 1em 0.2em;
	margin: 0 0.5em 1em 0;
	background-color: #aaaaaa;
	border-radius: 0.2em;
}

.about-skills li.about-skills__krt{background-color: #2AAB9F; color: #fff;}
.about-skills li.about-skills__ga{background-color: #1a73e8; color: #fff;}
.about-skills li.about-skills__ps{background-color: #cff6ff;}
.about-skills li.about-skills__ai{background-color: #ffee9b;}
.about-skills li.about-skills__code{background-color: #E8E8E8;}
.about-skills li.about-skills__jq{background-color: #c0e2ff;}
.about-skills li.about-skills__wp{background-color: #d4ddf5;}
.about-skills li.about-skills__fl{background-color: #ffe4e4;}

@media screen and (min-width: 640px){
	.about-page__title{
		margin: 0;
		font-size: 1.8em;
	}
	.about-page__name .s{
		font-size: 0.8em;
	}
	.about-page__name{
		width: 76%;
		line-height: 2.2;
		margin: 0 12% 1em;
	}
	.about-page__details{
		width: 76%;
		margin: 0 12% 2em;
		line-height: 2.5;
	}
	.about-skills{
		margin: 1em 0;
	}
	.about-skills ul{
		width: 80%;
		margin: 0 10%;
	}
}
@media screen and (min-width: 1100px){
	.about-page section{
		width: 1100px;
		margin: 0 auto;
	}
}