body {
    font-family: 'Nunito', Verdana, sans-serif;
    font-size: 16px;
    margin: 0;
    color: #D9D9D9;
    background-color: white;
    background-image: url("images/blackTile.png");
    background-attachment: fixed;
}


header {
    display: block;
    unicode-bidi: isolate;
    margin-left: 25%;
    margin-right: 25%;
    background-color: #46237A;
}

.btn-group {
  align-items: center;
  justify-content:center;
  border-radius: 5px;
}

.btn-group button {
    background-color: #8B35AA;
    font-family: "VT323", monospace;
    font-size: 24px;
    border: 1px solid #46237A;
    color: #D9D9D9;
    padding: 10px 24px;
    cursor: pointer;
    float: left;
    border-radius: 5px;
}

.btn-group,.top{
    width: 100;
    background-color: #8C609C;
    border-radius: 5px;
  }
    

.btn-group button:not(:last-child) {
    border-right: none;
}

.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

.btn-group button:hover {
    background-color: #46237A;
}

h1 {
 color: #4ca626;
 overflow: auto;
 font-family: "VT323", monospace;
 font-size: 48px;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

header img {
    max-width: 100%;
}

div {
    display: block;
    unicode-bidi: isolate;
}

#mainContainer{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  margin-left: 25%;
  margin-right: 25%;
  }
  
#flex {
  display: flex;
  max-width: 100%;
  margin: auto;
  }
  
#content-flexbox {
  display: flex;
  width: 100%;
  padding: 5px;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
}
  
#sideBar {
    display: flex;
    flex-direction: column;
    max-width: 240px;
    width: 240px;
    padding: 1em;
    margin-right: 10px;
    border: 2px solid #4ca626;
    border-radius: 25px;
    background-color: #46237A;
    border-radius: 10px;
}

main {
    background: grey;
    background-image: url("images/Ants.png");
    /*box-shadow: 2px 2px 6px 2px;*/
    max-width: 1160px;
    width: 1160px;
    border: 2px solid #4ca626;
    border-radius: 25px;
    text-align: center;
}

@media only screen and (max-width: 1440px) {
  #mainContainer {max-width: 960px;}
  #flex {flex-wrap: wrap;}
  main {max-width: 700px;}
  #page-desc {max-width: 100%;}
}
@media only screen and (max-width: 800px) {
  #mainContainer {
    max-width: 800px;
    width: 100%;
  }
}
.games{
  display: flex;
  justify-content: center; 
  align-items: center}

.games td{
  border: 2px solid black;
  }

.games img{
   border-radius: 20%;
    height: 25%;
    width: 25%;
  }