/* CSS Document */
html,
body {
  height: 100%;
}

.banner {
    width: 100%;
}
h1 {
	font-size: 170%;
	color: #000000;
	font-weight: bold;
	text-align: center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.center-container{
	height: 100%;
   text-align: center;
	margin: 0 auto;
}


p {
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
}

a:link {
	color: Purple;
	font-weight: bold;
	text-decoration: none;
}

a:visited {
	color: Green;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: Yellow;
	font-weight: bold;
	background-color: Olive;
	text-decoration: underline;
}
a:active {
	color: Green;
	font-weight: bold;
	text-decoration: none;
}
ul#navlist
{
	margin-left: 0;
	padding-left: 0;
	display: inline-block;
	white-space: nowrap;
}

div.navcontainer {
	width: 70%;
	text-align: center;
	display: inline-block;
}

 #navlist li
{
	display: grid;
	list-style-type: none;
	margin-left: 20px;
	width: 250px;

}

#navlist a { padding: 2px 10px; }

#navlist a:link, #navlist a:visited
{
	color: #9932CC;
	background-color: #FFF8DC;
	border: 1px solid Black;
	font-size: 130%;
}

#navlist a:hover
{
	color: #FF8C00;
	background-color: #4682B4;
	text-decoration: none;
	font-size: 130%;
}
#navlist li a.active
{
	color: #FF8C00;
	text-decoration: none;
}
.mp3 {
	display: inline-block;

}

ul#mp3
{
	display: inline-block;

}

#mp3 li
{
	display: grid;
	margin-left: auto;
	list-style-type: none;
	line-height: 150%;
	font: 100%;
	font-weight: bold;
	color: Green;
}

/* RESPONSIVE IMAGE GRID */
.flex-container {
  display: flex;
  height: 300px;
}

#rowflex {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* RESPONSIVE IMAGE  */
.responsive {
  width: 100%;
  max-width: 450px;
  height: auto;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 33%;
  max-width: 33.3%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	width: 60%;
 margin-left: auto;
 margin-right: auto;

}

.grid > span {
padding: 8px 4px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  /* Rules for laptops, small desktop screens and bigger viewports */
div.navcontainer {
	width: 70%;
	text-align: center;
	display: inline-block;
	}

 ul#navlist
{
	white-space: nowrap;
	margin-left: auto;
}

#navlist li
{
	display: inline;
	list-style-type: none;
	margin-left: auto;
}

#navlist a { padding: 5px 10px; }

#navlist a:link, #navlist a:visited
{
	color: #9932CC;
	background-color: #FFF8DC;
	text-decoration: none;
	font-size: 110%;
}

#navlist a:hover
{
	color: #FF8C00;
	background-color: #4682B4;
	text-decoration: none;
	font-size: 110%;
}
}