* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'IBM Plex Sans', sans-serif;
	color: black;
}

html,
body {
	background-color: #ECE3D1;
	height: 100%;
}

::selection{
	background-color: #022222;
	color: #ECE3D1;
}


.grid {
	background-color: #ECE3D1;
	padding: 15em;
	padding-top: 5em;
	padding-bottom: 5em;
}


.cell {
	height: 300px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 600;
	border-radius: 30px;
	color: white;
}

.cell-1 {
	background-image: url('media/halo_bp.jpg');
	background-size: 400%;
	background-position: 30% 45%;
}

.cell-2 {
	background-image: url('media/sd_bp.jpg');
	background-size: 300%;
	background-position: 30% 55%;
}

.cell-3 {
	background-image: url('media/stairclimbing_bp.jpg');
	background-size: 800%;
	background-position: 45% 45%;
}


.cell-4 {
	background-image: url('media/injection_bp.jpg');
	background-size: 220%;
	background-position: 90% 15%;
}

.cell-5 {
	background-image: url('media/irislab_bp.jpg');
	background-size: 230%;
	background-position: 45% 25%;
}

.cell-6 {
	background-image: url('media/beam_bp.jpg');
	background-size: 150%;
	background-position: 30% 45%;
}

.cell-7 {
	background-image: url('media/pratt_bp.jpg');
	background-size: 300%;
	background-position: 70% 35%;
}

.cell-8 {
	background-image: url('media/fidgetspinner_bp.jpg');
	background-size: 450%;
	background-position: 80% 35%;
}

.cell-9 {
	background-image: url('media/frisbee_bp.jpg');
	background-size: 410%;
	background-position: 55% 35%;
}

.cell-10 {
	background-image: url('media/loomo_bp.jpg');
	background-size: 210%;
	background-position: 25% 25%;
}

.cell-11 {
	background-image: url('media/multitool_bp.jpg');
	background-size: 750%;
	background-position: 25% 25%;
}

.cell-12 {
	background-image: url('media/valve_bp.jpg');
	background-size: 210%;
	background-position: 25% 25%;
}
#landing_page {
	background-color: #022222;
}

.container {
	width: 67.5%;
	padding-top: 5%;
	margin: auto;
	overflow: hidden;
}

h1 {
	font-size: 50px;
	letter-spacing: 10%;
	font-weight: 400;
}

#landing_page h1 {
	color: #F83F7D;
	text-align: center;
	font-weight: 300;
}

h3 {
	color: #a0a0a0;
	font-weight: 200;
	padding-top: 0%;
}

h5 {
	color: white;
	font-weight: 100;
	padding-left: 5%;
	padding-top: 0%;
}

a {
	color: black;
	text-decoration: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(248, 63, 125, 0.6) 40%);
}

.icons {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 20vh;
	padding-top: 25vh;
}

ul {
	position: relative;
	display: flex;
}

ul li {
	position: relative;
	list-style: none;
}

ul li a {
	display: block;
	width: 70px;
	height: 70px;
	background: #022222;
	line-height: 83px;
	text-align: center;
	margin: 0 10px;
	border-radius: 13px;
	box-shadow: -2px -2px 3px rgba(255, 255, 255, 0.07), 3px 3px 3px rgba(0, 0, 0, 0.09);
	text-decoration: none;
}

ul li a:active {
	box-shadow: -2px -2px 3px rgba(255, 255, 255, 0.01), 3px 3px 3px rgba(0, 0, 0, 0);
	transition-duration: 0.2s;
}

ul li a .fa {
	font-size: 40px;
	color: #ECE3D1;
	padding-top: 20%;
}

ul li a:hover .fa {
	color: #F83F7D;
	filter: drop-shadow(0 0 2.5px #F83F7D);
	transition: 0.15s;
}

#name {
	color: #44fdbc;
	text-align: center;
	padding-top: 30vh;
	font-weight: 300;
	padding-bottom: 5vh;
}

#project_attrs {
	padding-top: 4%;
	padding-bottom: 7%;
}

#project_attrs p {
	line-height: 30px;
	font-size: 18px;
}

#project_attrs h4 {
	font-size: 27px;
}

#project_attrs li {
	list-style-type: none;
	padding-top: 2%;
	padding-bottom: 2%;
}

video {
	width: 90%;
}

#video {
	text-align: center;
}

#back {
	text-align: center;
	padding-top: 7%;
	padding-bottom: 5%;
}

.dir {
	display: flex;
	align-items: left;
	max-width: 20%;
}

.dir p,
.dir a {
	background: none;
	padding-right: 2%;
	color: #a0a0a0;
}


#back a {
	color: black;
	background: none;
	vertical-align: middle;
}

#back img,
#back p {
	max-width: 2.5%;
	display: inline-block;
	padding-left: 0.25%;
	padding-right: 0.25%;
	vertical-align: middle;
	height: 20px;
}

#about {
	display: flex;
	align-items: center;
	justify-content: center;
}

#about p {
	font-size: 125%;
	padding-top:2vh;
	padding-bottom:5vh;
	line-height: 30px;
}

#about img {
	max-width: 310px;
}

.figure {
	width: 45%;
	border: 1px solid;
	display: inline;
}

.figs {
	width: 100%;
	padding-left: 8%;
	margin-top: 0.5%;
}

.fig {
	margin-top: 3%;
}

.caption {
	text-align: center;
	width: 45%;
	margin: auto;
	color: #7A7A7A;
	font-style: italic;
}

#multitool_requirement,
#multitool_hoq,
#multitool_print,
#frisbee_decisionmatrix,
#frisbee_tablemount,
#frisbee_bb,
#frisbee_assemblyexploded,
#frisbee_full1,
#frisbee_full2,
#frisbee_prototype1,
#frisbee_prototype2,
#stairclimbing_sketch1,
#stairclimbing_sketch2,
#stairclimbing_motion,
#stairclimbing_wheel,
#stairclimbing_drivetrainiso,
#stairclimbing_drivetrainbottom,
#stairclimbing_soda1,
#stairclimbing_soda2,
#stairclimbing_soda3,
#stairclimbing_finalexploded,
#stairclimbing_final,
#figdetspinner_finaldrawing,
#figdetspinner_cam,
#figdetspinner_final,
#beam_sf,
#beam_bm,
#beam_1,
#beam_2,
#beams,
#sd_media,
#injection_media {
	width: 55%;
	border: 1px solid;
	display: flex;
	margin: auto;
	margin-top: 2%;
}

#swirl {
	text-align: center;
	margin: auto;
	display: flex;
	width: 20%;
	margin-top: none;
	padding-top: -500px;
}

.menu,
{
height: 4em;
align: center;

}

.menu ul,
.landing_nav ul {
	list-style-type: none;
	display: flex;
	margin: 0;
	padding: 0;
}

.menu ul li,
.landing_nav ul li {
	padding: 10px;
}


.menu ul li:first-child,
.landing_nav ul li:first-child {
	padding-left: 0;
}

.menu ul li:last-child,
.landing_nav ul li:last-child {
	padding-right: 0;
}

.menu ul li a,
.landing_nav ul li a {
	display: inline;
	width: auto;
	height: auto;
	background: none;
	margin: 0 0 10px 0;
	line-height: auto;
	text-align: center;
	box-shadow: none;
	color: #a0a0a0;
	font-weight: 400;
	text-decoration: none;
	font-size: 25px;
}


.menu ul li a:hover,
.landing_nav ul li a:hover {
	color: #F83F7D;
	transition-duration: 0s;
	filter: none;
}

.landing_nav {
	height: 5em;
	font-weight: 300;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ECE3D1;
}

.landing_nav ul {
	text-align: center;
	display: flex;
	justify-content: center;
}


.landing_nav ul li a {
	color: #ECE3D1;

}


@media (max-width: 1024px) {
	.container {
		width: 85%;
		padding-top: 5%;
		margin: auto;
	}

	#name {
		padding-top: 20vh;
		padding-bottom: none;
	}

	.icons {
		display: flex;
		min-height: 40vh;
	}

	ul li a {
		width: 150px;
		height: 150px;
		border-radius: 13px;
	}


	ul li a .fa {
		font-size: 90px;
		color: #ECE3D1;
		padding-top: 20%;
	}

	#about {
		flex-direction: column-reverse;
		text-align: center;
		height: auto;
		margin-top: 5em;
		margin-bottom: 7em;
	}

	#about p {
		font-size: 170%;
		margin-top: 2.5em;
	}

	#about img {
		min-width: 17vh;
	}

	#nav_links {
		max-width: 25%;
		font-size: 15px;
	}

	.dir a {
		text-align: center;
		display: inline;
		align-items: center;
		margin: auto;
	}

	.dir {
		text-align: center;
		margin: auto;
		padding-left: 2.2%;
		max-width: 100%;
		padding-left: 0;
		justify-content: center;
	}

	h1 {
		text-align: left;
		font-size: 70px;
		padding-top: 10%;
		margin-bottom: 3vh;
	}

	.menu {
		text-align: center;
	}

	.menu ul {
		justify-content: center;
		padding-top: 4vh;
		padding-bottom: 3vh;
	}

	.landing_nav ul {
		display: block;
		text-align: center;
		padding-top: 13vh;
	}

	.menu ul li,
	.landing_nav ul li {
		width: 380px;
		padding: 5px 0;
		text-align: center;

	}

	.menu ul li a,
	.landing_nav ul li a {
		display: inline;
		width: auto;
		height: auto;
		background: none;
		margin: 0 0 10px 0;
		line-height: auto;
		text-align: center;
		box-shadow: none;
		color: #a0a0a0;
		text-decoration: none;
		font-size: 40px;
	}

	.cell {
		font-size: 40px;
	}

	#multitool_requirement,
#multitool_hoq,
#multitool_print,
#frisbee_decisionmatrix,
#frisbee_tablemount,
#frisbee_bb,
#frisbee_assemblyexploded,
#frisbee_full1,
#frisbee_full2,
#frisbee_prototype1,
#frisbee_prototype2,
#stairclimbing_sketch1,
#stairclimbing_sketch2,
#stairclimbing_motion,
#stairclimbing_wheel,
#stairclimbing_drivetrainiso,
#stairclimbing_drivetrainbottom,
#stairclimbing_soda1,
#stairclimbing_soda2,
#stairclimbing_soda3,
#stairclimbing_finalexploded,
#stairclimbing_final,
#figdetspinner_finaldrawing,
#figdetspinner_cam,
#figdetspinner_final,
#beam_sf,
#beam_bm,
#beam_1,
#beam_2,
#beams {
	width: 90%;
	margin-top: 13%;
}


.caption {
	width: 75%;
	padding-top:1%;
}



#project_attrs li {
	list-style-type: none;
	padding-top: 5%;
	padding-bottom: 5%;
}


}