@import url('https://fonts.googleapis.com/css?family=Pathway+Gothic+One');


html, body							{padding:0; margin:0; background:rgb(26,27,30); font-family:"Pathway Gothic One", "Helvetica Neue", "Helvetica", sans-serif; color:white; height:100%; min-height:100%;}

bg									{display:block; width:100%; height:100%; overflow:hidden;}

wrapper								{display:block; width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0;}

content								{display:block; width:600px; height:auto; position:absolute; overflow:hidden; transform:skewY(-5deg); -webkit-transform:skewY(-5deg);}

#name								{width:100%; text-align:center; cursor:default;}
#hello, #lovedoing					{display:inline-block; text-align:center; position:relative; padding:0 14px; font-size:24px; text-transform:uppercase; letter-spacing:3px; color:rgba(218,230,230,.8); opacity:0;}
#hello								{margin:40px 0 10px 0;}
#lovedoing							{margin:16px 0 6px 0;}
#hello:before, #hello:after,
#lovedoing:before, #lovedoing:after {content:''; display:block; height:2px; width:300px; position:absolute; background:rgba(255,255,255,.3); transition: width 3s ease-out;}
#hello:before, #lovedoing:before	{right:100%;}
#hello:after, #lovedoing:after		{left:100%;}
#hello:before, #hello:after			{top:18px;}
#lovedoing:before, #lovedoing:after	{top:6px;}
#hello span, #lovedoing span		{display:inline-block; overflow:hidden;}

droppingtext						{display:inline-block; color:rgba(0,0,0,0); position:relative; overflow:hidden;}
droppingtext text					{display:block; color:rgb(255,54,41); position:absolute; left:0; top:0; text-align:left; white-space: nowrap; overflow:hidden; /*transform:translateY(-50px);*/ top:-100%;}

#svgname							{position:relative; width:600px; height:108px;}
#svgname path						{fill:none; stroke:#EEEFEF; stroke-width:1.2677; stroke-miterlimit:10;}


#pages								{position:relative;}
#pagesbuttons						{text-align:center; padding:30px 0;}
#pages:after						{content:''; display:block; position:absolute; left:0; bottom:1px; height:1px; background:rgba(255,255,255,.3); transform:scaleY(1.5); width:100%; opacity:0;}

pagebtn								{display:inline-block; border:2px solid rgb(255,207,6); border-radius:5px; cursor:pointer; margin:0 3px; position:relative; text-transform:uppercase; letter-spacing:2px; font-size:19px; padding:8px 16px; transition:background-color 200ms, color 200ms, transform 100ms;}
pagebtn:not(.selected):hover		{background-color:rgb(255,207,6); color:black;}
pagebtn:not(.selected):active		{}

pagebtn.selected					{cursor:default;}
#cv, #contact						{}


span.subtitle						{font-size:14px; text-transform:uppercase; color:rgb(0,199,185); display:block;}
div.column							{display:inline-block; font-size:20px; color:white; line-height:32px;}
div.column.left						{text-align:left; width:60%;}
div.column.right					{text-align:left; width:39%;}

/* Misc */
bg, #name, #pagesbuttons			{-webkit-user-select:none; -moz-user-select:none; user-select:none;}


/* Screen specific */
@media (max-width:1200px){
	content							{width:406px;}
	#svgname						{width:406px; height:72px;}
	#hello, #lovedoing				{font-size:18px;}
	#hello:before, #hello:after			{top:12px;}
	#lovedoing:before, #lovedoing:after	{top:4px;}
}


@media (max-width:410px){
	content							{width:320px;}
	#svgname						{width:320px; height:58px;}
	#hello, #lovedoing				{font-size:14px;}
	#hello:before, #hello:after			{top:11px; height:1px;}
	#lovedoing:before, #lovedoing:after	{top:3px; height:1px;}
	#hello:
}

/* HAAAAAAX */
@keyframes fix						{from{transform:skewY(-5deg);}}
@-webkit-keyframes fix				{from{transform:skewY(-5deg); opacity:1.0;}}

@-moz-document url-prefix() {
	content							{animation:fix;}
	#hello, #lovedoing				{font-weight:bold;}
}