:root {
	--dark: #1E1E1E;
	--light: whitesmoke;
	--green: #00B20E;
	--background-color: var(--light);
	--color: var(--dark);
}

:root.dark-mode {
	--background-color: var(--dark);
	--color: var(--light);
}

body {
	/*background-color: #1E1E1E;
	color: whitesmoke;*/
	background-color: var(--background-color);
	color: var(--color);
}

nav a {
	display: block;
	text-decoration: none;
	/*background-color: #1E1E1E;*/
	color: #00B20E;
	padding: .2em;
	margin: .2em;
	border-bottom: 1px dotted #00B20E;
}

nav a:focus,
nav a:hover,
nav span {
	/*color: #0D1B3C;
	background-color: #00B20E;*/
	color: var(--background-color);
	background-color: var(--green);
}	


main {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	flex-grow: 1;
    flex-direction: row;
	display: flex;
}
header {
	display: flex;
	flex-direction: row;
	background-color: #00B20E;
	margin-bottom: 1%;
	justify-content: center;
	/*color: #1E1E1E;*/
	color: var(--background-color);
}

.rowFlex {
  display: flex;
  flex-direction: row;
}

.navFlex {
  display: flex;
  flex-direction: column;
  width: 15%;
}
.columnFlex {
  display: flex;
  flex-direction: column;
  width: 15%;
}

.itemDiv {
  /*border: 1px dotted black;*/
  border-radius: 4px;
  padding: 1%;
  width: 80%;
  margin-right: 1%;
  margin-bottom: 1%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.item {
  /*border: 1px dotted black;*/
  border-radius: 4px;
  padding: 1%;
  margin-right: 1%;
  margin-bottom: 1%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

footer {
	color: #00B20E;
}

button {
    width: 200px;
    height: 50px;
	/*background-color: #00B20E;
	color: #1E1E1E;*/
	border: black;
	margin-left:2px;
	margin-right:2px;
	margin-top:2px;
	margin-bottom:2px;
}

h2 {
    color: #00B20E;
}