styles.css

html {
	scroll-behavior: smooth;
}

body {

	background-color: rgb(200, 200, 200);
	margin: 0;
	text-align: center;
}

#section-a img, #contact-photo img {
	display: block;
	width: 300px;
	height: auto;
	margin-left: auto;
	margin-top: 2em;
	margin-bottom: .5em;
	margin-right: auto;
	
}

header {
	font-family: 'Patua One', cursive;
	background-color: white;
    left: 0;
    right: 0;
    height: 80px;
    line-height: 65px;
    text-align: right;
	position: relative;
	z-index:2;

}

#main{
	position: relative;
	z-index: 0;
}

#main-footer{
	position: relative;
	z-index: 0;
}

label {
	margin: 0 40px 0 0;
	display: block;
	font-size: 2em;
	cursor: pointer;
	color: rgb(79,79,79);
}

.menu {
	margin: 0;
	text-align: center;
	width: 100%;
	display:none;
	z-index: 2;
	
}

.menu a {
	display: block;
	border-bottom: 1px solid #EAEAEB;
	margin:0;
	text-decoration: none;
	color: rgb(79,79,79);

}


.menu ul{
	list-style-type: none;
	padding-left: 0;
}


#toggle {
	display: none;
}

#toggle:checked + .menu{
	display: block;
	background: white;
	text-decoration: none;
	list-style-type: none;
	opacity: 75%;
	width: 100%;

}

.menu a:hover{
color: rgb(102, 61, 162);
}

#section-b{
	background-color: rgb(79,79,79);
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#section-b h3 {
	
	color: rgb(92, 252, 230);
	font-family: 'Patua One', cursive;
	width: 100%;
	font-size: 2em;
	padding-top: 0.5em;
	
}

#section-b p {
	
	color: rgb(255, 255, 255);
	font-family: 'Montserrat', sans-serif;
	width: 100%;
	font-size: 1em;
	padding-bottom: 2em;
	margin-bottom: 0;
	
	margin-right: 0;
	
}

#main-footer{
	margin-top: 0;
	background-color: rgb(79,79,79);
	padding-bottom: 2em;
	margin-bottom: 0;

}

.button{
	
	background-color: transparent;
	border: transparent;
}

.button img{
		height: 32px;
		width: auto;
		margin-left: 20px;
		margin-right:20px;
}

.button img:hover{
	opacity: 0.7;
	cursor: pointer;
}

.button:focus {
	outline:0;
}


section-resume iframe{
	margin-top: 2em;
}

/*Project Page and Contact Page*/


.ProjectTypeButton ul {
	margin: 20px;
	list-style-type: none;
	padding-left: 0;
}
.ProjectTypeButton * {
	display: inline-block;

}

.p_button, .c_button {
	height: 60px;
	width: 100px;
	background-color: rgb(79,79,79);
	font-family: 'Patua One', cursive;
	border-radius: 12px;
	color:white;
	border: none;
	font-size: 1.2em;
	z-index: 0;

}

#look {
	color: white;
	font-family: 'Montserrat', sans-serif;

}

.ProjectTypeButton button:focus, #contact-buttons button:focus {
	outline:0;
}

#BME:hover, #CS:hover, #Fun:hover, #contact-buttons button:hover {
	background-color: rgb(102, 61, 162) !important;
	cursor: pointer;
}

.card {
	background-color: rgb(79,79,79);
	width: 95%;
	padding-bottom: 0.5em;
	margin: 0 auto;

}

#BMECards li, #CSCards li, #FunCards li {
	margin-left: auto;
  	margin-right: auto;
	

}
#BMECards ul, #CSCards ul, #FunCards ul, #contact-buttons ul {
	list-style: none;
	padding: 0;
}

#BMECards .card, #CSCards .card, #FunCards .card {
		margin-top: 1em;
		margin-bottom: 1em;
}


#BMECards .cardImage img, #CSCards .cardImage img, #FunCards .cardImage img{
	padding-top: 1em;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 0;
	max-width: 95%;
	
}

.card-content {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.card-content h3 {
	margin-top: 0;
	padding-top: 0.5em;
	color: rgb(92, 252, 230);
	font-family: 'Patua One', cursive;
}

.card-content p {
	color: white;
	font-family: 'Montserrat', sans-serif;
}

.card-content a:link, .card-content a:visited{
	text-decoration: none;
	color: rgb(49, 137, 220);
}

.card-content #left {
	float: left;
	width: 20%;
	padding: 0 15px 0 10px;
	margin: 5px 0 5px 0 ;
}


/* Contact Photo */

.c_button {
	width: 250px;
	margin: 0.5em 0 0.5em 0;

}












/*This will be the tablet and large phone format*/

@media only screen and (min-width: 768px) and (max-width: 959px) {
	#main-footer{
		bottom: 0;
	}
	
	/*Project Page */
	.card-content h3{
		font-size: 1.5em;
	}

	.card-content p{
		font-size: 1em;
	}

}






















/*This will be the desktop layout format*/


@media only screen and (min-width: 959px) {


	.grid {
		display: grid;
		grid-template-columns: 1fr repeat(2, 20em) 1fr;
	}

	 .content-wrap, .spread {
		grid-column: 2/4;
	}

	#toggle {
		display: none;
	}

	.menu {
		text-align: center;
		display: inline;
	}
	
	header {
		text-align: center;
	}
	header label {
		display: none;
	}
	
	header .menu * {
		vertical-align: middle;
		display: inline;
	}

	header .menu li {
		margin-left: 20px;
		margin-right:20px;
	}

	header .menu li a {
		color: rgb(79,79,79);
		text-decoration: none;
		border-bottom: none;
		display: inline;
		
	}

	header .menu li a:hover {
	    color: rgb(102, 61, 162);
	    /* blue rgb(49, 137, 220); */
	}

	#section-a img,  #contact-photo img{
		height: auto;
		width: 350px;
		margin-bottom: 2em;
	}

	#section-a {
		margin-bottom: 0;
	}

	#section-b {
		width: 100%;
		margin-bottom: 0;
	}

	#main-footer{
		bottom: 0;
	}

	/*Project Page*/
	
	.grid-project {
		display: grid;
		grid-template-columns: 0.5fr 3fr 2fr 2fr 0.5fr
		
	}



	#BMECards .cardImage, #CSCards .cardImage, #FunCards .cardImage {
	grid-column: 2/3;
	align-self: center;
	min-width: 20em;
	width: 100%;
	height: auto;
	margin-top: 0.5em;
	margin-bottom: 1em;
	}

	#BMECards .card , #CSCards .cardImage, #FunCards .cardImage {
		margin-top: 1em;
		margin-bottom: 1em;
	}

	
	.card-content{
		grid-column: 3/5;
	}

	.card-content h3{
		font-size: 2em;
	}

	.card-content p{
		font-size: 1.3em;
	}

	.card-content #left {
		max-width: 80px;
		float: left;
	}


}