nav {

    display: flex;
  
    justify-content: space-around;
  
    align-items: center;
  
    min-height: 8vh;
  
    background-color: #3486d2;
  
  }
  
  .heading {
  
    color: white;
  
    text-transform: uppercase;
  
    letter-spacing: 5px;
  
    font-size: 20px;
  
  }
  
  .nav-links {
  
    display: flex;
  
    justify-content: space-around;
  
    width: 30%;
    
    float: right;
  
  }
  
  .nav-links li {
  
    list-style: none;
    
    float: right;
  
  }
  
  .nav-links a {
  
    color: white;
  
    text-decoration: none;
  
    letter-spacing: 3px;
  
    font-weight: bold;
  
    font-size: 25px;
  
    padding: 14px 16px;

    float: right;
  
  }
  
  .nav-links a:hover:not(.active) {
  
    background-color: #370fa7;
  ;
  
  }
  
  .nav-links li a.active {
  
    background-color: #370fa7;
  
  }

  #secret {

    float: right;

    background-color: burlywood;

  }

    #secret a:hover:not(.active) {

      float: right;

      background-color: burlywood; 
    ;

  }
  
  #secret li a.active {

      float: right;

      background-color: #370fa7;
    ;

  }

  .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
  }
    
  .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      bottom: 100%;
      left: 50%;
      margin-left: -60px;
  }
    
  .tooltip:hover .tooltiptext {
      visibility: visible;
  }

  #title {
    background-image: url("imgs/title-background.gif");
    background-size: 1920px;
    font-family: 'Fredoka One', cursive;
    text-align: center;
    font-size: 64px;
    height: 100%;
    width: 100%;
    color: #E4E2EA;
  }

  #tabtitl {
    width: 100%;
    background-color:rgba(0, 0, 0, 0.5);;
    font-family: 'Karla', sans-serif;
  }