@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

body{
    margin: 0;
    text-align: center;
    background-image: url("../images/bg2.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: hsla(0, 0%, 55%, 0.9);
    
}

.menu {
    background-color: #000;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.25em;
    padding: 14px 0px;
    letter-spacing: 3px;

  text-align: center;
  }

.menu a {
    color: hsl(30, 11%, 96%);
    padding: 14px 16px;
    text-decoration: none;
}

.menu a:hover {
    color: rgb(249,107,7);
    text-decoration: none;
    background-color: #333;
  }

.menu .active {
    color: rgb(249,107,7);
    text-decoration: none;
    background-color: #333;
  }

.column {
    margin-top: 1em; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    padding: 10px; 
}

.logo {
    width:auto; 
    height: 300px; 
    padding: 10px; 
    box-sizing: border-box; 
    margin: 1em auto; 
}

.h{
    color: hsl(0, 0%, 0%);
    font-family: 'PT Sans', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: 400;
    line-height: 1.5em;

    /*width: 55%; 
    height: 20px; 
    padding: 10px; 
    box-sizing: border-box; 
    margin: 1em auto; */
    text-align: left;
}

.p1{
    color: hsl(0, 0%, 0%);
    font-family: 'PT Sans', sans-serif;
    font-size: 20px;
    letter-spacing: .015em;
    font-weight: 400;
    line-height: 1.8em;

    /*width: 55%; 
    height: 170px; 
    padding: 10px; 
    box-sizing: border-box; 
    margin: 1em auto; */
    text-align: center;
}

.p2 {
    color: hsl(0, 0%, 0%);
    font-family: 'PT Sans', sans-serif;
    font-size: 20px;
    letter-spacing: .015em;
    font-weight: 400;
    line-height: 1.8em;

    width: 65%; 
    height: 200px; 
    padding: 10px; 
    box-sizing: border-box; 
    margin: 4em auto; 
    text-align: left;
}

.p2 img{
    float: left;
    clear: left;
    width: 150px;
    height: 150px;
    margin: 30px 35px 37px 30px;
    
}

.menu #ham {
    display: none;
}

footer{
    margin: 100em;
}

@media screen and (max-width: 500px) {
  .menu {
      background-color: #000;
      overflow: hidden;
      font-family: 'Lato', sans-serif;
      font-size: 17px;
      font-weight: 300;
      line-height: 1.25em;
      padding: 20px 0px;
      letter-spacing: 3px;
  
    text-align: center;
    position: relative;
    }
    
    /* Hide the links inside the navigation menu (except for logo/home) */
    .menu #link {
      display: none;
    }
    
    /* Style the hamburger menu */
    .menu #ham {
      background-color: black;
      display:block;
      position: absolute;
      right: 0;
      top: 0;
      margin: 0;
      float: right;
      clear: left;
      color: rgb(249,107,7);
    }

    .menu a {
      color: hsl(30, 11%, 96%);
      padding: 14px 16px;
      text-decoration: none;
      float:left;
      clear: left;
  }
  
  .menu a:hover {
      color: rgb(249,107,7);
      text-decoration: none;
      background-color: #333;
    }
  
  .menu .active {
      color: rgb(249,107,7);
      text-decoration: none;
      background-color: #333;
    }

    .logo {
      width: auto; 
      height: 300px; 
      padding: 10px; 
      box-sizing: border-box; 
      margin: 1em auto; 
  }

  .column {
      margin-top: 1em; 
      display: flex; 
      flex-direction: column; 
      justify-content: center;
      padding: 10px; 
  }

.p2 {
    color: hsl(0, 0%, 0%);
    font-family: 'PT Sans', sans-serif;
    font-size: 20px;
    letter-spacing: .015em;
    font-weight: 400;
    line-height: 1.8em;

    width: 95%; 
    height: 200px; 
    padding: 10px; 
    box-sizing: border-box; 
    margin: 4em auto; 
    text-align: left;
}
}