html, body {
    height: 100%;
    width: 100%;
    background-color: #e4e4e4;
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    color: rgb(0, 0, 0);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.parallax {
    background-image: url("images/parallax.png");
    min-height: 100%;
    width: 100%;
    display: table;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-content: center;
    text-align: center;
}

#home {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.45);
    font-size: 7vw;
    color: white;
}

.about {
  width: 100%;
  text-align: center;
  max-height: 75%;

  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  border-radius: 5px;
  width: 100%;
}

.divider1 {
  background-image: linear-gradient(#ffd79c, #e4e4e4);
  height: 10%;
  width: 100%;
}

.divider2 {
  background-image: linear-gradient(#e4e4e4, #ffd79c);
  height: 10%;
  width: 100%;
}

.about img {
  width: 25%;
  margin: 1%;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: black; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  }

  ::-webkit-scrollbar-thumb:window-inactive {
    background: black; 
  }
  
  #photos {
    flex-basis: 75%;
     
    -webkit-column-count: 5;
    -webkit-column-gap:   0px;
    -moz-column-count:    5;
    -moz-column-gap:      0.5%;
    column-count:         5;
    column-gap:           0.5%;  

    background-color: #ffd79c;
  }
  
  #photos img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
    margin: 0.5%;
  }

  @media (max-width: 1200px) {
    #photos {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
    }

    .about img {
      width: 30%;
    }
  }
  @media (max-width: 1000px) {
    #photos {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
    }

    .about img {
      width: 35%;
    }
  }
  @media (max-width: 800px) {
    #photos {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
    }

    .about img {
      width: 40%;
    }
  }
  @media (max-width: 400px) {
    #photos {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
    }
    .about img {
      width: 50%;
    }
  }

.bottom-bar {
  width: 100%;
  display: flex;
  height: 5%;
  justify-content: space-evenly;
  align-items: center;
}

.bottom-bar a::after {
  color: black;
}

.bottom-bar a {
  color: black;
}