@font-face {
	font-family:customCursive;
	src:url("/fonts/Lucian-Schoenschrift-CAT.ttf");
	font-display:swap;
}

p {
	font-size:1.3em;
}

* {
	font-family:"Times New Roman",serif;
	transition:0.5s;
}

body {
	margin:0;
}

#main-content {
	width:76vw;
	margin:auto;
}

/* header.php */
#header {
	top:0;
}
#header::after {
	content:"";
	clear:both;
	display:table;
}
#header.small {
	position:-webkit-sticky;
	position:sticky;
}

#branding {
	float:left;
	margin:1.5vw 0 0 4vw;
	padding:10px;
	color:black;
	text-decoration:none;
	font-size:6em;
	font-family:customCursive,"Brush Script MT","Brush Script Std",cursive;
}
#branding.small {
	transform:rotateZ(90deg);
	transform-origin:left;
	margin-left:3.1vw;
	padding:0;
	font-size:min(6em,9vw);
	width:max-content;
}

#socialMedia {
	float:right;
	display:flex;
}
#socialMedia.small {
	margin:0 4vw 0 0;
	transform:rotateZ(-90deg);
	transform-origin:right;
}

.siteNav {
	clear:both;
	display:flex;
	justify-content:center;
	padding:1vw;
}

.spacerDiv {
	width:calc((100vw - 9em) / 6 - 5px);
	max-width:1.5em;
}

.secBtn {
	border-left:none;
	border-top:none;
	border-right:none;
	border-bottom:lightgray 0.5vw;
	border-bottom-style:double;
	border-radius:0;
	background-color:transparent;
	color:black;
	font-size:2em;
	padding:0.5vw 2vw;
}
.secBtn:hover {
	border-bottom-color:black;
	border-radius:10px;
}

.socialIcon {
	height:5em;
	margin:1vw 0 0 0;
	padding:1vw;
}
.socialIcon:hover {
	cursor:pointer;
	border-radius:10px;
	box-shadow:4px 4px 5px 2px grey;
}
.socialIcon.small {
	transform:rotateZ(90deg);
	height:5vw;
	margin:0 0 0 2vw;
}

@media (max-width: 1015px) {
	#header {
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	#branding {
		font-size:5em;
		margin-left:0;
	}
	#branding.small {
		padding-bottom:4vw;
	}
	.socialIcon {
		height:3em;
	}
	.siteNav {
		display:none;
	}
	#header.small {
		display:block;
	}
}

/* index.php */
#aboutContainer {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:space-around;
}

.profilePic {
	width:100%;
	max-width:1000px;
	border-radius:30px;
}

#profileDiv {
	min-width:30%;
}

#profileDiv, #aboutDiv {
	margin:10px;
}

.exp-div {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-content:center;
	justify-content:space-between;
	align-items:center;
	border:2px solid black;
	border-radius:30px;
	margin:10px;
}

.exp-logo {
	width:160px;
	height:160px;
	margin:20px;
}

.exp-text {
	margin:1vw;
}
.exp-text h2, .exp-text h3, .exp-text h4 {
	margin:0.3em;
}

#techs {
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	align-content:center;
}

.tech-div {
	border-left:2px solid black;
	border-right:2px solid black;
	border-radius:15px;
	padding:10px;
	margin:10px;
}

.tech-logo {
	width:140px;
	height:140px;
}

#projs {
	display:grid;
	grid-template-columns:70% 30%;
}

.proj-div, #proj-disp {
	border:2px solid black;
	border-radius:15px;
	margin:10px;
	padding:5px;
}
.proj-div {
	display:flex;
	align-items:center;
	justify-content:center;
}
.proj-div:hover {
	cursor:pointer;
	box-shadow:4px 4px 5px 2px grey;
}
.proj-div.selected {
	border:2px dashed grey;
}
.proj-div.selected:hover {
	cursor:unset;
	box-shadow:none;
}

.proj-title.selected {
	margin-right:100%;
	margin-left:-100%;
	opacity:0;
}

.proj-text {
	display:none;
}

.rec-div {
	border:2px solid black;
	border-radius:15px;
	padding:10px;
	margin:10px;
}

.rec-div h2, .rec-div h3, .rec-div h4 {
	margin:0.3em;
}

.recommendation {
	font-size:1.5em;
}

.recommendationAuthor {
	font-size:1.3em;
}

@media (max-width: 700px) {
	#aboutContainer {
		flex-direction:column;
	}
	.exp-div {
		flex-direction:column;
	}
	#projs {
		grid-template-columns:initial;
	}
	#proj-list {
		display:grid;
		grid-template-columns:auto auto;
		grid-row:1;
	}
}

/* footer.php */
#footer {
	background-color:black;
	overflow:auto;
	box-shadow:0px -3px 7px 3px black;
	padding:5px;
}

.footerText {
	color:white;
}