/*Style sheet for my website. Primarily built from scratch, feel free to explore it, critique it, and help both of us improve!*/

@import 'https://fonts.googleapis.com/css?family=Montserrat:500';

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
	sans-serif;
	overflow-x: hidden;
}

#homepage {
	text-align: center;
	background: #333;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding-top: 7em;
	padding-bottom: 7em;
}

.typewriter h1 {

	color: #7B68EE;
	font-family: monospace;
	overflow: hidden;
	border-right: .15em solid #FFF;
	white-space: nowrap;
	margin: 0 auto;
	letter-spacing: .15em;
	-webkit-animation: 
    typing 5s infinite steps(40, end),
	blink-caret .5s step-end infinite;
	        animation: 
    typing 5s infinite steps(40, end),
	blink-caret .5s step-end infinite;


}

/* The typing effect */
@-webkit-keyframes typing {
	0% {
		width: 0
	}
	50% {
		width: 100%
	}
	100% {
		width: 100%
	}
}
@keyframes typing {
	0% {
		width: 0
	}
	50% {
		width: 100%
	}
	100% {
		width: 100%
	}
}

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: white}
}
@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: white}
}

/* Navbar styling */
.flex-nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	height: 50px;
	z-index: 1;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	        box-shadow: 0 0 5px rgba(0,0,0,0.3)
}

.navbar-item {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	font-weight: bold;
	font-size: 20px;
}

.flex-nav a{
	background-color:#C0C0C0;
}

.flex-nav a:hover {
	background-color: #cfcfcf;
}

.navbar-item.homepage {
	display: none;
}

.navbar.icon {
	display: none;
}

.flexbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	padding-left: 20px;
}

.header {
	text-align: center;
	font-size: 50px;
}

.width-1200 {
	max-width: 1200px;
}

section {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

/* About Me */

#aboutme {
	padding-top: 10px;
	background-color:#FAFAFA; 
}

.flexbox.aboutme {
	padding-top: 50px;
	padding-bottom: 50px;
}

#aboutmepicture {
	max-height: 400px;
	max-width: 400px;
	min-width: 400px;
	min-height: 400px;
	border-radius: 50%;
}

.content.aboutme {
	font-size: 29px;
	margin-left: 10px;
}


.title {
	font-size: 24px;
	color: #3d8ff5;
}

.title.name {
	color: #663399;
	font-size: 3em;
	font-weight: bold;
}

.title.position {
	color:#5e9516;
}

a:link {
	color: #7B68EE;
}

a:visited {
	color: #7B68EE;
}

a.button:link {
	color: #FAFAFA;
}

a.button:visited {
	color: #FAFAFA;
}

a.button:hover {
	background-color: #5241BB;
}

a.title {
	font-size: 24px;
	color: #3d8ff5;
	text-decoration: none;
}

/* Experience */

#experience {
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #E5E5E5;
}

#lyrapicture {
	max-width: 450px;
}
#macyspicture{
	width: 450px;
}

.pic {
	min-height: 250px;
	max-height: 250px;
	max-width: 325px;
	min-width: 325px;
	border-radius: 5%;
}

#caidapicture {
	width: 225px;
	height: 225px;
}

.content.exp {
	margin-left: auto;
	width: 450px;
}

.flexbox.work {
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.circular {
	margin-left: auto;
}

.formal.position {
	margin-bottom: 0px;
}

/* College */ 

#collegepicture {
	min-height: 225px;
	min-width: 225px;
	max-height: 225px;
	max-width: 225px;
}

/* Personal Projects */

.header {
	font-family: 'Montserrat', sans-serif;
	font-size: 80px;
}

.header.experience{
	font-size: 69px;
	padding-bottom: 35px;
}

.header.projects {
	font-size: 60px;
}

.content {
	font-size: 20px;
}

.flexbox.projects{
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.fbp {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding-top: 75px;
	padding-bottom: 75px;
	width: 100%;
}

.fbp.pro {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center
}

.content.pro {
	max-width: 500px;
	padding-left: 50px;
}

.overlaypic {
	position: relative;	
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
	background-color: #7B68EE;
	border-radius: 5%;
}

.overlay_text{
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.overlaypic:hover .overlay {
	opacity: 1;
}

/* The Modal */

.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 40%;
  }
  
  /* The Close Button */
  .close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  }


/* Resume Section */

#resume {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #D3D3D3;
}

.header.resume {
	padding-top: 0px;
	padding-bottom: 20px;
	font-size: 69px;
}

/* Resume Button */

#resume-link{
	border: 1px solid RGB(176, 177, 174);
	text-align: center;
	width: 300px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	line-height: 62px;
	font-size: 2.7em;
	margin: auto;
	text-decoration: none;
	border-radius: 5%;
}

.button {
	text-decoration: none;
	display: block;
	background-color: #7B68EE;
	border-radius: 5%;
	-webkit-box-shadow: 2px 2px #888;
	        box-shadow: 2px 2px #888;
}

/* Contact me */

#contact{
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #FAFAFA;
}

.flexbox.social_media{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding-bottom: 100px;
}


.media-icon {
	padding: 15px;
}

/* Page content */
.content {
	padding: 16px;
}
  
.contact-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

form {
	padding: 1em;
	border: 2px solid #454545;
	border-radius: 1em;
}

ul { 
	list-style: none;
	padding: 0;
	margin: 0;
}

input, 
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* Uniform text field size */
  width: 300px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
}

input:focus, 
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

label {
	/* Uniform size & alignment */
	display: inline-block;
	width: 90px;
	text-align: left;
	padding-bottom: 10px;
}


textarea {
	/* Align multiline text fields with their labels */
	vertical-align: top;
	/* Provide space to type some text */
	height: 5em;
}

#send_button{
	padding-left: 90px;
	padding-top: 30px;
}

/*Footer stuff*/
.footer{
	text-align: center;
	background-color: #eeeeee;
	height: 50px;
	line-height: 50px;
}


/* Mobile device < 700px endeavors */
@media only screen and (max-width: 768px) {
	
	.navbar-item.aboutme{
		display: none;
	}

	.navbar-item.experience {
		display: none;
	}

	.navbar-item.resume {
		display: none;
	}

	.navbar-item.contactme {
		display: none;
	}

	.navbar-item.homepage{
		text-align:left;
		padding-left: 10px;
		display: inline;
	}

	#hamburger-image{
		width: 50px;
		height: 50px
	}

	.navbar.icon {
		display: block;
		width: 60px;
		height: 45px;
		padding-top: 5px;
		background-color: #C0C0C0;
	}
	
	.flex-nav a:hover {
		background-color: #C0C0C0;
	}

	.title.name {
		font-size: 75px;
	}

	.header {
		font-size: 2em;
	}

	/* About Me Mobile*/
	.flexbox {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		padding-left: 5px;
	}

	#aboutmepicture {
		min-width: 320px;
		min-height: 320px;
		max-width: 320px;
		max-height: 320px;
		padding-right: 0px;
	}

	#aboutme-content {
		margin-left: 10px;
		margin-right: 10px;
	}

	.title {
		display: block;
		text-align: center
	}

	.title.name {
		display: block;
		text-align: none;
	}

	.content {
		width: 310px;
	}

	.content.exp{
		margin-left: 0;
	}

	.circular {
		margin-left: 0;
	}

	#lyrapicture {
		width: 300px;
	}

	#macyspicture {
		width: 300px;
	}

	#college {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	#college-content {
		margin-left: 10px;
		margin-right: 10px;
	}

	.formal.position br {
		display: none;
	}

	.flexbox.college {
		padding-top: 50px; 
		padding-bottom: 50px;
	}

	.work.info {
		text-align: center
	}

	.header.experience {
		font-size: 2.3em;
	}

	.header.projects {
		font-size: 1.90em;
	}

	#collegepicture {
		margin-left: auto;
		margin-right: auto;
	}

	a.title.UCSD {
		font-size: 20px;
	}

	.content.pro {
		font-size: 16px;
		padding-left: 5px;
		text-align: center;
	}



	/*Experiences Mobile*/
	#projects {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}

	.fbp {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		padding-top: 15px;
		padding-bottom: 35px;
	}

	.pic {
		min-height: 200px;
		max-height: 200px;
		max-width: 200px;
		min-width: 200px;
		border-radius: 5%;
	}

	.header.resume {
		font-size: 3em;
	}

	.header.contact{
		font-size: 2.75em;
	}

	.flexbox.social_media {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}

	.overlaypic:hover .overlay {
		opacity: 0;
	}

	.flex-nav.responsive {
		display: block;
		position: -webkit-sticky;
		position: sticky;
	}
	
	.flex-nav.responsive a {
		display: block;
		text-align: left;
		padding-left: 10px;
	}

	.navbar.icon {
		cursor: pointer;
		display: inline-block;
		position: absolute;
		right: 0;
		top: 0;
		background-color: #C0C0C0;
	}

	.bar1, .bar2, .bar3 {
		width: 35px;
		height: 5px;
		background-color: #7B68EE;
		margin: 6px 0;
		-webkit-transition: 0.4s;
		-o-transition: 0.4s;
		transition: 0.4s;
	}
	
	.navbar.icon.change {
		background-color: #C0C0C0;
	}

	.navbar.icon.change:hover{
		background-color: #C0C0C0;
	}

	/* Rotate first bar */
	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		-ms-transform: rotate(-45deg) translate(-9px, 6px);
		    transform: rotate(-45deg) translate(-9px, 6px);
	}
	  
	/* Fade out the second bar */
	.change .bar2 {
		opacity: 0;
	}

	/* Rotate last bar */
	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
		-ms-transform: rotate(45deg) translate(-8px, -8px) ;
		    transform: rotate(45deg) translate(-8px, -8px) ;
	}
	
	form {
		padding: 0.75em;
		border-radius: 1em;
	}
	

}

@media only screen and (min-width: 701px) and (max-width:1199px) {

	.content{
		text-align: left;
	}

	#lyrapicture {
		max-width: 350px;
	}

	#macyspicture {
		width: 350px;
	}
	.fbp{
		width: 650px;
	}

	.flexbox {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	
	.pic {
		min-height: 200px;
		max-height: 300px;
		max-width: 300px;
		min-width: 300px;
		border-radius: 5%;
	}

	.flexbox.social_media {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}
}