/* Font & general stuff ----*/
p {
	/* font-size: 22px; */
	font-family: 'Roboto';
  	margin-bottom: 0;
  /* font-weight: lighter; */
}

body {
	background-color: #ffffff;
	background-size: cover;
	background-attachment: fixed;
	font-family: Roboto;
	font-style: normal;
	font-weight: 400;
	height: 100%;
	margin: 0 auto;
  /*padding: 0;*/
}

header {
	text-align: center;
	margin-top: 2%;
}

footer {
	margin-top: 2%;
}

/* -----------------------------------------------------------

/* About me  ----*/

.img-circle { /* circle photo */
	border-radius: 50%;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
  	border: 2px solid #bababa;
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}

.responsibilities {
	font-size: 1.5em;
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	align-items: center;
}

.edu {
  font-size: 4em;
  /* font-style: normal; */
  /* font-weight: 400; */
  text-align: center;
  font-family: 'Playfair Display';
  line-height: 1em;
  margin-bottom: 1%;
}

.main-year {
	font-weight: bold;
}

.bio {
	font-family: 'Roboto';
	font-size: 2.5em;
	font-style: normal;
	text-align: justify;
	margin: auto;
	display: flex;
	hyphens: auto;
}

#blurb {
	display: flex;
	margin: auto;
	vertical-align: middle;
	float: left;
}

#headshot {
	float: left;
}

.title .coursework, .main-year {
  font-size: 1.8em;
}

.school-year {
	float: right;
	font-family: 'Roboto';
	text-align: right;
	vertical-align: middle;
	font-size: 1.6em;
}

.main-links {
	font-size: 1.8em;
	align-items: center;
	text-align: center;
	font-family: 'Roboto';
}

.main-links a, #link a {
	color: #778899;
	text-decoration: none;
}
  
.main-links a:hover, #link a:hover {
	color: #82CAFF;
	text-decoration: none;
}

.coursework {
  list-style-image: url(icon/favicon.ico);
  font-size: 1.3em;
  font-family: 'Roboto';
  align-items: center;
  text-align: left;
  vertical-align: middle;
}

.coursework a , #link a {
  color: #778899;
  text-decoration: none;
}

.coursework a:hover, #link a:hover {
  color: #82CAFF;
  text-decoration: none;
}

.tri-col {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-column-gap: 1%;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

.col {
  text-align: center;
  float: center;
  vertical-align: middle;
  margin: auto;
}

.job-info {
	display: flex;
	justify-content: space-between;
	/* grid-template-columns: 67% 33%; */
	/* grid-column-gap: 2%; */
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	align-items: center;
	margin-bottom: 0.5%;
}

.job, .degree {
	padding-bottom: 2%;
}


.technical {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
}

.logo-grid div {
	padding: 1rem;
	display: grid;
}

.logo-grid div::before {
	content: "";
	padding-bottom: 100%;
	display: block;
}

.logo-grid div img {
	width: 100%;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.logo-grid div::before, .logo-grid div img {
	grid-area: 1 / 1 / 2 / 2;
}

.sectionRight {
  width: 90%;
  /* height: 90%; */
  display: flex;
  flex-direction: row;
  /* justify-content: flex-start; */
  /* margin-top: 5%; */
  margin-bottom: 5%;
  margin-left: 5%;
  margin-right: 5%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  background-image: -webkit-linear-gradient(270deg,rgba(242, 242, 242, 0.00) 0%,rgba(242, 242, 242, 1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(242, 242, 242, 0.00) 0%,rgba(242, 242, 242, 1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(242, 242, 242,0.00) 0%,rgba(242, 242, 242, 1.00) 100%);
  background-image: linear-gradient(180deg,rgba(242, 242, 242, 0.00) 0%,rgba(242, 242, 242, 1.00) 100%);
}


/* ----------------------------------------------------------- */

/* Fixing formatting for large screens ----*/


@media (max-width: 1600px) {
	
	.edu {
		font-size: 3em;
	}
	
	.school-year, .coursework {
		font-size: 1.3em;
	}
	
	.title .coursework, .main-year {
		font-size: 1.5em;
	}
	
	.bio {
		font-size: 2em;
	}

	.main-links {
		font-size: 1.5em;
	}
	
	
}

/* Fixing formatting for small screens ----*/

@media (max-width: 1100px) {

	.edu {
		font-size: 2.5em;
	}

	.responsibilities {
		font-size: 1.2em;
	}

	.job-info {
		width: 90%;
	}
	
	.smallerSectionRight {
		margin-left: 5%;
		width: 90%;
		margin-bottom: 100px;
	}
	
	.sectionRight {
		flex-direction: row;
		align-items: center;
		margin-bottom: 2.5%;
	}
	
	.title .coursework, .main-year {
		font-size: 1.3em;
		align-items: center;
	}

	.title .coursework {
		text-align: left;
	}

	.main-year {
		text-align: right;
	}
	
	.coursework {
		font-size: 1.1em;
		align-items: center;
		text-align: center;
	}
	
	.main-links {
		font-size: 1.2em;
		align-items: center;
		text-align: center;
		font-family: 'Roboto';
	}
	
	.school-year {
		font-size: 1em;
		float: right;
		text-align: right;
		align-items: center;
	}
	
	.bio {
		padding-top: 3%;
		font-size: 1.5em;
	}

	.technical {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.logo-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		row-gap: 0.5rem;
		column-gap: 0.5rem;
		/* width: 60%;
		height: 60%;
		margin-left: auto;
		margin-right: auto; */
	}
	
	.logo-grid div {
		padding: 0.5rem;

	}
	
	.logo-grid div::before {
		content: "";
		padding-bottom: 90%;
		display: block;
	}

	.tri-col {
		width: 90%;
	}
	

}

/* ----------------------------------------------------------- */

/* Fixing formatting for mobile phones and small devices ----*/
@media (max-width: 700px) {

	.sectionRight {
		flex-direction: column;
	}

	.main-links {
		font-size: 1.2em;
	}

	.img-circle {
		width: 70%;
		height: 70%;
	}

	.tri-col {
		display: block;
		align-content: center;
	}
	
	.col {
		display: block;
		margin: auto;
		float: none;
	}

}

@media (max-width: 480px) {

	.sectionRight {
		flex-direction: column;
	}

	.technical {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.logo-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
		row-gap: 0.25rem;
		column-gap: 0.5rem;
		/* width: 60%;
		height: 60%;
		margin-left: auto;
		margin-right: auto; */
	}
	
	.logo-grid div {
		padding: 0.5rem;

	}
	
	.logo-grid div::before {
		content: "";
		padding-bottom: 90%;
		display: block;
	}

	.edu {
		font-size: 3em;
		padding-top: 2%;
	}

	.responsibilities {
		width: 95%;
		margin-right: auto;
		margin-left: auto;
	}

	.bio {
		font-size: 1.5em;
	}

	.experience .coursework {
		width: 60%;
	}

	.coursework {
		text-align: left;
	}

}