:root {
	--color-light: #FFF5EA;
	--color-dark:#2F4161;
	--color-darkold: #33506A;
	--color-darktext: black;
	--color-accent1old: #80ded9;
	--color-accent2old: #FAA2CE;
	--color-border: #B7E1DC;
	--color-accent1: #FFC6AD;
	--color-accent2: #235789;
	--color-newlink: lightblue;
	--color-usedlink: gray;
}

body {
  background-color: var(--color-light);
  color: var(--color-darktext);
  font-family: Georgia, serif;
  font-size: 1.2em;
  margin: 30px;
}
@font-face {
  font-family: "aesthetic";
  src: url("fonts/Aesthetic-Regular.woff2") format("woff2");
  src: url("fonts/Aesthetic-Regular.woff") format("woff");
  src: url("fonts/Aesthetic-Regular.otf") format("opentype");
}



/*header*/
.header  {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 10px 16px;
	background: var(--color-dark);
	color: var(--color-light);
	text-align: center;
	font-family: "aesthetic", cursive;
}

.header a, .header a:active, .header a:visited, .header a:hover {
	text-decoration:none;
	color: var(--color-light);
}

/**Containers**/
.flex-container {
  display: flex;
  width: 95%;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
  flex-wrap: wrap;
}


/*home page - profile*/
.centerimage {
	margin:auto;
    padding:40px;
    width:80%;
    min-width:250px;
}

.centerimage img{
    width:100%;
}

.profile {
	display: flex;
  flex: 8;
  border: 4px solid var(--color-border);
  padding: 8px;
}
.profilepic {
	float: left;
	padding: 7px;
	text-align: center;
	width: 250px;
}
.profilepic img {
  width: 100%;
  display: block;
}
.profilepic a{
	display: block;
	margin-top: 5px;
	font-size: 1.2rem;
}
.profile-content {
	float: left;
	flex: 1;
}
.profile a{
	color: black;
	color:visited: gray;
}
.profile a:hover{
	background: var(--color-accent2);
	color: white;
}
.profile hr {
	color: var(--color-accent2);
}

.main-pic {
	display: flex;
	justify-content: center;
	width: 90%;
	margin: 8px auto;
}
.main-pic img {
    display: flex;
    width:100%;
}

/*NA172 photo journal*/
.journal-pic-portrait {
	display: flex;
	width: 40%;
	margin: 8px;
	justify-content: center;
}

.journal-pic-portrait img {
	width: 90%
}

.journal-pic-landscape {
	display: flex;
	justify-content: center;
	width: 90%;
	margin: 8px;
}

.journal-pic-landscape img {
	width: 90%;
}

.caption {
	font-family: sans-serif;
	font-size: 0.9em;
	width: 70%;
	margin: auto;
	margin-bottom: 30px;
}
	
/*sidebar*/
.sidebar {
  flex: 2;
  margin-left: 20px;
  border: 4px solid var(--color-border);
  background: var(--color-dark);
  padding: 8px;
}
.sidebar h3 {
  text-align: center;
  color: var(--color-accent1);
  margin-top: 20px;
  margin-bottom: 5px;
}
.sidebar hr {
  color: var(--color-accent2);
}
.side-content{
	display: flex;
	justify-content: center;
}
.sidebar a {
  margin: auto;
}

.sidebar img{
	display: block;
	margin: auto;
	max-width: 150px;
}

/*2026 photo journal*/
.hover-caption {
	position: absolute;
	bottom: 0px;
	left: 0px;
	margin: 8px;
	padding: 8px;
	height: 100%;
	width: 100%;
	align-items: center;
	opacity: 0%;
	background: black;
	display: flex;
	text-align: center;
	z-index: 0;
}

.hover-caption p{
	font-size: .8em;
	color: white;
}

.hover-caption:hover {
	opacity: 100%;
	background: rgba(0, 0, 0, 0.55);
}

.portrait-stack {
	display: contents;
	margin-bottom: 75px
}

.portrait-stack-wrapper {
  display: flex;
  width: 95%;
  padding: 20px;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 150px;
  flex-wrap: wrap;
  align-items: stretch;
}

.portrait-stack-3 {
	display: flex;
  width: 95%;
  padding: 20px;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 150px;
  flex-wrap: wrap;
  align-items: stretch;
}

.portraitleft {
	flex: 1;
	padding: 8px;
	float: left;
	position: relative;
}

.portraitleft img {
  width: 100%;
  display: block;
  order: 1;
}

.portraitright {
	flex: 1;
	padding: 8px;
	float: right;
	order: 3;
	position: relative;
}

.portraitright img {
  width: 100%;
  display: block;
}

.portraitcenter {
	flex: 1;
	padding: 8px 46px 8px 46px;
	margin: auto;
	position: relative;
}

.portraitcenter img{
	width: 100%;
	display: block;
}

.landscape-stack {
	display: contents;
}

.landscaperight {
	flex: 8;
	padding: 8px;
	float: right;
	position: relative;
}

.landscaperight img{
	width: 100%;
	display: block;
}

.landscapeleft {
	flex: 8;
	padding: 8px;
	float: left;
	position: relative;
}

.landscapeleft img{
	width: 100%;
	display: block;
}

.lefttext {
	flex: 5;
	padding: 30px;
	margin: 8px 70px 8px 8px;
	align-items: center;
	display: flex;
	background: var(--color-accent1);
}

.centertext {
	flex: 1;
	padding: 80px;
	margin: 8px 25px;
	order: 2;
	display: flex;
	align-items: center;
	background: var(--color-accent1);
}

.righttext {
	flex: 5;
	padding: 30px;
	margin: 8px 8px 8px 70px;
	align-items: center;
	display: flex;
	background: var(--color-accent1);
}

/* Signature */
.signature-box {
	display: block;
	position: relative;
	text-align: right;
	width: 80%;
}

.signature-box h1{
	font-family: "aesthetic", cursive;
}

/*footer*/
.div-right {
	float: right;
}

/*media queries*/
@media screen and (max-width:800px) {
/*profile and sidebar*/
	.profile, .sidebar {
		flex: 100%;
		margin: 20px 30px;
		flex-direction:column;
	}
	.centerimage {
	    width: 100%;
	    padding: 40px 0 8px 0;
	}
	.profilepic {
	    width: 100%;
	    max-width: 250px;
	}
	
/*photo journal*/
	.flex-container {
		padding: 10px;
		align-items: stretch;
	}
	.hover-caption {
		opacity: 100%;
		background: rgba(0, 0, 0, 0.55);
		height: auto;
		width: auto;
		font-size: .7em;
		padding: 6px;
	}
	.portrait-stack {
		display: flex;
		flex-direction: column;
		order: 1;
		margin-bottom: 0px;
	}
	.portrait-stack-3 {
		display: flex;
		flex-direction: column;
		order: 1;
		margin-bottom: 0px;
	}
	.portraitleft, .portraitright {
		flex: 1;
		padding: 8px;
	}
	.centertext {
		flex: 1;
		padding: 18px;
		width: 100%;
		order: 2;
		box-sizing: border-box;
	}
	.landscape-stack {
		display: flex;
		flex-direction: column;
	}
	.landscaperight, .landscapeleft {
		flex: 1;
		padding: 8px;
		order: 2;
	}
	.lefttext, .righttext {
		order: 1;
		flex: 1;
		margin: 8px;
		margin-bottom: 150px;
	}
}