a {
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

::-ms-clear {
  display: none;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgb(43,49,55);
  height:100%;
}

.header {
  padding: 2rem 0
}

h1 {
  color: rgb(255,255,242);
  text-align: center;
  font-size: 4.5em;
  font-family: "Vollkorn", Helvetica, Arial, sans-serif;
  font-weight: 150;
  margin: 1rem 1rem 0rem 1rem;
}

h2 {
  color: rgb(249, 209, 97);
  text-align: center;
  font-size: 1.2em;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0 0.5em;
}

h3 {
  color: rgb(56, 54, 54);
  text-align: center;
  font-size: 1.5em;
  margin: 15px 0 0 0;
  font-family: 'Montserrat';
  font-weight: 300;
}

h4 {
  font-size: 2em;
}

h6 {
  color: black;
  font-size: 1em;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.searchContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.autocomplete-items {
  font-family: 'Montserrat';
  font: 400 13.3333px Arial;
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-top: none;
}

.autocomplete-items:hover {
  background-color: #e9e9e9;
}

.projects {
  display: inline-block;
  padding-top: 0.3em;
}

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #eff4ff;
}

.about div {
  max-width: 1400px;
  margin: 1rem 0;
}

.about div h6 {
  margin: 0.5em 3em;
}

.about div:nth-child(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

.about div:nth-child(4) {
  margin-bottom: 6rem;
}

.bottom {
  background-color: WHITE;
  color: WHITE;
  padding: 2.5em 0 0 0;
  text-align: center;
}

.bottom > div:nth-child(1) {
  margin: 0 1rem;
}

div a {
  color: WHITE;
  font-size: 1.8em;
  font-weight: bolder;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
}

/* The typing effect for h2 to be implemented, credit @ Geoff Graham */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect, credit @ Geoff Graham */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }
}

.description {
  color: rgb(56, 54, 54);
  font-size: 1.1em;
  font-family: 'Montserrat';
  font-weight: 300;
  padding-left: 0em;
  padding-right: 0em;
}

.description-link {
  color: black;
  text-decoration: underline;
  font-size: 1em;
  font-family: 'Montserrat';
  font-weight: 300;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(43,49,55);
  width: 100%;
  height: 100px;
}

.prev {
  color: BLACK;
  padding-right: 1em;
  cursor: pointer;
  width: auto;
}

.next {
  color: BLACK;
  padding-left: 1em;
  cursor: pointer;
  width: auto;
}

.footer a {
  font-size: 1.7em;
}

i {
  font-size:40px;
  color: WHITE;
  padding-right: 0.2em;
}

i:hover, a:hover {
  color: GREY;
}

.gridContainer {
  display: grid;
  grid-template-columns: auto;
}

.gridItem {
  color: black;
  padding: 3.5em 1em 4em 1em;
}

div img {
  border-radius: 1em;
}

.slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.resumePicture {
  width: 80%;
  max-width: 60rem;
  margin-top: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

[class^="dot"] {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #757474;
}

.searchWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  padding-top: 2rem;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#logo {
  display: none;
}

@media only screen and (min-width: 1150px)
{
  h2 { /* credit @ Geoff Graham, some modifications done for my specific website  */
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid transparent; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .05em; /* Adjust as needed */
    animation:
      typing 3s steps(40, end);
  }
}

@media only screen and (min-width: 800px) {
    .padText {
      padding: 0em 5em 0em 5em;
    }

    .description {
      color: rgb(56, 54, 54);
      font-size: 1.5em;
      font-family: 'Montserrat';
      font-weight: 300;
      padding: 0 4em;
    }

    h1 {
      font-size: 5.5em;
    }

    h2 {
      font-size: 1.8em;
    }

    h3 {
      font-size: 2.5em;
    }

    h6 {
      font-size: 1.2em;
    }

    .headerItem {
      padding-left: 1em;
      font-family: 'Helvetica';
      padding-right: 1em;
    }
}