@keyframes dance {
	0%,20%,50%,90%,100%	{transform: translateY(0);}
	40% {transform: translateY(-10px);}
	60% {transform: translateY(-5px);}
	80% {transform: translateY(2px);}
}
@font-face {
	font-family: "Neue";
	font-style: normal;
	font-weight: 300;
	src: url("https://timmy-omahony.s3.amazonaws.com/static/fonts/maison-neue/maison-neue-light.77afbfd4ebd9.eot?#iefix") format("embedded-opentype"), url("https://timmy-omahony.s3.amazonaws.com/static/fonts/maison-neue/maison-neue-light.5550e272dd43.woff") format("woff"), url("https://timmy-omahony.s3.amazonaws.com/static/fonts/maison-neue/maison-neue-light.628c91229830.ttf") format("truetype");
}

html
{
	scroll-behavior: smooth;
}

body
{
	margin:0;
	font-family:"Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:1.172vw;
	color: #333;
	width:100%;
}

header
{
	border-top:2px solid orangered;
	display:flex;
	padding:6vw;
	padding-top:2.3vw;
	padding-bottom:2.3vw;
}

#start
{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow:hidden;
	background-color:white;
	z-index:-102;
}

#start:after
{
	height:100vh;
	width:100vh;
	position:absolute;
	transform: translateY(30vw)  translateX(-17vw) scaleY(2) rotate(-35deg) scaleX(2) translateY(54vw) translateX(40vw);
	background-color:orangered;
	content:'';
	left:0;
	top:0;
	z-index:-100;
	display:block;
}

#start:before
{
	height:100vw;
	width:100vw;
	position:absolute;
	transform: translateY(-80vw)  translateX(40vw) rotate(35deg);
	background-color:lightgrey;
	content:'';
	left:0;
	top:0;
	z-index:-101;
	display:block;
}

#next
{
	position:absolute;
	bottom:1vw;
	left:0px;
	right:0px;
	text-align:center;
}

svg
{
	cursor:pointer;
	display:inline-block;
	width:3vw;
	fill:#444;
	animation-name:dance;
	animation-duration:2s;
	animation-iteration-count: infinite;
}

.flex
{
	flex:1;
}

header h1
{
	font-size:1.3em;
	margin:0;
}

#start header h1 a
{
	font-weight:300;
	text-decoration:none;
	transition:color 250ms;
	color:#333;
	cursor:pointer;
}
#start header h1 a:hover
{
	color:orangered;
}

header h2
{
	margin:0;
	color:#aaa;
	font-size:0.8em;
	font-weight:200;
	margin-left:0.8vw;
}

header nav
{
	display:flex;
}

#start header nav a.link
{
	cursor:pointer;
	margin-left:1.5vw;
	margin-right:1.5vw;
	color:#333;
	text-decoration:none;
	transition:color 250ms;
}

#start header nav a.link:hover
{
	color:orangered;
}

#start header nav a.selected
{
	color:orangered;
}

#content
{
	text-align:left;
	padding: 8.4vw;
	padding-top:4.4vw;
	padding-bottom:4.4vw;
	line-height:2;
	font-family:helvetica;
	color:#555;
	font-weight:100;
}

#start a
{
	color:orangered;
	text-decoration:underline;
}

#content div.big
{
	margin-left:-0.8vw;
	font-size:2em;
	color:#333;
	font-family:"Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
}

#flex
{
	flex:1;
	line-height:1.6;
	display:flex;
	margin-bottom:2vw;
}

#portrait
{
	margin-top:100vh;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	position:relative;
	overflow:hidden;
}

#portrait a
{
	color:darkturquoise;
	text-decoration:underline;
}

#portrait:before
{
	content:'';
	position:absolute;
	left:-50vh;
	display:block;
	width:100vh;
	height:100vh;
	transform: rotate(45deg);
	background-color:darkturquoise;
	z-index:-103;
}

#comp:before
{
	content:'';
	position:absolute;
	right:-50vh;
	display:block;
	width:100vh;
	height:100vh;
	transform: rotate(45deg);
	background-color:yellowgreen;
	z-index:0;
}

#portrait .content
{
	flex:1;
	padding:1.6vw;
	display:flex;
}

#portrait .content .column
{
	flex:1;
	padding-left:1.6vw;
	padding-right:1.6vw;
	text-align:justify;
	display:flex;
	flex-direction:column;
}

#comp
{
	position:absolute;
	overflow:hidden;
	display:flex;
	min-height:100vh;
	z-index:-50;
	width:100%;
	flex-direction:column;
}

#next2
{
	display:block;
	text-align:center;
	position:relative;
	bottom:1vw;
}

#prev
{
	margin-top:1vw;
	text-align:center;
	transform:rotate(180deg);
}

#comp #skills
{
	flex:1;
	padding-left:2vw;
	color:#aaa;
	z-index:1;
}

#comp #right-box
{
	flex:1;
	padding-right:2vw;
	color:#aaa;
	z-index:1;
}

.skill
{
	width:45.4vw;
	background-color:white;
	height:10.4vw;
	border:1px solid #ccc;
	font-size:2.5em;
	color:#aaa;
	margin:0.8vw;
	margin-top:0;
	cursor:pointer;
	background-color:white;
	z-index:50;
}

.no-size
{
	width:0px;
	height:0px;
	z-index:0;
}

.skill .no-size .sized
{
	background-repeat:no-repeat;
	background-position:95%;
	background-size:18%;
	width:45vw;
	height:10vw;
	padding:0.2vw;
	transition: opacity 250ms;
}

.skill:hover .sized
{
	opacity:0;
}

.skill .foreward
{
	line-height:1.5;
	transition: opacity 500ms;
	opacity:0;
	color:white;
	font-size:0.5em;
	padding:0.8vw;
	height:8.8vw;
}

.skill .foreward p
{
	margin-top:0.4vw;
	line-height:1.3;
	color:white;
}

.skill:hover .foreward
{
	opacity:100;
}


.skill#ruby .sized
{
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Ruby_logo.svg/1024px-Ruby_logo.svg.png");
}

.skill#linux .sized
{
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1200px-NewTux.svg.png");
}

.skill#ccpp .sized
{
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/306px-ISO_C%2B%2B_Logo.svg.png");
}

.skill#htmlcssjs .sized
{
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png");
}

.skill#apple .sized
{
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/170px-Apple_logo_black.svg.png");
}

.skill#bf .sized
{
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Hello_World_Brainfuck.png/800px-Hello_World_Brainfuck.png");
}

.skill .note
{
	color:orange;
}

.skill#ccpp .foreward
{
	background-color:#027;
}

.skill#linux .foreward
{
	background-color:#777;
}

.skill#apple .foreward
{
	background-color:black;
}

.skill#ruby .foreward
{
	background-color:#c22;
}

.skill#htmlcssjs .foreward
{
	background-color:#f52;
}

.skill#bf .foreward
{
	background-color:#777;
}