body,html {
    margin: 0;
    overflow-x: hidden;
}
* {box-sizing: border-box;}


/* Top Images */

.column {
    display:block;
    float: left;
    width: 33.33%;
    padding: 0%;
    height: 220px;
    }

.row {
    content: "";
    clear: both;
    display: table;
    top:0;
    width: 100%;
    margin:0;
} 

/* Navigation Bar */

.nav-bar {
    width: 100%;
    text-align: left;
    height: 40px;
    line-height: 40px;
    background-color: rgb(15, 15, 34);
    position: sticky;
    top: 0;
    }

.menu {
    margin-right: 15px;
    height: 40px;
}
      
.menu a {
    width:12.5%;
    float: left;
    display: block;
    height: 40px;
    padding: 0px 16px;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
    color:rgb(212, 209, 209);
    position: static;
}

label {
margin-right:30px;
font-size: 30px;
line-height: 40px;
padding: 0 5px;
width: 20px;
float: right;
display: none;
}

label i {
color: rgb(212, 209, 209);
position: relative;
margin-left: 10px;
}

#nav-toggle {
float: right;
display: none;
}

.menu a.active {
background-color: rgb(212, 209, 209);
color: rgb(15, 15, 34);
}

.menu a:hover:not(.active) {
background-color: rgb(212, 209, 209);
color: rgb(15, 15, 34);
}

/* Body Section */

.body{
    width:80%;
    margin-top:40px;
    margin-left: auto;
    margin-right: auto;
    height:auto;
    margin-bottom:24px;
}
.intro-body{
    width:80%;
    margin-top:40px;
    margin-left: auto;
    margin-right: auto;
    height:auto;
    display:table;
    margin-bottom:24px;
}
.body-intro {
    float:left;
    width: 50%;
    text-align: center;
    margin-top:20px;
}
.body-intro-img{
    display:block;
    margin-top:5px;
}
.body-welcome {
    float: right;
    width: 30%;
    margin-right:15%;}


/* Footer Section */

.footer-link {
    float:left;
    text-align: center;
    text-decoration: none;
    color:rgb(15, 15, 34);
    font-weight: bold;
    margin-left:6%;
    }

.footer {
    display: table;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}  
.footer-IMG{
    margin-top:16px;
    float:left;
    display: block;
    width:33.33%;
}

.footer-Text {
    margin-top: 16px;
    float:right;
    width: 45%;
}

/* Adjustment for narrow screen */

@media screen and (min-width: 1051px) {
    .intro-body,.body {
      width: 80%;
    }
  }
  
  @media screen and (min-width: 841px) and (max-width: 1050px) {
      .intro-body, .body{
      width: 85%;
    }
  }
  
  @media screen and (max-width: 840px) and (min-width: 401px){
      label {
          display: block;
          cursor: pointer;
      }
      .menu {
          position: absolute;
          width:40%;
          margin-left: 60%;
          text-align: center;
          top: 40px;
          display:none;
      }
      .menu a {
          display: block;
          width: 100%;
          background-color: rgba(15,15,34,0.8);
          border-bottom: 1.5px  solid #c6c6c4;
      }
  
      #nav-toggle:checked~ .menu {
          display:block;
      }
  
      .intro-body, .body {
          width: 85%;
      }
     .body-intro, .body-welcome{
          width: 100%;
          margin-left: auto;
          margin-right: auto;
      }
    .footer{
        width:70%
    }
    .footer-IMG{
        width:100%;
        float:left;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-Text {
        width:100%;
        float:left;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-link {
        width:100%;
        margin-left: auto;
        margin-right: auto;}
  }
  
  @media screen and (max-width: 400px){
    label {
      display: block;
      cursor: pointer;
    }
    .menu {
      position: absolute;
      width:100%;
      text-align: center;
      top: 40px;
      display:none;
    }
    .menu a {
      display: block;
      width: 100%;
      background-color: rgba(15,15,34,0.8);
      border-bottom: 1.5px  solid #c6c6c4;
    }
    #nav-toggle:checked~ .menu {
      display: block;
    }
    .footer{
        width:70%
    }
    .footer-IMG{
        width:100%;
        float:left;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-Text {
        width:100%;
        float:left;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-link {
        width:100%;
        margin-left: auto;
        margin-right: auto;}
  }