* {
	 margin: 0;
     padding: 0;
}

main {
	padding: 1vh;
}

.container{
	min-height: 90vh;
	max-height: 98vh;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 3fr 4fr 3fr;
	grid-template-rows: 1fr 2fr 4fr;
	grid-template-areas: 
	"nw st ft"
	"nw lg ft"
	"nw nv ft";
	gap: 1.5em;
}

.bandcontainer{
	height: 1000px;
	max-height: 98vh;
	width: 1000px;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 2fr 4fr 4fr;
	grid-template-rows: 1fr 3fr 3fr 1fr;
	grid-template-areas: 
	"tp tp tp"
	"nv if if"
	"nv if if"
	"bt bt bt";
	gap: 1.5em;
}

.micontainer{
	height: 1000px;
	max-height: 96vh;
	width: 1000px;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 2fr 5fr 1fr;
	grid-template-areas: 
	"tp tp"
	"ft ft"
	"tr nw"
	"nv nv"
	"bt bt";
	gap: 0.5em;
}

.biocontainer{
	height: 25vh;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 2fr 5fr;
	grid-template-rows: 1fr;
	grid-template-areas: 
	"ft if if"
	gap: 1.5em;
}

.tp {
	grid-area:tp;
}

.nv {
	grid-area:nv;
}

.if {
	grid-area: if;
	padding: .5em;
}

.bt {
	grid-area:bt;
}

.nw {
	grid-area:nw;
}

.tr {
	grid-area:tr;
}

.st {
	grid-area:st;
}

.lg {
	grid-area:lg;
}

.ft {
	grid-area:ft;
}	

.inver {
	background-color: black;
	color: white;
}

.review {
	max-width: 700px;
	min-width: 25em;
	margin-left: auto;
    margin-right: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	padding: .5em;
}

.todo {
	max-width: 40vw;
	min-width: 25em;
	margin-left: auto;
    margin-right: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	padding: .5em;
}


.blue {
  background-color: #2F83DE;
  margin-left: auto;
  margin-right :auto;
  padding: 15px 15px 15px 15px;
  border: 5px solid #1B58A8
}

.dark {
  background-color:#FFFFFF;
  border:5px solid #000000;
  color:#000000;
}

.indark {
  background-color: #FFFFF;
  border-bottom: 2.5px solid #000000;
  padding: 0.2em 0.5em 0.2em 0.5em;
}

.rainbow {
  letter-spacing: 5px;
  animation: colorRotate 6s linear 0s infinite;
}

@keyframes colorRotate {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff;
  }
}

.center {
	display: grid;
	place-content: center;
}

.middle {
	display: grid;
	justify-content: center;
}

.column {
	column-count: 4;
	column-gap: 3em;
	column-fill: auto;
}
p, li {
	 white-space: pre-wrap;
}

ul {
	list-style-type: ">";
	list-style-position: inside;
}

a {
	color: #B71C1C;
}

a:visited, a:focus {
	color: #F44336;
}

a:hover {
	color: #263238;
}