@font-face {
    font-family: 'new_cicle';
    src: url('fonts/New_Cicle_Semi-webfont.eot');
    src: url('fonts/New_Cicle_Semi-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/New_Cicle_Semi-webfont.woff') format('woff'),
         url('fonts/New_Cicle_Semi-webfont.ttf') format('truetype'),
         url('fonts/New_Cicle_Semi-webfont.svg#new_ciclesemi') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'new_cicle';
    src: url('fonts/New_Cicle_Semi_Italic-webfont.eot');
    src: url('fonts/New_Cicle_Semi_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/New_Cicle_Semi_Italic-webfont.woff') format('woff'),
         url('fonts/New_Cicle_Semi_Italic-webfont.ttf') format('truetype'),
         url('fonts/New_Cicle_Semi_Italic-webfont.svg#new_ciclesemi_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'new_cicle';
    src: url('fonts/New_Cicle_Gordita-webfont.eot');
    src: url('fonts/New_Cicle_Gordita-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/New_Cicle_Gordita-webfont.woff') format('woff'),
         url('fonts/New_Cicle_Gordita-webfont.ttf') format('truetype'),
         url('fonts/New_Cicle_Gordita-webfont.svg#new_ciclegordita') format('svg');
    font-weight: bold;
    font-style: normal;

}

body {
	background-color: #fff;
	color: #006;
	font-family: 'new_cicle', sans-serif;
	font-size: 16px;
	padding: 1em 10em;
	max-width: 900px;
	margin: 0 auto;
}
.hello, .contents {
	background: url('beach.jpg') no-repeat center center fixed;
	background-size: cover;
}
.hello {
	padding-top: 5em;
}
.contents {
	padding-bottom: 10em;
}
h1 {
	font-size: 5em;
	margin-bottom: .3em;
}
h2 {
	font-size: 3em;
	margin: 0 0 .5em;
}
h3 {
	font-size: 2em;
}
p {
	font-size: 1.5em;
	line-height: 1.43em;
	margin: 1em 0 1.6em;
}
a {
	color: #090;
	text-decoration: none;
	background: none;
}
a:hover, a:active {
	color: #060;
	background-color: #eef;
}
.meta { 
	background-color: #eef;
	padding: .5em;
}
.header {
	font-size: 2em;
	background-color: #003;
	color: #eef;
	padding: .3em .5em 1em;
}
.header h2 {
	font-size: 2em;
	margin: .1em 0;
}
.header a {
	color: #eef;
	background: none;
}
.contents a {
	font-size: 1.3em;
	line-height: 1.5em;
}



.footer-page {
	background-color: #eee;
	height: 100%;
	margin: 0;
	padding: 0;
	max-width: 100%;
}
.hireme {
	max-width: 900px;
	margin: 2em auto;
}
/*
.hireme {
	display: flex;
	width: 100%;
	max-height: 100vh;
	flex-direction: row;
	align-content: stretch;
}
#resume, #sum {
	flex: 1 100%;
}
#resume {
	overflow-y: scroll;
	padding: 2em;
	max-height: calc( 100vh - 3em );
}
#sum {
	max-width: 540px;
}
#parts {
	height: 100%;
/*	background-image: url(itme.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center; */ /*
	background: linear-gradient(to bottom, rgba(192,52,247,1) 0%, rgba(63,93,242,1) 25%, rgba(85,245,250,1) 50%, rgba(71,247,13,1) 75%, rgba(224,230,39,1) 100%);
	position: relative;
	display: flex;
	flex-direction: column-reverse;
}
#parts a {
	background-color: #fff;
	flex: 1 100%;
	max-width: 600px;	
}
#parts a.flipped {
	background: none;
}
#fake-mask {
	width: 100%;
	height: 100%;
	background-image: url(outline.png);
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 0px;
}
*/
.hireme p {
	margin: .2em 0;
}
.hireme p.emoji {
	font-family: "Apple Color Emoji", sans-serif;
	font-size: 2em;
	margin-top: 1em;
	word-spacing: .25em;
}
.hireme p.collapsed {
	cursor: pointer;
}
.hireme p.collapsed:hover {
	color: #c034f7;
}
.hireme p.collapsed + p {
	display: none;
}
.hireme aside {
	display: none;
	position: fixed;
	top: 25%;
	right: 300px;
	width: 15em;
	font-size: 1em;
	background-color: #3f5df2;
	border-radius: 5px;
	padding: 1em;
	z-index: 2;
	color: #fff;
	box-shadow: 0 .5em 1em rgba(50,50,50,.5);
}
.hireme aside h3 {
	font-size: 1.3em;
	margin: .2em 0;
}
.hireme aside a {
	color: #eeff00;
}
.hireme aside:target {
	display: block;
}
.footer-page footer {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 1em;
	background-color: #cf0;
	box-shadow: 0 -.5em 1em rgba(50,50,50,.2);
}
.footer-page footer a {
	display: block;
}

@media screen and (orientation: portrait) {
	#sum {
		display: none;
	}
	.hireme {
		font-size: .7em;
	}
	.hireme p.emoji {
		word-spacing: .19em;
	}
}