/* Declare CSS variables
This allows properties to only need to be changed in 1 place */
:root {
	--colorRose: #d89584;
	--colorGray: #f4f4f4;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px #f4f4f400;
	-webkit-box-shadow: inset 0 0 6px #f4f4f400;
	border-radius: 10px;
	background-color: #f4f4f400;
}

::-webkit-scrollbar {
	width: 5px;
	background-color: #f4f4f400;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--colorRose);
	/* background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent) */
}

body {
	margin: 0;
	font-family: Calibri, Helvetica, Verdana, sans-serif;
	line-height: 1.5;
}

#contact-iframe {
	width: 100%;
	/* height: 300px; */
	border: none;
	box-shadow: 1px 1px 10px 1px;
}

div.cover {
	background: url(assets/cover_overlay.png) no-repeat center/100% 100%,
		url(assets/cover.jpg) no-repeat center/cover;
	height: 360px;
}

h1 {
	color: white;
	text-align: center;
	font-size: 42px;
	margin-top: 8px;
	margin-bottom: 0;
}

div.cover p {
	color: lightgray;
	text-align: center;
}

img.cover-profile {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	position: relative;
	left: 50%;
	margin-left: -50px;
	margin-top: 50px;
}

div.cover-contact {
	position: absolute;
	top: 20px;
	left: 10px;
	border-left: 4px solid var(--colorRose);
	padding-left: 8px;
}

div.cover-contact a {
	display: block;
	margin-top: 0px;
	color: white;
	font-size: 14px;
}

div.cover-contact a:first-child {
	margin-bottom: 15px;
}

div.cover-button {
	text-align: center;
	position: relative;
}

div.cover-button a {
	color: var(--colorRose);
	border: 3px solid var(--colorRose);
	padding: 8px 15px;
	margin-top: 18px;
    width: 15%;
	display: inline-block;
}

div.cover-button a:hover {
	background-color: #d895841f;
	color: white;
	border: 3px solid white;
}

.cover-button{
	display: inline;
	width: 20px;
	align-self: center;
}

div.cover-contact a:hover,
a:active {
	color: var(--colorRose);
}

a:link {
	text-decoration: none;
}

div.section {
	padding: 30px 40px 30px 40px;
}

div.gray-section-1 {
	background: url(assets/triangle2white.svg) no-repeat center bottom -1px/100%;
	background-color: var(--colorGray);
	padding-bottom: 60px;
}

div.gray-section-1 p {
	text-align: center;
	font-size: 22px;
	color: #656565;
	max-width: 380px;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

div.gray-bar {
	width: 150px;
	position: relative;
	border-top: 1px solid #979797;
	margin: 0 auto;
}

h2 {
	text-align: center;
	font-size: 34px;
	margin-top: 0;
	padding-bottom: 20px;
}

div.about-me-section {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 10px;
}

div.about-me-desc {
	margin-top: 0px;
	height: 100%;
	padding-left: 8px;
	display: inline-block;
}

table {
	border: none;
	padding-left: 32px;
	margin-left: 32px;
	margin-right: 0;
}

td {
	padding-right: 5px;
}

div.about-links {
	text-align: center;
}

div.white-section {
	height: 100%;
}

div.about-me-desc p {
	margin-top: 0px;
	overflow: auto;
	padding-left: 8px;
}

div.text-with-border {
	border-left: 4px solid var(--colorRose);
	height: 50px;
}

.card > a > img {
	max-height: 21vw;
	object-fit: cover;
}

.card:hover > a > img {
	opacity: 0.8;
	transition: opacity 0.5s ease-out, transform 0.5s;
	transform: scale(1.1, 1.1);
	box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.5);
}

div.gray-section-2 {
	background: url(assets/triangle1white.svg) no-repeat center top/100%;
	background-color: var(--colorGray);
	padding-top: 100px;
}

.portfolio-section {
	grid-column-start: 1;
	grid-column-end: 4;
}

div.vertical-bar {
	align-self: center;
	border-left: 4px solid var(--colorRose);
	height: 50px;
	margin-right: 0px;
}

div.white-section2 {
	height: 100%;
	padding: 50px 80px 50px 80px;
}

.get-in-touch-frame {
	display: grid;
	grid-template-columns: 1fr 0.1fr 2fr 1fr;
	grid-gap: 5px;
	grid-template-areas:
		"pic header header ."
		"pic vbar p .";
	background-color: white;
}

.frame-pic {
	grid-area: pic;
	display: flex;
	align-items: center;
	justify-content: center;
}

.frame-profile-pic {
	border-radius: 50%;
	width: 100px;
	height: 100px;
}

.get-in-touch-title {
	grid-area: header;
}

.get-in-touch-title h3 {
	margin-left: 0;
	margin-bottom: 9px;
}

.frame-vertical-bar {
	grid-area: vbar;
	/* display:flex; */
	/* align-items:center;
    justify-content: center; */
	border-left: 4px solid var(--colorRose);
	height: 50px;
	margin-right: 0px;
}

.get-in-touch-p {
	grid-area: p;
}

.get-in-touch-p p {
	margin: 0 0 1em 0;
	font-size: 0.8em;
	/* max-width:250px; */
}

span.small {
	font-size: x-small;
	color: gray;
  }


/* PORTFOLIO PAGES */

.icon {
	font-size: 40px;
}

div.portfolio-header-grid {
	background: url(assets/header.jpg) no-repeat center top/cover;
	display: grid;
	grid-template-columns: 0.05fr 5fr 2fr;
	grid-template-areas: "portvertbar portname portbutton";
}

div.portfolio-vertical-bar {
	grid-area: portvertbar;
	border-left: 4px solid var(--colorRose);
	height: 30px;
	margin-left: 15px;
	align-self: center;
}

div.portfolio-header-name {
	color: white;
	grid-area: portname;
	align-self: center;
}

div.portfolio-header-name h3 {
	margin-left: 8px;
}

div.portfolio-header-button {
	text-align: center;
	position: relative;
	grid-area: portbutton;
	justify-items: end;
	align-self: center;
}

div.portfolio-header-button a {
	color: var(--colorRose);
	border: 3px solid var(--colorRose);
	padding: 1px 10px;
	display: inline-block;
}

div.portfolio-header-button a:hover {
	background-color: #d895841f;
	color: white;
	border: 3px solid white;
}

div.portfolio-gray-section {
	background: url(assets/triangle2white.svg) no-repeat center bottom/100%;
	background-color: var(--colorGray);
	padding-bottom: 60px;
	display: grid;
	grid-template-columns: 0.01fr 1fr;
	grid-template-areas:
		"portBack portBar"
		". portTitle";
}

div.portfolio-back-link {
	grid-area: portBack;
}

div.portfolio-back-link a {
	color: var(--colorRose);
	text-decoration: underline;
	font-size: 0.8em;
}

div.portfolio-gray-bar {
	width: 150px;
	position: relative;
	border-top: 1px solid #979797;
	margin: 0 auto;
	grid-area: portBar;
	align-self: end;
}

.portfolio-title-section {
	grid-area: portTitle;
}

div.portfolio-gray-section h2 {
	text-align: center;
	font-weight: normal;
	font-size: 22px;
	color: #656565;
	max-width: 380px;
	margin: auto;
	/* padding-top: 0; */
	padding-bottom: 20px;
}

div.portfolio-gray-section h1 {
	text-align: center;
	color: black;
	max-width: 380px;
	margin: auto;
	/* grid-area: portAbout; */
	align-items: center;
}

div.portfolio-white-section {
	display: grid;
	grid-template-columns: 0.01fr 4fr 0.5fr;
	grid-template-areas:
		"portWSecVBar portAbout ."
		". portProjPic ."
		". portProjLink .";
	height: 100%;
	padding-top: 30px;
	margin-left: 50px;
}

div.portfolio-about-vertical-bar {
	grid-area: portWSecVBar;
	border-left: 4px solid var(--colorRose);
	height: 30px;
	margin: 15px;
}

div.portfolio-about-section {
	grid-area: portAbout;
}

div.portfolio-about-section p {
	font-size: 20px;
	margin-top: 10px;
}

div.portfolio-project-pic {
	grid-area: portProjPic;
	justify-self: center;
}

div.portfolio-project-pic img {
	width: 60vw;
	/* justify-items: center; */
}

div.portfolio-project-link {
	grid-area: portProjLink;
	justify-self: center;
	margin-top: 10px;
	/* color: var(--colorRose); */
	text-align: center;
}

div.portfolio-project-link > p {
	visibility: hidden;
}

div.portfolio-project-link a {
	color: var(--colorRose);
}

i {
	padding-right: 7px;
}

.python-button {
	background-color: rgb(255, 212, 59, 0.637);
	border: 2px solid rgba(255, 213, 59, 0.637);
	border-radius: 10%;
	color: rgba(0, 0, 0, 0.5);
	/* font-weight: bold;
    font-family: Calibri; */
}

#resume-iframe {
	height: 700px;
	width: 100%;
}

.fab, .fa{
	color: var(--colorRose);
}

@media only screen and (min-width: 1400px) {
	div.gray-section-1 {
		padding-bottom: 80px;
	}

	div.portfolio-gray-section {
		padding-bottom: 80px;
	}

}

@media only screen and (max-width: 767px) {
	/* For mobile phones: */
	img.cover-profile {
		border-radius: 50%;
		width: 80px;
		height: 80px;
		margin-left: -50px;
		margin-top: 75px;
	}

	h1 {
		font-size: 38px;
		margin-top: 6px;
	}

	div.cover p {
		font-size: 14px;
		margin: 8px;
	}

	div.section {
		padding: 30px 20px 30px 20px;
	}

	div.gray-section-1 {
		padding-bottom: 30px;
	}

	h2 {
		font-size: 28px;
		padding: 10px;
	}

	div.white-section2 {
		height: 100%;
		padding: 30px 40px 30px 40px;
	}

	.get-in-touch-frame {
		margin: 0 0;
		padding: 0 0;
	}

	.get-in-touch-title {
		grid-column: 2 / span 3;
	}

	.get-in-touch-p {
		grid-column: 3 / span 2;
	}

	div.portfolio-header-button {
		padding: 10px;
	}

	div.portfolio-header-button a {
		border: 2px solid var(--colorRose);
		padding: 1px 5px;
		font-size: 0.8em;
	}

	div.portfolio-header-button a:hover {
		border: 2px solid white;
	}

	div.portfolio-project-link > p {
		color: gray;
		visibility: visible;
	}
}

@media only screen and (max-width: 579px) {
	/* For mobile phones: */

	div.cover-button a {
		border: 2px solid var(--colorRose);
		padding: 5px 5px;
		margin-top: 5px;
    	width: 20%;
		display: inline;
	}

	div.cover-button a:hover {
		border: 2px solid white;
	}

	div.section {
		padding-top: 8px;
	}

	img.cover-profile {
		border-radius: 50%;
		width: 90px;
		height: 90px;
		margin-left: -50px;
		margin-top: 75px;
	}

	.card > a > img {
		object-fit: contain;
		max-height: 60%;
	}

	div.about-me-section {
		grid-template-columns: auto;
	}
	div.about-me-desc {
		padding-left: 0;
	}

	#contact-iframe {
		height: 200px;
		box-shadow: none;
	}

	.frame-profile-pic {
		border-radius: 50%;
		width: 70px;
		height: 70px;
	}

	.get-in-touch-title h3 {
		margin-bottom: 5px;
	}

	div.portfolio-header-name h3 {
		font-size: 1em;
	}

	div.portfolio-header-button {
		padding: 5px;
	}

	div.portfolio-header-button a {
		border: 1px solid var(--colorRose);
		padding: 1px 5px;
		font-size: 0.7em;
	}

	div.portfolio-header-button a:hover {
		border: 1px solid white;
	}

	div.portfolio-white-section {
		padding-top: 10px;
		margin-left: 10px;
		grid-template-columns: 0.01fr 4fr 0.1fr;
	}

	div.white-section {
		padding-top: 0;
	}

	div.portfolio-about-vertical-bar {
		margin: 10px;
	}

	div.portfolio-about-section p {
		font-size: 16px;
	}

	div.portfolio-project-pic {
		grid-column: 1 / span 3;
	}
}