* {
	box-sizing: border-box;
}

html {
	--scrollbarBG: #000000;
	--thumbBG: #ac44cf;
}

body::-webkit-scrollbar {
	width: 15px;
}

body::-webkit-scrollbar-track {
	border: 1px solid #231F20;
	background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 0px;
	border: 0px solid var(--scrollbarBG);
}

body {
	margin: 0;
	padding: 0;
	background-color: #231F20;
	color: white;
	font-size: 16px;
	font-family: 'Josefin Sans', sans-serif;
	text-align: center;

	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

h1,h3 {
	color: white;
	font-size: 32px;
	width:100%; 
	margin-left: auto; 
	margin-right: auto;

	font-family: 'Red Hat Display', sans-serif;
}

img {
	margin:0;
	padding:0;
}

p {
	font-family: 'Josefin Sans', sans-serif;
}

.myContainer {
	display: flex;
	flex-wrap: wrap;
}

.myContainer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: none;
  width: 33%;
  justify-content: space-between;

}

.myContainer li {

}

.myContainer li a {
	text-decoration-line: none;
	display: block;
	padding: 20px;
	margin: 0;
	color: white;

	font-family: 'Red Hat Display', sans-serif;
}

.myContainer li a:hover {
	transition-duration: 0.5s;
	background-color:  #bb1133;
}

a {
	text-decoration-line: none;
	background-color: rebeccapurple;
	padding: 20px;
	margin: 0;
	color: white;
	justify-content: space-between;
	font-family: 'Red Hat Display', sans-serif;
}

iframe {
	height: 404;
	width: 404;
}

.frameChange {
	height: 304;
	width: 604;
}

.fullBanner {
	width:100%;
}

.myNavBar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rebeccapurple;
  position: sticky;
  top: 0;

}

.myNavBar li {
  float: right;
}

.myNavBar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: rebeccapurple;
}

.myNavBar li a:hover {
	transition-duration: 0.5s;
	background-color: #ac44cf;
}
/* Use classes when using html / css together */
/* id's are used mainly for JavaScript */

.active {
	background-color: grey;
}

.row-1 {
	background-color: deepskyblue;
}


.row-1:hover {
	transition-duration: 0.5s;
	background-color: royalblue;
}

.row-2 {
	background-color: rebeccapurple;
}

.row-2:hover {
	transition-duration: 0.5s;
	background-color: indigo;
}

.row-3 {
	background-color: limegreen;
}

.row-3:hover {
	transition-duration: 0.5s;
	background-color: seagreen;
}

.row-4 {
	background-color: crimson;
}

.row-4:hover {
	transition-duration: 0.5s;
	background-color: firebrick;
}

.notes {
	width: 85%;
	text-align: left;
	display: inline-flex;
	justify-content: center;
}

pre {
	width: 85%;
	text-align: left;

	overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.footer {
	margin-top: 30px;
	padding: 15px;

}

@media (min-width: 300px) {
	.span {
		width: 100%;
		margin:0;
		padding: 15px;
	}

	.spanHalf {
		width: 100%;
		margin: 30px;
	}

	.flexCol {
		width: 100%;
	}
}

@media (min-width: 574px) {
	.span {
		width: 100%;
		margin:0;
		padding: 15px;
	}

	.spanHalf {
		width: 45%;
		margin: 30px;
	}

	.flexCol {
		width: 100%;
	}
}

@media (min-width: 769px) {
	.span {
		width: 100%;
		margin:0;
		padding: 15px;
	}

	.spanHalf {
		width: 45%;
		margin: 30px;
	}

	.flexCol {
		width: 50%;
	}

}

@media (min-width: 992px) {
	.span {
		width: 100%;
		margin:0;
		padding: 15px;
	}

	.spanHalf {
		width: 45%;
		margin: 30px;
	}

	.flexCol {
		width: 50%;
	}

}

@media (min-width: 1200px) {
.span {
	width: 100%;
	margin:0;
	padding: 15px;
}

.spanHalf {
	width: 45%;
	margin: 30px;
}

.flexCol {
	width: 33%;
}
}

@media (min-width: 1400px) {
.span {
	width: 100%;
	margin:0;
	padding: 15px;
}

.spanHalf {
	width: 45%;
	margin: 30px;
}

.flexCol {
	width: 33%;
}
}