body
	{
		color: #fff;
		font-family: "Segoe UI";
		margin: 0%;
		padding: 0%;
	}

a
	{
		text-decoration: none;
		color: #fff;
	}

.container
	{
		display: inline-flex;
		justify-content: center;
		background-position: fixed;
		overflow-y: scroll;
		float: right;
	}

#sidebar
	{
		position: fixed;
		align-content: center;
		text-align: center;
	}

#sidebar img
	{
		border-radius: 100px;
		width: 100%;
		margin-top: 1vh;
	}

#sidebar div
	{
		width: 90%;
		margin-left: 4.5%;
	}

#central > div
	{
		justify-content: center;
		text-align: center;		
	}

.title { font-weight: lighter; }


@media (orientation: portrait)
	{

		.container
			{
				width: 85vw;
				height: 100vh;
				background: url('bg-p.jpg');
				background-size: 100vw 90vh;
			}

		#sidebar
			{
				display: inline-flex;
				width: 15vw;
				height: 100vh;
				background-color: #141E22;
			}

		#central
			{
				width: 100%;
				height: 100%;
				margin-top: 5vh;
			}
		
		#central > div { height: 25%; }

		a > img { width: 60vw; }

		#sidebar img { height: 7%; }

		.title
			{
				font-size: 1.8em;
				margin-left: 0.8vw;
			}

		.bio { margin-top: 1vw; }
	}

@media (orientation: landscape)
	{
		.container
			{
				width: 90vw;
				height: 100vh;
				background: url('bg-l.jpg');
				background-size: 100%;
			}

		#sidebar
			{
				display: inline-flex;
				width: 10vw;
				height: 100vh;
				background-color: #292C2C;
			}

		#central
			{
				width: 90%;
				height: 100%;
				margin-top: 5vh;
			}

		#central > div { height: 50%; }

		a > img
			{
				width: 40vw;
				height: 40vh;
			}

		.screenp
			{
				height: 150% !important;
				width: 25% !important;
			}


			
		#sidebar img { height: 18%; }

		.title
			{
				font-size: 2em;
				margin-left: 0.8vw;
			}

		.bio { margin-top: 0.5vw; }
	}