body {
    font-family: georgia, times, serif;
    color:#333;
    font-size: 1.2rem;
    line-height: 1.2em;
    }

    p {
        margin-bottom: 1.2em;
    }

    .container {
      width: 85%;
      max-width: 850px;
      margin: 0 auto;
    }

    .header {
        background: lightblue;
        color: white;
        padding: 1rem 0;

        position: fixed;
        left: 0;
        top: 0;
        right: 0;
    }
    
        .header a {
        color: blue;
        text-decoration:: none;
        }

        .logo-nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            letter-spacing: 15px;
            font-size: 1.3em;
        }

        .menu-icon {
            display: none;
        }

        .navigation ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .navigation ul li {
            display: inline-block;
        }

        .navigation ul li a {
            display: block;
            padding: 0.5rem 1rem;
            transition: all 0.4s linear;
            border-radius: 5px;
        }

        .navigation ul li a:hover {
            background: #4a4a4a;    
        }

.main {
        padding-top: 7rem;
}

.footer {
        background: lightblue;
        padding: 1rem 0;
        text-align: center;
        margin-top: 1rem;
}

.tooltip {
 position: relative;
    text-align: center;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  font-size: 1rem;
  width: 600px;
  bottom: 100%;
  left: 50%;
  margin-left: -300px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
 
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 2s;
  
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
 @media only screen and (max-width: 767px) {
    .menu-icon {
        display: block;
        cursor: pointer;
        padding: 0.5rem 1rem;
    }

    .navigation {
        width: 100%;
        margen-top: 1rem;
    }

       .navigation ul {
           display: none;
       }

       .navigation ul.show{
           display: block;
       }

       .navigation ul li {
            display: block;
        }

        .navigation ul li a {
            display: block;
            padding: 0.5rem;
            transition: all 0.4s linear;
            border-radius: 5px;
        }
   
        .navigation ul li a:hover {
            background: #4a4a4a;    
        }