.side-panel {
  height: 97vh;
  position: fixed;
  border-radius: 20px;
  top: 10px;
  left: 10px;
  width: 25em;
  transition: all 0.2s ease;
  z-index: -5;
  opacity: 0;
  box-shadow: 0px 0px 20px rgb(3, 0, 15);
  grid-template-rows: 65px 1fr 100px;
  padding: 1rem;
  display: grid;
}

.side-panel {
    background: linear-gradient(1deg, #010a19, #01112c, #3a7de6);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    -o-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@media (max-width: 480px) {
  .side-panel {
    width: 95%;
  }
}

.active {
  z-index: 25;
  opacity: 1;
}

.top-part, .middle-part, .bottom-part {
  display: flex;
  align-items: center;
  background-color: #010920;
  padding: 0.5rem 1.1rem;
  border: 2px none rgb(82, 82, 82);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgb(0, 1, 29);
}

.middle-part{
  margin: 15px 0px;
  flex-direction: column;
  justify-content: space-evenly;
}

.creator {
  color: white;
  font-size: 27px;
  font-weight: 600;
  text-shadow: 2px 2px 0.001px rgb(18, 22, 55);
}

.profile-photo {
  width: 7rem;
  margin-top: 5px;
}

.creator-name {
  color: white;
  margin-top: 5px;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 550;
}

.creator-des {
  color: white;
  margin-top: 13px;
  font-weight: 300;
  font-size: 13.7px;
  letter-spacing: 1px;
  text-align: center
}

.report {
  margin-top: 18px;
  font-weight: 500;
  font-size: 13px;
}

.bottom-part {
  justify-content: space-evenly;
  flex-direction: column;
  gap: 10px;
}

.github, .email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.github-png {
  width: 30px;
}

.github-link {
  text-decoration: none;
  color: white;
}

.email-png {
  width: 29px;
}

.email {
  color: white;
  font-size: 15px;
  letter-spacing: 0.3px;
}

@media (min-width: 320px) and (max-width: 410px) {
  .creator-des {
    font-size: 12.7px;
  }
  .side-panel {
    padding: 0.5rem;
  }
}