/*Website made by yours truly*/
/*TODO Xwing and Phissex*/
/*TODO Portfolio item link arrow single line*/
/*TODO Portfolio thumbnails spritesheet*/
/*TODO Phone stylesheet*/

@font-face {font-family: 'Lato', sans-serif;}

p {
	font-size: large;
}
h1 {
	font-size: xx-large;
	text-align: center;
}
h2 {
	font-size: x-large;
}
a  {
	color: white;
	text-decoration: none;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li {
	text-decoration: none;
	text-align: center;
}

body {
	font: 20px "Lato", "Avenir", "Helvetica", sans-serif;
	color: white;
	background-color: rgb(17, 18, 24);
	
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	margin-bottom: 25vh;
	overflow-y: scroll;
	overflow-x: hidden;
	text-align: center;
}
@keyframes open {
	from {
		opacity: 0;
		transform: translateY(64px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.content {
	/*All page content exept for navigation go in here*/
	width: 100%;
	padding: 0 0 25vh;
	animation: open 0.75s ease-out;
	display: inline-block; /*TODO solve nav overlap some other way*/
}
.screen {
	/*Gives an element some space below to fit in the screen*/
	width: 100%;
	padding: 0 0 25vh;
}
.adaptive_width {
	/*Width modifier that is altered by "portrait.css"*/
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}


/*:::::::::::::::::::::::::::::::::: Symbols ::::::::::::::::::::::::::::::::::*/
.symbol {
	display: block;
	background: url("Symbol Sheet.svg");
	background-size: 800%;
}

/*App symbols*/
.symbol_photoshop {background-position: 0% 0%;}
.symbol_aftereffects {background-position: -200% 0%;}
.symbol_premiere {background-position: -300% 0%;}
.symbol_maya {background-position: 0% -100%;}
.symbol_mudbox {background-position: -100% -100%;}
.symbol_unity {background-position: 0% -200%;}
.symbol_unreal {background-position: -100% -200%;}
.symbol_zbrush {background-position: -200% -100%;}
.symbol_substancepainter {background-position: -300% -100%;}

/*Glyph symbols*/
.symbol_student {background-position: -400% 0%;}
.symbol_portfolio {background-position: -500% 0%;}
.symbol_thoren {background-position: -600% 0%;}

/*Language symbols*/
.symbol_lua {background-position: -400% -100%;}
.symbol_java {background-position: -500% -100%;}
.symbol_cpp {background-position: -600% -100%;}

/*Button symbols*/
.symbol_dlarchive {background-position: 0% -400%;}
.symbol_dlimage {background-position: -100% -400%;}
.symbol_arrowright {background-position: -200% -400%;}
.symbol_play {background-position: 0% -500%;}

/*Social symbols*/
.symbol_twitter {background-position: -400% -400%;}
.symbol_sketchfab {background-position: -500% 400%;}
.symbol_linkedin {background-position: -600% -400%;}
.symbol_youtube {background-position: -700% -400%;}
.symbol_artstation {background-position: -400% -500%;}
.symbol_deviantart {background-position: -500% -500%;}
.symbol_patreon {background-position: -600% -500%;}

/*:::::::::::::::::::::::::::::::::: Navigation ::::::::::::::::::::::::::::::::::*/
nav {
	width: 50%;
	height: 20vh;
	min-width: 10cm;
	max-width: 100%;
	margin: 8vh auto 4vh;
	text-align: center;
}
#logo {
	width: 50%;
	padding-top: 5%;
	height: 25%;
	background: url("Title.svg") center/contain no-repeat;
	display: inline-block;
}
#logo h1 {
	display: none;
}

nav ul {
	width: 100%;
	text-shadow: 0px 1px 4px rgba(0,0,0,0.5);
}

nav li {
	/*Active page text style*/
	
	width: 33.333%;
	height: 100%;
	float: left;
	font-size: x-large;
	color: #C8C8C8;
	line-height: 2;
	display: block;
}

nav li a {
	/*Linked page text style*/
	
	color: #535353;
	transition: color 0.25s;
	display: block;
}
nav li a:hover {color: white;}


/*:::::::::::::::::::::::::::::::::: Home ::::::::::::::::::::::::::::::::::*/
@keyframes slideA {
	0%   {transform: translateX(48px);}
	50%  {transform: translateX(-96px);}
	100% {}
}
@keyframes slideB {
	0%   {opacity: 0;}
	25%  {opacity: 0; transform: translateX(48px);}
	30%  {opacity: 1;}
	75%  {transform: translateX(-96px);}
	100% {opacity: 1;}
}
@keyframes slideC {
	0%   {opacity: 0;}
	50%  {opacity: 0; transform: translateX(48px);}
	55%  {opacity: 1;}
	100% {opacity: 1; transform: translateX(-96px);}
}
@keyframes slideD {
	0%   {opacity: 1; transform: translateX(-24px);} /*Wrapping*/
	5%   {opacity: 0;} /*Wrapping*/
	25%  {opacity: 0; transform: translateX(-96px);} /*Wrapping*/
	75%  {opacity: 0; transform: translateX(48px);}
	80%  {opacity: 1;}
	100% {opacity: 1; transform: translateX(-24px);}
}
.slideContainer {
	position: absolute;
	overflow: hidden;
	height: 50vh;
	width: 100%;
	left: 0;
}
.slide {
	position: relative;
	height: 100%;
	width: 125%;
	left: -13%;
	
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.slideA {animation: slideA 28s linear 0s infinite; z-index: 2;}
.slideB {animation: slideB 28s linear 0s infinite; z-index: 3;}
.slideC {animation: slideC 28s linear 0s infinite; z-index: 4;}
.slideD {animation: slideD 28s linear 0s infinite; z-index: 5;}


/*:::::::::::::::::::::::::::::::::: About Page ::::::::::::::::::::::::::::::::::*/
.about .section {
	margin-bottom: 12vh;
}
.about p {
	width: 100%;
	text-align: justify;
}
.about a {
	margin: 0 auto 128px;
	max-width: 20cm;
	text-align: justify;
	text-decoration: underline;
}
.about h2 {
	text-align: center;
}
.about .glyph {
	margin: auto;
	width: 16vh;
	height: 16vh;
	box-sizing: border-box;
}
.about .icon_matrix {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.about .icon {
	display: flex;
	width: 10%;
	max-width: 50%;
	min-width: 96px;
	flex: content;
	margin: auto;
	margin-bottom: 64px;
	transform: scale(1.0, 1.0); /*needs to exist for text to appear*/
}
.about .icon:after {
	/*Makes div dimensions square*/
	
	content: '';
	display: block;
	margin-top: 100%;
}
.about .icon p {
	position: absolute;
	padding: 0 8px;
	box-sizing: border-box;
	margin: 0;
	margin-top: 8px;
	top: 100%;
	width: 100%;
	text-align: center;
}
.about .flex {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.about .flex div {width: 33%; flex-grow: 1;}

#avatar {
	background: url("Oscar.jpg") no-repeat center center;
	background-size: contain;
	
	width: 25vw;
	height: 25vw;
	width: 25vmin;
	height: 25vmin;
	max-width: 5cm;
	max-height: 5cm;
	
	display: block;
	margin: 0 auto;
	box-sizing: border-box;
	
	overflow: hidden;
	border-radius: 100%;
}


/*:::::::::::::::::::::::::::::::::: Portfolio Item Page ::::::::::::::::::::::::::::::::::*/
.portfolio_item {
	width: 100%;
	padding: 0;
	
	background-color: rgba(0,0,0,0.25);
	overflow: hidden;
	
	display: flex;
	flex-wrap: wrap;
}
.title {
	min-width: 100%;
	box-sizing: border-box;
	text-align: center;
	display: inline-block;
	
	background-image: url("backgrad.png");
	background-attachment: fixed;
	background-size: 100% 100%;
}
.portfolio_item .text_container {
	min-height: 60vh;
	min-width: 50%;
	flex: 1;
	box-sizing: border-box;
	
	float: left;
}
.portfolio_item .image_container {
	min-height: 60vh;
	min-width: 50%;
	flex: 1;
	
	display: flex;
	flex-wrap: wrap;
	
	float: left;
	overflow: hidden;
}
.portfolio_item .image {
	min-width: 50%;
	max-height: 100%;
	flex: 1;
	overflow: hidden;
	
	background-color: black;
	background-size: cover;
	background-position: center;
}
.portfolio_item .image a {
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.portfolio_item .movie {
	min-width: 50%;
	max-height: 100%;
	flex: 1;
	overflow: hidden;
	
	background-color: black;
	background-size: cover;
	background-position: center;
}
.portfolio_item .movie a {
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	
	background-image: url("Portfolio/Play.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-size: 15vh;
	
	opacity: 0.5;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.portfolio_item p {
	margin: 16px;
	box-sizing: border-box;
	line-height: 1.35;
	text-align: justify;
}
.portfolio_item a {
	margin: 16px;
	padding-right: 32px;
	box-sizing: border-box;
	text-align: right;
	font-size: 115%;
	display: block;
	
	background-image: url("Portfolio/Arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right center;
}


/*:::::::::::::::::::::::::::::::::: Links Page ::::::::::::::::::::::::::::::::::*/
.links {
	width: 70%;
/*	min-width: 480px;*/
	margin: 0 auto;
	box-sizing: border-box;
}
.linkCard {
	display: block;
	box-sizing: border-box;
	width: 75vw;
	max-width: 100%;
	min-height: 120px;
	margin: 2px 2px 32px;
	float: left;
	text-align: left;
	
	/*Hover outline*/
	border-radius: 2px;
	box-shadow: 0 0 0 2px rgba(255,255,255,0);
	transition: box-shadow 0.1s;
}
.linkCard:hover {box-shadow: 0 0 0 2px rgba(255,255,255,0.3);}

.rigthSide {float: right; text-align: right;}
.links .tray {
	width: 120px;
	height: 120px;
	float: inherit;
	box-sizing: border-box;
	padding: 12px;
	margin: 0;
	display: inline-block;
	text-align: center;
}
.links .icon {
	height: 100%;
	width: 100%;
	display: inline-block;
}
.links .texts {
/*	float: inherit;*/
/*	width: 75%;*/
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	display: block;
}
.links .texts div {
	width: 100%;
}
.links h2 {
	display: inline-block;
	text-decoration: none;
	font-weight: lighter;
	white-space: nowrap;
	float: inherit;
	padding: 0;
	margin: 0;
}
.links h3 {
	display: inline-block;
	text-decoration: none;
	font-weight: lighter;
	white-space: nowrap;
	opacity: 0.25;
	
	float: inherit;
	padding: 0 8px;
	margin: 0;
}
.links p {margin: 0;}

/*:::::::::::::::::::::::::::::::::: Portfolio Page ::::::::::::::::::::::::::::::::::*/
.matrix {
	box-sizing: border-box;
	width: 100%;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 16px;
	display: inline-block;
}
.matrix .space {
	width: 25%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding: 1%;
	transform: scale(1.0, 1.0);
	transition: transform 0.25s;
	display: block;
}
.matrix .space:hover {transform: scale(1.1, 1.1);}
.matrix .item {
	display: block;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	padding-top: 125%;
	overflow: hidden;
	border-radius: 4px;
	
	background-size: cover;
	background-color: inherit;
	background-position: center;
	background-repeat: no-repeat;
}
.matrix .item div {
	position: absolute;
	top:0; bottom:0; left:0; right:0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 5.5%;
}
.matrix .item p {
	box-sizing: border-box;
	width: 100%;
	margin-top: 50%;
	text-shadow: 0px 0px 4px rgba(0,0,0,1);
	text-align: center;
	font-size: 1.9vw;
	
	opacity: 0;
	transition: opacity 0.25s;
	background: rgba(0,0,0,0.5);
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.matrix .space:hover .item p {opacity: 1;}

/*:::::::::::::::::::::::::::::::::: Contact Card ::::::::::::::::::::::::::::::::::*/
.contact_link {
	float: left;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	margin-top: 50vh;
}
.contact_link h1 {
	margin-bottom: 8px;
	font-size: x-large;
}
.contact_link a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 150%;
}