body {
  background-color: #070817;
  animation: 3s ease-in-out 0s infinite alternate bg;
  cursor: none;
  user-select: none;
  display: flex;
  flex-direction: column;
}

@keyframes bg {
  from {
    background-color: #03040e;
  }
  to {
    background-color: #0a0b21;
  }
}

.cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgb(158, 147, 255);
  pointer-events: none;
  z-index: 9999;
  opacity: 80%;
  transition-duration: 0.1s;
  transform: translate(-50%, -50%);
}

.cursor2 {
  position: fixed;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgb(158, 147, 255);
  pointer-events: none;
  z-index: 9999;
  opacity: 30%;
  transform: translate(-50%, -50%);
  transition-duration: 0.18s;
  transition-timing-function: ease-out;
}

#headcontainer {
  background-color: #4d58ff;
  display: flex;
  justify-content: space-around;
  min-width: 50%;
  width: 500px;
  height: 75px;
  margin: auto;
  border-radius: 10px;
  box-shadow: #4754ff 0px 0px 40px;
  transition-duration: 0.7s;
  #header {
    color: #131967;
    font-family: Baumans;
    /* position: relative;
    top: 25%;
    left: 3%; */
  }
}

#headcontainer:hover {
  box-shadow: #4754ff 0px 0px 70px;
}

#container {
  background-color: #2f3cf4;
  min-width: 50%;
  width: 500px;
  height: 690px;
  margin: auto;
  position: relative;
  top: 15px;
  border-radius: 10px;
  text-align: center;
  box-shadow: #192194 0px 0px 40px;
  transition-duration: 0.7s;
  display: flex;
  flex-direction: column;
}

#container:hover {
  box-shadow: #192194 0px 0px 70px;
}

#desc {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 22px;
  color: #4d4d4d;
  margin-top: 2%;
  margin-left: 2%;
  margin-right: 2%;
  /*position: relative;
  top: 5%;*/
  color: #070817;
}

#blackhole {
  position: relative;
  left: 42%;
  width: 15%;
  animation: 3s ease-in-out 0s infinite alternate bh;
}

#box {
  width: 95%;
  height: 150%;
  min-height: 50%;
  border-radius: 10px;
  margin-top: 2%;
  margin-left: 2%;
  background-color: #4d4d4d;
  overflow: auto;
  white-space: nowrap;
  border: solid;
  border-width: 1%;
  border-color: #4d4d4d;
  display: flex;
  flex-direction: row;
  .projectsBox {
    flex: 1 0 100%;
    margin-top: 0%;
    margin-left: 0%;
    width: 93%;
    height: 100%;
    background-color: rgb(135, 135, 135);
    border-radius: 10px;
    display: inline-block;
    transition-duration: 0.4s;
    .projectTitles {
      margin-top: 0%;
      margin-left: 0%;
      font-size: 200%;
      position: relative;
      top: 5%;
      font-family: "Quicksand", "sans-serif";
      white-space: wrap;
      transition-duration: 0.8s;
    }
    .images {
      margin-top: 0%;
      margin-left: 0%;
      max-width: 60%;
      height: auto;
      border-radius: 10px;
      white-space: wrap;
      flex: 1 1 100%;
    }
    .projectDescs {
      margin-top: 0%;
      margin-left: 1%;
      margin-right: 1%;
      font-family: "Quicksand", "sans-serif";
      font-size: 150%;
      white-space: wrap;
      position: relative;
      top: 4%;
    }
  }
  .projectsBox:hover {
    background-color: #6f6f6f;
    .projectTitles {
      letter-spacing: 3px;
    }
  }
}
#fullList {
  font-family: "Quicksand", "sans-serif";
  font-size: 120%;
  margin-top: 2.5%;
}

@keyframes bh {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 15deg;
  }
}