html {
  width: 100% !important;
  scroll-behavior: smooth;
}

body {
  position: absolute;
  width: 100%;
}

body:after{
  display:none;
  content: url("./images/triangulated-profile-picture.png");
}

.navbar {
  top: 0;
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #e8eaf6 !important;
}

.row {
  margin: 0 0 40px 0;
}

.content-container {
  margin: 3% 5% 0 5%;
}

.low-poly-background {
  width: 100%;
  height: 300px;
  filter:  invert(100%) opacity(30%) grayscale(50%);
  position: absolute;
  margin: 0 -5%;
}

.profile-picture-container {
  height: 300px;
  width: 300px;
  border-radius: 100%;
  overflow: hidden;
  border: 3px solid white;
  margin: 15% auto 5% auto;
  box-shadow: 0 10px 6px -6px #777;
}

.profile-picture {
  height: 100%;
  background-image: url("./images/profile-picture.jpg");
  background-position: center;
  background-size: cover;
  transition: background-image 2s ease-in-out;
}

.profile-picture:hover {
  height: 100%;
  background-image: url("./images/triangulated-profile-picture.png");
  background-position: center;
  background-size: cover;
  transition: background-image 2s ease-in-out;
}

.profile-information {
  padding: 200px 0 0 0;
}

.contact-icon {
  font-size: 2em;
  color: #ABC4BC;
  transition: color 2s ease-out;
}

.contact-icon:hover {
  text-decoration: none;  
}

#about {
  margin-top: -100px;
  padding-top: 100px;
}

.skills {
  border-radius: 18px;
  background-color: #C3ABB3;
  margin: 2px 5px;
  box-shadow: 0 10px 6px -6px #777;
  transition: background-color 2s ease-out;
}

.skills:hover {
  background-color: red;  
}

.skills:focus {
  outline: none;
}

#projects {
 margin-top: -100px;
 padding-top: 100px;  
}
.project-image-buttons-container {
  margin: 0 0 10px 0;
}

.project-image {
  width: 300px;
  height: 200px;
  box-shadow: 0 10px 6px -6px #777;
}

.projects-summary {
  min-height: 60px;
}

.dino-dynasty:hover {
    cursor: pointer;
}

.chomper:hover {
    cursor: pointer;
}

#mathymathy:hover {
    cursor: pointer;
}

.izi:hover {
    cursor: pointer;
}

.show-buttons {
  border-radius: 18px;
  background-color: #ABC4BC;
  margin: 7px 4px;
  padding: 4px 5px;
  color: black;
  display: inline-block;
  box-shadow: 0 10px 6px -6px #777;
  transition: background-color 2s ease-out;
}

.show-buttons:hover {
  text-decoration: none;
  color: black;
  background-color: blue;
}

.project-button-image {
  width: 150px;
  height: 100px;
}

.dino-dynasty {
  border: 1px solid #aaa;
  padding: 3px;
  box-shadow: 0 10px 6px -6px #777;
}

#contact {
  background: #e8eaf6;
  margin: 0 -5.5%;
  padding: 20px 0;
}

@media only screen and (max-width: 768px) {
  .profile-information {
      padding: 0px;
  }
  .projects-title {
    text-align: center;
  }
  .dino-dynasty, .chomper, #mathymathy, .izi {
    margin-top: 10px;
  }
}