body {
    background: rgb(240, 240, 245);
  }
  
  .skyblue {
    background: rgb(255, 243, 230);
  }
  
 .box{
    padding: 10px;
    background: rgb(255, 255, 255);
    margin-top:auto;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:20px;
    align-content: center;
  }
  
  .navbar {
    margin-right: 0px;
    margin-left: 0px;
    padding: 0px;
    background: rgb(255, 255, 255);
  }
  
  .navbar li {
    display: d-block;
    padding: 10px;
    margin-right: 0px;
    margin-left: 0px;
    cursor: pointer;
  }
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 22px;
  }
  
  p{
      font-size: 18px;
  }
  
  .c-d{color:white;
    font-size: 30px;
  }
  
  .latitude {
    color: black;
    font-family: verdana;
    font-size: 45px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(39, 219, 150);
      padding: 15px;
  }

  @media (max-width: 500px) {
    .navbar li {
      padding: 10px;
    }
    .box {
      margin-right: 22px;
      margin-left: 22px;
    }
    .navbar ul {
      visibility: visible;
    }
    #nav-select {
      visibility: visible;
    }
  }
  
  .col-1 {width: 8%;}
  .col-2 {width: 17%;}
  .col-3 {width: 25%;}
  .col-4 {width: 32%;}
  .col-5 {width: 40%;}
  .col-6 {width: 50%;}
  .col-7 {width: 60%;}
  .col-8 {width: 65%;}
  .col-9 {width: 75%;}
  .col-10 {width: 82%;}
  .col-11 {width: 92%;}
  .col-12 {width: 100%;}
  
  @media only screen and (max-width: 768px) {

      [class*="col-"] {
          width: 100%;
      }
  }