:root {
  --light: #EDEFEC;
  --accent-light: #E5BD55;
  --main: #206928;
  --accent-dark: #5C919F;
  --dark: #1F022A;
  --red: #F43346;
}
::-webkit-scrollbar {
    width: 10px;
	background-color: none;
}
::-webkit-scrollbar-thumb {
	background: var(--accent1);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent2); 
}


/*************/
/* TITLE BAR */
/*************/
.title {
	font-size: 27px;
	text-align:center;
	margin-top: 10px;
	font-weight: bold;
	color: var(--main);
}

.topbar {
    background-color: var(--light);
	font-family: 'Lato', sans-serif;
	margin: 5px;
    overflow: hidden;
	border-radius: 5px;
}

.topbar a {
    float: left;
    color: var(--dark);
	font-family: 'Lato', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
	font-weight: 700;
    letter-spacing: 0.06em;
}

.topbar a:hover {
    background-color: var(--accent-light);
    color: black;
}

.topbar a.active {
    background-color: var(--accent-dark);
    color: var(--light);
}

span.left {
	float:left;
}
span.right {
	float:right;
}


/******************/
/* BODY / GENERAL */
/******************/
body {
	font-family: 'Lato', serif;
	background-color: var(--dark);
}

.mainbody {
	background-color: var(--light);
	padding: 25px;
	padding-bottom: 50px;
	margin: 10px 5px;
	margin-bottom: 40px;
	overflow-x:auto;
	border-radius: 5px;
}

button {
	background-color: var(--main);
	color: var(--light);
	font-family: 'Lato', sans-serif;
	border:none;
	text-decoration:none;
	padding: 15px 32px;
	margin: 10px 5px;
	font-size: 14px;
	border-radius: 5px;
}

button:hover {
	background-color: var(--accent-light);
}

.centered {
	text-align: center;
}

.topButton {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 5px;
    font-size: 18px;
}

h3 {
	margin: 5px 0px 10px 0px;
	color: var(--main);
	font-weight: 700;
}

h4 {
	margin: 0px 0px 10px 0px;
	color: var(--accent-light);
}

.flexbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
}
.genericflexbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
}
.projectflexbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
}

.flexitem {
	width: 300px;
	height: 360px;
	margin: auto;
	margin-bottom: 20px;
	padding: 25px;
	border-radius: 5px;
}
.fancyflexitem {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: var(--accent-dark);
	color: var(--light);
}
.genericflexitem {
	max-width: 500px;
	margin: auto;
	padding: 10px;
	border-radius: 5px;
}
.projectflexitem {
	max-width: 400px;
	padding: 10px;
	border-radius: 5px;
}
.projectflexitemsmall {
	max-width: 275px;
	padding: 10px;
	margin: 10px;
	border-radius: 5px;
}

.genericflexitem img {
	height:auto;
	width:500px;
	margin: 0;
	object-fit: cover;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius:3px;
}
.projectflexitem img {
	height:auto;
	width:400px;
	margin: 0;
	object-fit: cover;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius:3px;
}
.projectflexitemsmall img {
	height:auto;
	width:275px;
	margin: 0;
	object-fit: cover;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius:3px;
}

.flexitem img {
	height:180px;
	width:300px;
	margin: 0;
	object-fit: cover;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius:3px;
}
.flexitem:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.38);
	cursor: pointer;
}
.fancyflexitem h3 {
	color: var(--accent-light);
}

.memeflexitem {
    height:auto;
    width:auto;
    margin: auto;
	padding: 10px;
	border-radius: 5px;
}
.memeflexitem img {
    max-width: 400px;
	margin: 0;
	object-fit: contain;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius:3px;
}

ul {
  list-style-type: square;
}

/**************/
/* ABOUT PAGE */
/**************/
.biopic {
	height:150px;
	width:150px;
	margin:5px 10px;
	border:5px solid var(--accent1);
	object-fit: cover;
}

table.personlist {
	max-width:1000px;
}

td {
	vertical-align:middle;
}


/**********/
/* TABLES */
/**********/
table#comparetable, table#comparetable th, table#comparetable tr, table#comparetable td {
	border: 3px solid var(--dark);
	border-collapse: collapse;
	padding: 10px;
	text-align: center;
}
table#comparetable th.period {
	padding-left: 0;
	padding-right: 0;
}

table#comparetable tr:nth-child(odd) {
	background-color: #fefefe;
}
table#comparetable tr:hover {
	background-color: #ccc;
}
table#comparetable th {
	background-color: var(--accent-light);
	color: white;
}


/*********/
/* FORMS */
/*********/
form {
	margin: 5px;
	line-height: 1.5em;
}

input, select {
	padding: 4px 2px;
	border: 2px solid white;
	background-color: white;
}
textarea {
	resize: none;
	border: 2px solid white;
	font-family : 'Lato',sans-serif;
}
input:focus, textarea:focus {
	border: 2px solid var(--accent-light);
}
input[type=file] {
	background: none;
	border: none;
}