* {
	padding: 0;
	margin: 0 auto;
}

@font-face
{
	font-family: SpecialElite;
	src:url('/fonts/SpecialElite-Regular.ttf');
}


body {
	width: 100%;
	height: 100vh;
	background: rgb(255,255,255);
	background: linear-gradient(160deg, rgba(255,255,255,1) 0%, rgba(2,170,226,1) 100%);
}

.fa-envelope:hover {
	transition-duration: .5s;
	color: lightblue;
}
.fa-youtube:hover {
	transition-duration: .5s;
	color: #C4302B;
}
.fa-facebook:hover {
	transition-duration: .5s;
	color: #3B5998;
}
.fa-discord:hover {
	transition-duration: .5s;
	color: #7289DA;
}

	#top {
		position: fixed;
		z-index: 11;
		top: 0;
		left: 0;
		right: 0;
		padding: 16px 50px;
		background: #242424;
		color: #DDD;
		box-shadow: 0 5px 10px black;
		border-bottom: 1px solid #A998DD;
	}
		#top > div {
			display: inline-block;
			width: calc( 100% / 2 - 43px ) ;
			padding: 0 20px;
		}

		#top > div:first-child {
			text-align: left;
			font-weight: bold;
			font-size: 150%;
			cursor: pointer;
		}
			#top > div:first-child img {
				height: 40px; 
				vertical-align: middle;
				margin-right:  20px;
			}

		#top > div:last-child {
			text-align: right;
		}
			#top > div:last-child a {
				cursor: pointer;
				color: #DDD;
				text-decoration: none;
				padding: 0 10px;
			}
				#top > div:last-child a:hover {
					color: white;
				}

	#body {
		height: 80%;
		width: 100%;
		position: absolute;
		top: 20%;
	}

		#about {
			width: 50%;
			position: absolute;
			left: 5%;
			top: 0;
			text-align: center;
			letter-spacing: 2px;
			font-weight: bold;
			z-index: 10;
			font-family: 'SpecialElite';
		}
			#about div:nth-child(1) , #about div:nth-child(3) {
				font-size: 150%;
			}

			#about div:nth-child(3) {
				margin-top: -10px;
			}

			#about .name {
				font-size: 400%;
				text-transform: uppercase;
			}

				#about .name > span {
					display: inline-block;
				}
				/*#about .name > span:nth-child(1) , #about .name > span:nth-child(3) {
					font-size: 250%;
				}*/

			#about .description {
				margin-top: 20px;
				width: 90%;
				font-size: 100%;
				font-weight: normal;
				color: #656565;
				text-align: center;
			}
				#about .description p {
					margin-top: 16px;
					line-height: 150%;
				}



		#face {
			width: 50%;
			height: 100%;
			background-image: url("/graphic/authorPhoto.png");
			background-position: bottom;
			background-repeat: no-repeat;
			/*background-size: cover;*/
			background-size: auto 100%;
			position: absolute;
			bottom: 10px;
			right: 5%;
			z-index: 10;
		}


		#bottomBlock {
			background: rgba(0,0,0,.75);
			color: #DDD;
			width: 100%;
			height: 40%;
			bottom: 0;
			position: absolute;
			z-index: 9;
			border-top: 1px solid black;
			box-shadow: 0 -10px 35px rgba(0,0,0,.85);
		}

			#bottomBlock .myWorks {
				width: 50%;
				margin-left: 5%;
				font-size: 120%;
				position: absolute;
				bottom: 30%;
			}
				#bottomBlock .myWorks > div {
					text-align: center;
					margin-top: 3%;
				}

				#bottomBlock .myWorks > .title {
					font-size: 120%;
					margin-bottom: 20px;
				}

				#bottomBlock .myWorks .element {
					display: inline-block;
					width: 100px;
					margin: 0 10px;
				}

					#bottomBlock .myWorks .element i {
						display:block; 
						margin-bottom:5px; 
						font-size:150%;
					}

					#bottomBlock .myWorks .element img {
						max-width: 150px;
						max-height: 150px;
					}

				#bottomBlock .myWorks a {
					display: inline-block;
					color: #DDD;
					text-decoration: none;
					letter-spacing: 0px;
				}
					#bottomBlock .myWorks a:hover {
						color: lightblue;
						transition-duration: .5s
					}


		#footer {
			position: fixed;
			z-index: 11;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 16px 0;
			background: #242424;
			border-top: 2px solid black;
			text-align: center;
			color: #DDD;
			box-shadow: 0 -1px 10px black;
			border-top: 2px solid #000;
		}
			#footer a {
				color:  #DDD;
				text-decoration: none;
				padding: 0 20px;
				font-size: 120%;
			}
				#footer a:hover {
					cursor: pointer;
					color: #FFF;
					transition-duration: .5s;
					text-shadow: 1px 0;
				}



@media only screen and (max-width: 1000px) {

	.fa-chevron-left , .fa-chevron-right {
		display: none;
	}

	body , .body {
		min-width: 250px;
	}

	#top > div {
		display: block;
		min-width: 175px;
		width: 95%;
		margin: 0 auto;
		text-align: center !important;
	}
	#top > div:first-child {
		margin-bottom: 10px;
	}

	#about {
		width: 98%;
		left: 1%;
		margin: 0 auto;
		min-width: 250px;
	}

		#about .name {
			font-size: 200%;
		}

		#about .description {
			width: 95%;
			font-size: 80%;
		}

	#face {
		position: absolute;
		z-index: 1000;
		top: -23%;
		left: -65%;
		padding: 10px;
		border: 2px solid black;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		/*transform: scale(0.3);*/
		/*display: none;*/
	}

	#bottomBlock .myWorks {
		width: 98%;
		min-width: 250px;
		margin: 0 1%;
	}

		#bottomBlock .myWorks .element i {
			font-size: 70%;
		}


	#footer {
		min-width: 330px;
	}
		#footer i {
			font-size: 200%;
		}

		#footer .adminName {
			display: none;
		}
}