#container {
  display: flex;
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px;
}
.cardtitle {
  font-family: 'Courier New', Courier, monospace;
}

.cardtext {
  padding-bottom: 20px;
  font-family: 'Courier New', Courier, monospace
}

#banner {
  font-family: 'Courier New', Courier, monospace;
  color:  #37ff00;
  font-size: 20px;
}
#banner {
  display: flex;
  justify-content: center; /* inside horizontally center */
  align-items: center; /* inside vertically center */
  background-image: url("")
  background-size: cover; /* make picture take entire width */
  height: 200px;
  border-radius: 5px; /* round corners */
}
#nav {
  display: flex;
  min-height: 100px;
  background-color: rgb(0, 0, 0);
  padding: 10px;
}

#sitelogo img {
  height: 100px;
}
#links {
  flex-basis: 80%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#links li {
  display: inline;
  margin-left: 10px;
  font-family: 'Courier New', Courier, monospace;
}

#links a {
  text-decoration: none;
  font-size: 25px;
  font-family: courier 'Courier New', Courier, monospace;
  color: #37ff00;
}

#links .button {
  background-color: #37ff00;
  color: rgb(0, 0, 0);
  border-radius: 5px;
  padding: 5px;
  margin-left: 25px;
}

#bar9 {
  background-image: url("https://i.ytimg.com/vi/oMQhHFqD8k0/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar1 {
  background-image: url("https://i.ytimg.com/vi/V4ylwJoW_Z0/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar2 {
  background-image: url("https://i.ytimg.com/vi/kY63kqa0FPg/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar3 {
  background-image: url("https://i.ytimg.com/vi/1R5Dy3jdWtY/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar4 {
  background-image: url("https://i.ytimg.com/vi/4DCWdeLqLKE/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar5 {
  background-image: url("https://i.ytimg.com/vi/UA_jMGIfjw0/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar6 {
  background-image: url("https://i.ytimg.com/vi/-9HWgxB8aIU/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar7 {
  background-image: url("https://i.ytimg.com/vi/BzBYaKglR_k/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar8 {
  background-image: url("https://i.ytimg.com/vi/54zxbNhxaKE/mqdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar10 {
  background-image: url("https://i.ytimg.com/vi/N5WE767OMvM/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar11 {
  background-image: url("https://i.ytimg.com/vi/3Ix7_oN69rw/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar12 {
  background-image: url("https://i.ytimg.com/vi/epRMQyMPaeA/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar13 {
  background-image: url("https://i.ytimg.com/vi/QlfHrIQ6PvA/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar14 {
  background-image: url("https://i.ytimg.com/vi/uol8wpCYQGc/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar15 {
  background-image: url("https://i.ytimg.com/vi/5PZU0PMTEhY/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar16 {
  background-image: url("https://i.ytimg.com/vi/EL18oDbwjp0/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar17 {
  background-image: url("https://i.ytimg.com/vi/odw-yI0Qt4Q/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar18 {
  background-image: url("https://i.ytimg.com/vi/Vj2kcXH1yS4/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar19 {
  background-image: url("https://i.ytimg.com/vi/zDwtATQqiWU/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar20 {
  background-image: url("https://i.ytimg.com/vi/N3isNtomGYM/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar21 {
  background-image: url("https://i.ytimg.com/vi/dprCa-_uXxU/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar22 {
  background-image: url("https://i.ytimg.com/vi/sIw783ml9YY/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar23 {
  background-image: url("https://i.ytimg.com/vi/iM6w9UrqxAw/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar24 {
  background-image: url("https://i.ytimg.com/vi/RW5TA2rTT7w/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar25 {
  background-image: url("https://i.ytimg.com/vi/jHqjQwnvlAM/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar26 {
  background-image: url("https://i.ytimg.com/vi/gs9IKQ0B87g/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}
#bar27 {
  background-image: url("https://i.ytimg.com/vi/-2CanMTvNfQ/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBdvoe5AZ9CYyILhjTXHvYcj2jnIQ");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar28 {
  background-image: url("https://i.ytimg.com/vi/aGURlDVOJFs/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}#bar29 {
  background-image: url("https://i.ytimg.com/vi/4TzfnS8dqOE/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar30 {
  background-image: url("https://i.ytimg.com/vi/elhAS0of00w/maxresdefault.jpg?v=5fee5c6f");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}#bar31 {
  background-image: url("https://i.ytimg.com/vi/u6Gwt0rDXsU/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

#bar32 {
  background-image: url("https://i.ytimg.com/vi/tzBg5WNPsmU/maxresdefault.jpg");
  background-size: cover; /* make picture take entire width */
  flex-basis: 50%;
  height: 300px;
  border-radius: 5px; /* round corners */
  margin: 5px;
}

.bar {
  padding: 20px;
  background-color: #37ff00;
  flex-basis: 25%;
  margin: 10px;
  border-radius: 5px;
  flex-grow: 1;
}
a {
  padding: 10px;
  font-family: 'Courier New', Courier, monospace;
  background-color: #000000;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}