.account-main {
  width: 100vw;
  height: fit-content;
  margin: 0;
  padding: 3rem 0;
  background-color: #e7efc5;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(./../images/image_2021-07-30_16-56-41.png);
}
.dashboard-background {
  width: 60vw;
  height: 44rem;
  position: relative;
  display: inline;
}
.dashboard-nav {
  width: fit-content;
  height: fit-content;
  position: absolute;
  top: 1.5rem;
  left: 1rem;
  z-index: 2;
}
.dashboard {
  width: 60vw;
  height: 44rem;
  background-color: #a3c4bc;
  margin: 0;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  z-index: 1;
  box-shadow: 0 0 10px 10px rgb(0, 0, 0, 0.3);
}
.selector {
  width: 60vw;
  height: 44rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  position: absolute;
  z-index: 2;
  border-radius: 2rem;
  overflow-x: hidden;
}
.selector-nav {
  width: fit-content;
  height: 44rem;
  position: absolute;
  z-index: 4;
  background-color: #413c58;
  animation-name: menu-slide;
  animation-duration: 300ms;
  display: flex;
  flex-direction: column;
}
.selector-background {
  width: 60vw;
  height: 44rem;
  position: absolute;
  z-index: 3;
  background-color: #413c58;
  opacity: 0.5;
  animation-name: appear;
  animation-duration: 300ms;
}
@keyframes menu-slide {
  from {
    left: -10rem;
  }
  to {
    left: 0;
  }
}
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
.profile-container {
  width: 60vw;
  height: 44rem;
  position: relative;
}
.profile-heading {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  margin: 0;
  padding: 0;
  position: absolute;
  width: inherit;
  text-align: center;
  top: 1.5rem;
}
.profile-loading {
  position: absolute;
  top: 4rem;
  width: 60vw;
  height: 40rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile {
  position: absolute;
  top: 4rem;
  width: 60vw;
  height: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.profile-pic-container {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background-color: gray;
}
.profile-pic {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
}
.profile-info-container {
  display: flex;
  flex-direction: row;
  height: fit-content;
  width: inherit;
  justify-content: space-evenly;
}
.profile-label-group {
  margin: 0;
  padding: 0;
  width: fit-content;
  height: 18.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.profile-label {
  font-family: "Teko", monospace;
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
  height: 3rem;
  line-height: 3rem;
  width: fit-content;
}
.profile-content-group {
  margin: 0;
  padding: 0;
  width: fit-content;
  height: 18.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.profile-content {
  font-family: "Overpass Mono", monospace;
  font-size: 1.25rem;
  margin: 0;
  padding: 0;
  height: 3rem;
  line-height: 3rem;
  width: fit-content;
}

@media (max-width: 600px) {
  .account-main {
    padding: 0.5rem 0;
  }
  .dashboard-background {
    width: 90vw;
    height: 35rem;
    margin: 0.5rem 0;
  }
  .dashboard-nav {
    top: 1rem;
    left: 0.5rem;
  }
  .dashboard {
    width: 90vw;
    height: 35rem;
    border-radius: 1.5rem;
  }
  .selector {
    width: 90vw;
    height: 35rem;
    border-radius: 1.5rem;
  }
  .selector-nav {
    height: 35rem;
  }
  .selector-background {
    width: 90vw;
    height: 35rem;
  }
  @keyframes menu-slide {
    from {
      left: -10rem;
    }
    to {
      left: 0;
    }
  }

  .profile-container {
    width: 90vw;
    height: 35rem;
  }

  .profile-heading {
    font-size: 1.25rem;
    top: 1.3rem;
  }
  .profile-loading {
    top: 3rem;
    width: 90vw;
    height: 32rem;
  }
  .profile {
    top: 3rem;
    width: 90vw;
    height: 32rem;
  }
  .profile-pic-container {
    width: 7rem;
    height: 7rem;
  }
  .profile-pic {
    width: 7rem;
    height: 7rem;
  }
  .profile-label-group {
    height: 14rem;
  }
  .profile-label {
    font-size: 1rem;
    line-height: 2rem;
    height: 2rem;
  }
  .profile-content-group {
    height: 14rem;
  }
  .profile-content {
    font-size: 0.75rem;
    height: 2rem;
    line-height: 2rem;
  }
}
