/* 
REF
https://codepen.io/anon/pen/gpjReQ
http://dabblet.com/gist/1506530

SWATCHES
light grey-blue:#D7DFE5
bright blue:#44AFE5
dark blue:#051C33
green:#2DE500

new medium purple: #8a87de
new light purple: #bcbaff
*/

@import url('https://fonts.googleapis.com/css?family=Londrina+Solid|Rubik&display=swap');

h1,h2,h3,h4 {font-family:'Rubik', sans-serif;font-weight:bold;margin:0}
body,html,p {margin:0;padding:0}
body {font-family:'Rubik', sans-serif;font-weight:normal;background-color:#000000}
p {font-family:'Rubik', sans-serif;font-weight:normal;color:#051C33}
a {text-decoration:none;color:#8a87de}
a:hover,a:active {color:#D7DFE5}
hr {border:0;height:0;border-top:1px solid #D7DFE5;margin:1em 0}
ul,ol {margin-top:0;color:#051C33}

/* Global variables */
:root {
	--year: '2025';
}

/* SIDE BARS */
#left-bar, #right-bar {
	display:none;
	background-position:center;
	background-repeat:no-repeat;
	background-size:auto;
}
.bar-top-padding {height:30%}

/* MAIN SCREEN & CONTENT & CONTAINERS */
.container {
	display:flex;
	flex-direction:column;
	flex-grow:1;
	justify-content:center;
	align-items:center;
	width:100vw;
	height:100vh;
}
.screen {
	display:flex;
	flex-direction:column;
	width:94%;
	height:94%;
	background-color:#ffffff;
	overflow:hidden;
}
.content {
	padding:2em;
	height:100%;
	overflow:auto;
}
/* SCROLLBAR */
.content::-webkit-scrollbar {
	width:0.5em;
	background-color:#D7DFE5;
}
.content::-webkit-scrollbar-thumb {
	background-color:#8a87de;
}

/* NAV */
.screen-nav {
	display:flex;
	height:75px;
	align-items:center;
	padding:1em 2em;
	border-bottom:1px solid #D7DFE5;
}
.screen-nav::after {
	content:'';
	flex-grow:1;
	order:0;
}
.nav-right {display:none;}
.nav-left, .nav-right {padding:0 5px}
.home-icon {width:100%}
.nav-h, .nav-m {font-weight:bold;text-transform:uppercase}
.nav-m {padding:1em}
.menu-title {font-weight:bold;padding:1em;text-transform:uppercase;color:#ffffff}
.mobile-nav {
	display:flex;
	order:1;
}
.mobile-nav:hover, .mobile-nav:active, .mobile-nav:target {color:#8a87de}
.lightbox {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:998;
	background:rgba(0,0,0,0.8);
}
.lightbox:target, .lightbox:target ~ .mobile-menu {display:block;outline:none}
.mobile-menu {
	display:none;
	position:fixed;
	top:20%;
	left:25%;
	width:50%;
	z-index:999;
	box-shadow:2px 2px 1px rgba(5,28,51,0.3);
}
.mobile-menu-item {text-align:center;background-color:#ffffff}
.mobile-menu-side {text-align:center;background-color:#8a87de}

.botnavlink {display:inline-block;margin:auto;padding:2em;text-align:center}

/* GALLERY/FLEX GRID */
.gallery-h {display:block;width:100;margin:auto}
.gallery {
	display:flex;
	flex-wrap:wrap;
	width:100%;
	margin:auto;
}
.item {width:50%;text-align:center;padding-right:0.5em;margin-bottom:2em}
.item img {max-width:100%}
.item-title {padding:0.25em}

/* BIO/INFO PAGE */
.bio-top {
	display:inline-block;
	width:100%;
	margin:auto;
}
.bio-left {display:inline-block;max-width:85px;}
.bio-side {display:inline-block;padding:1em}
.bio-bot {width:100%;margin:auto}
.bio-img {width:95%;border-radius:50%}
.prices {table-layout:fixed;width:100%;text-align:center;border:1px solid black;margin-bottom:1em;}
.tophead {background-color:#dddddd;}
.empty {background-color:#ffffff !important;}
.alt {background-color:#8a87de50;}

/* PROJECT */
.proj-content {
	display:flex;
	flex-direction:column;
	width:100%;
	margin:auto;
}
.proj-img {display:flex;align-items:flex-start;align-content:center;text-align:center;justify-content:center}
.proj-img-container, .proj-img-container-2 {display:flex;align-items:flex-start;align-content:center;text-align:center;justify-content:center;flex-wrap:wrap;padding-top:1.5em;padding-bottom:1em}
.proj-img-container-tight {display:flex;align-items:flex-start;align-content:center;text-align:center;justify-content:center;flex-wrap:wrap;}
.proj-img img, .proj-img-container img, .proj-img-container-tight img {max-width:900px;width:100%}
.proj-img-container-2 img {max-width:80vw}
.progress-img-container-2 {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;width:100%;padding-top:1em}
.progress-img-2 {width:50%}
.progress-img-3 {width:33%;margin:0}
.progress-img-center {text-align:center}
.caption {font-size:0.75rem;text-align:center;padding:0.5em}

/* YT VIDEO */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* FOOTER */
.footer {display:flex;justify-content:center;flex-basis:0;padding-top:0.5em}
.footer p {color:#ffffff}
.footer p::after {
	content: "©2025 Emily Chen";
}

/* OTHER, REPEATABLE */
.smallbottom {padding-bottom:0.5em !important;}
.para {padding-bottom:1em}
.bold {font-weight:bold}
.red {color:#ED1C24}
.blue {color:#8a87de}
.green {color:#2DE500}
.tiny {font-size:0.75rem}
.border-left {padding-left:1em;border-left:1px solid #D7DFE5}
.border-bot {border-bottom:1px solid #D7DFE5}
.rounded-top {border-radius:1em 1em 0 0}
.rounded-bot {border-radius:0 0 1em 1em}
.bouncy {box-shadow:0px 0px 0px 1px #D7DFE5;transition:transform 0.3s}
.bouncy:hover {box-shadow:0px 0px 0px 3px #8a87de;transform:scale(1.01,1.01)}

/* MEDIA QUERIES */
@media (min-width:48.75em){
	#left-bar, #right-bar {
		display:block;
		position:absolute;
		top:0;
		width:17%;
		height:100%;
		background-color:black;
		text-align:center;
	}
	#left-bar {left:0;border-radius:50px 0 0 50px}
	#right-bar {right:0;border-radius:0 50px 50px 0}
	.content {padding:2em 4em}
	.screen {
		left:17.5%;
		width:65%;
	}
	.nav-right {display:flex;order:1}
	.mobile-nav {display:none}
	.item {width:25%}
	.progress-img-3 {width:28%;margin:2.5%}
}
@media (min-width:73em){
	.content {padding:2em 8em}
	.item {width:25%}
}