body {
  background-color: #3a463d;
  font-family: "heebo", sans-serif;
}
::selection {
  background-color: #96e6b3;
  color: #3a463d;
}
.name-boxP {
  border: 2px dashed black;
  font-size: 200px;
  background-color: #96e6b3;
  padding: 0px 120px 20px;
}
#job {
  font-size: 18px;
  position: relative;
  right: 65px;
}
#hello {
  font-size: 100px;
  position: relative;
  right: 100px;
  color: #96e6b3;
}
.CpanelFrame {
  width: 100%;
  height: 110%;
  border: none;
  margin: 0;
  padding: 0;
  position: relative;
  margin-top: 12px;
  filter: drop-shadow(7px 1px 1px rgba(0, 0, 0, 0.5));
}
#name-box {
  font-size: 150px;
}
.down {
  position: absolute;
  bottom: 20px;
  width: 100%;
}
.arrow {
  animation: arrow 1.5s infinite;
  transform-origin: center;
}
@keyframes arrow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
.iconSize {
  width: 50px;
  height: 50px;
}
/* phones */
@media (max-width: 991px) {
  .iconSize {
    width: 80px;
    height: 80px;
  }
  #Hello-box{
    display: flex;
  }
  .name-boxP{
    padding: 0px 25px 20px;
  }
  #name-box{
    font-size: 9.375rem;
  }
  #hello{
    font-size: 4.375rem;
    right: auto;
  }
  #job{
    right: auto;
    font-size: 1rem;
  }
  .CpanelFrame{
    padding: 12px;
    overflow: hidden;
  }
}

.workIcon{
  transition: all 0.3s ease-in-out;
}
.workIcon:hover {
  filter: brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(836%)
    hue-rotate(113deg) brightness(90%) contrast(90%);  
}
.workIcon:active{
  scale: 0.9;
}
.fade-in {
  animation-name: fadeIn;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: foerwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.card-body{
  background-color: #96e6b3;
  color: #175727;
}
.card-img-fixed{
  width: 100%;
  height: 150px;
  object-fit: cover;  
}
.projectTitle{
  font-size: 3rem;
}
.pjctPage{
  background-color: #464e47;
}
.contactTitle{
  font-size: 3rem;
}