#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: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#links li {
  display: inline;
  margin-left: 5px;
  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/M6suTS4-ENc/mqdefault.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/tJTWF1_Js0w/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/T2htpVMWI_I/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/y7xbEa80ybk/maxresdefault.jpg?x-oss-process=image/resize,m_lfit,h_78,w_140");
  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/IjcXJ8SMQNI/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/uiRwyJQbing/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/MH1Ry4_hcaE/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/pT0K1ugyJRg/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBlth8YfIP8gkf3LUgQeQIzm9QWlw");
  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/XHuln9vd5JY/maxresdefault.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/TRwa3w5Z4zU/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/IA_KGqmd81E/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/XZ2YN_aJqRQ/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/NDXAaiXBJZg/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLDE0-rd32_uYpkZou2pJYX43i6itw");
  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/N4OTXutSHq4/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/HDKd4j9mlvQ/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/PTovUGVRf40/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/QyHPIacYFIc/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/TQJFoaWTm_c/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/RGbCHyiR--Q/mqdefault.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://static.wikia.nocookie.net/matthiasiam/images/9/9b/S1E21_%28Redo%29.png/revision/latest?cb=20210326011450");
  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://img.youtube.com/vi/HNm30nPR6Lc/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/0vI4qGJGZo4/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/PbFGCmc1HmA/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC3sLe4NHfNUEky79gkE2fDbfk2mQ&days_since_epoch=18739");
  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/TJV8K7VXjpE/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;
}