body {
    background-color:#121212;
    color: #f5f5f5;
    font-size:20px;
    font-family: 'Lato', sans-serif;
    width:1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    
  }
  
  h1 {
    font-family: 'Shojumaru', cursive;
    color: #f5f5f5
  }
  
  
  ol li{
    background-color:#2a2a2a;
    padding:20px;
   
  }
  
  
  table{
   
    border-spacing:0px;
    display: none;
   
  }
  
  
  th{
     background-color:#202020;
      padding:10px;
  }
  
  
  th,td{
    
    width:150px;
    height:auto;
    text-align:center;
   
  }
  
  
  
  /*the child element selector refers to the tables that are placed inside the "li" element over which the cursor has been moved, which in our case is a particular game*/
  li:hover table {
  display: block;/*when you hover the cursor over the element, the list of games is displayed*/
  border-bottom:1px solid #538771;
  }
  
  
  li:hover span{
    color:#a13938;
    transition-duration:0.5s
  }
  
  .description{
    
    width:400px;
    font-size:18px;
    text-align:left;
  }
  
  .seeMore,#quiz{
    display:block;
    text-align:center;
    text-decoration:none;
    background-color:#0078f2;
    opacity:0.8;/*opacity between 0.0-1*/
    padding:20px;
    border-radius:4px;
    color:#ffffff;
    margin-top:5px;
    margin-bottom:10px;
  }
  
  .seeMore:hover,#quiz:hover{
    background-color:#cddae3;
    color:#1d3b4f;
    transition-duration:0.5s;/*time to load the new style instructions*/
  }
  
  #quiz{
    position:absolute;
    top:0px;
    right:0px;
  }
  
  
  
  /*subpages*/
  
  
  #navigation{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#2a2a2a;
    list-style-type: none;/*disable default dots for each list item*/
    border-radius:1px;/*rounding the corners of the border*/
    position:sticky;/*We "glue" the top navigation bar*/
    top:0px;/*the distance of the navigation bar from the top edge at the time of sticking*/
    z-index:5;/*the order in which the items are displayed*/
    
  }
  
  #navigation li{
    
    padding:15px;
    display:inline-block;/*we display list items on one line, not one below the other*/
  }
  
   li a{
    
    text-decoration:none;/*turn off the default text underline*/
    color:#d9dadd;/*the colour of the text*/
    letter-spacing:0.3px;
  }
  
  
  #navigation li:hover{
    background-color:#cddae3;
    transition-duration:0.5s;
  }
  
   #navigation li:hover a{
    
    color:#1d3b4f;
    transition-duration:0.5s;
    
  }
  
  
  #container{
    width:990px;
    padding:25px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color:#2a2a2a;
  }
  
  
  .gallery{
    width:300px;
    height:200px;
    object-fit:cover;
  }
  
  .gallery:hover{
  opacity:0.5;
  
  }