/*about page*/
.navbar {
  text-align: left;
}
.about-container h1 {
    font-size: 46px;
  }
  .about-container h2 {
    font-size: 26px;
  }
  .about-container .right-side p {
    font-size: 18px;
    line-height: 23px;
  }
  .about-container .left-side {
    text-align: right;
  }
  .about-container .right-side {
    text-align: left;
  }
  .about-container .right-side a {
    color: var(--drk-uppertitle-color);
    text-decoration: none;
  }
  .about-container .right-side a:hover {
    color: var(--lgt-uppertitle-color);
  }
  
  .about-container img {
    border-radius: 10px;
    transition: all 200ms ease-in-out;
  }
  .about-container img:hover {
    scale: 1.5;
    cursor: pointer;
  }
  .contact-me {
    color: var(--drk-uppertitle-color);
  }
  .contact-icons {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    align-items: center;
    font-size: 32px;
  }
  
  .contact-icons a {
    padding: 5px;
    color: var(--drk-background-color);
  }
  
  .contact-icons a:visited {
    color: none;
  }
  
  .contact-icons a:hover {
    color: var(--lgt-uppertitle-color);
    cursor: pointer;
  }

  /*light about page*/
.light .page-background .page-head-paragraph {
    color: var(--drk-uppertitle-color);
  }
  .light .about-container h4 {
    color: var(--drk-uppertitle-color);
  }
  .light .about-container .right-side a {
    color: var(--drk-uppertitle-color);
    text-decoration: none;
  }
  .light .about-container .right-side a:hover {
    color: var(--lgt-uppertitle-color);
  }
  .light .contact-me {
    color: var(--drk-uppertitle-color);
  }
  
  .light .contact-icons a {
    padding: 5px;
    color: var(--lgt-subtitle-color);
  }
  
  .light .contact-icons a:visited {
    color: none;
  }
  
  .light .contact-icons a:hover {
    color: var(--lgt-uppertitle-color);
    cursor: pointer;
  }

  /*WIP*/
  body {
    text-align: center;
  }
  .work-in-progress-section section {
    padding: 10px 0;
    max-width: 300px;
  }
  .img-rotate {
    width: 250px;
    height: 250px;
    border-radius: 50%;
  }
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .img-one {
    width: 100%;
    height: 100%;
    animation: rotation 10s infinite linear;
  }
  .img-two {
    width: 70%;
    height: 70%;
    animation: rotation 8s infinite reverse;
  }
  .img-three {
    width: 40%;
    height: 40%;
    animation: rotation 6s infinite linear;
  }
  .img-four {
    max-width: 150px;
    width: 30%;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    right: 10%;
  }
  .grid-2-columns {
    grid-template-columns: repeat(2, 1fr);
    max-width: 80%;
  }
  @media (max-width: 768px) {
    .img-four {
      position: fixed;
      bottom: 0;
      right: 0;
    }
  }