/* Main css file */
/* import of other styling files */
/* Global styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  color: rgb(33, 0, 45);
  background-color: rgba(212, 189, 228, 0.226);
}

::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
  color: rgb(33, 0, 45);
}

/* import styling sheets */
#user-dashboard-body {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: rgba(212, 189, 228, 0.226);
  background-attachment: fixed;
}
#user-dashboard-body #particles-js {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#user-dashboard-body #action-box {
  width: 200px;
  height: 80px;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(88, 88, 88, 0.336);
  border-radius: 8px;
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  display: none;
  justify-content: center;
  text-align: center;
  align-items: center;
}
#user-dashboard-body #action-box p {
  width: 100%;
  font-size: 18;
  color: #cf0362;
  font-weight: bold;
}
#user-dashboard-body #posting-box-section {
  width: 40%;
  height: 150px;
  background-color: white;
  border-radius: 3rem;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
}
#user-dashboard-body #posting-box-section div {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#user-dashboard-body #posting-box-section div:nth-child(1) {
  height: 60%;
}
#user-dashboard-body #posting-box-section div:nth-child(1) img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: 3%;
  -o-object-fit: cover;
     object-fit: cover;
}
#user-dashboard-body #posting-box-section div:nth-child(1) p {
  width: 80%;
  border-radius: 3rem;
  height: 40px;
  padding: 1.5%;
  background-color: rgb(242, 242, 242);
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  margin-left: 3%;
}
#user-dashboard-body #posting-box-section div:nth-child(1) p:hover {
  cursor: pointer;
}
#user-dashboard-body #posting-box-section div:nth-child(2) {
  height: 40%;
}
#user-dashboard-body #posting-box-section div:nth-child(2) ul {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: row;
  margin-left: 15%;
  gap: 5%;
}
#user-dashboard-body #posting-box-section div:nth-child(2) ul li {
  list-style: none;
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2%;
}
#user-dashboard-body #posting-box-section div:nth-child(2) ul li img {
  width: 40px;
  height: 40px;
}
#user-dashboard-body #posting-box-section div:nth-child(2) ul li p {
  font-weight: bold;
}
#user-dashboard-body #posting-box-section div:nth-child(2) ul li:hover {
  cursor: pointer;
}
#user-dashboard-body #post-form-section {
  width: 30%;
  height: 600px;
  background-color: white;
  box-shadow: 0 0 8px 2px rgba(217, 0, 255, 0.133);
  border-radius: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  display: none;
}
#user-dashboard-body #post-form-section #posting-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2%;
}
#user-dashboard-body #post-form-section #posting-form .error-messages {
  height: 20px;
  color: #c30dff;
}
#user-dashboard-body #post-form-section #posting-form #close-posting-form-button {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 20%;
}
#user-dashboard-body #post-form-section #posting-form #close-posting-form-button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-dashboard-body #post-form-section #posting-form textarea {
  width: 80%;
  height: auto;
  max-height: 100px;
  margin-top: 15%;
  border: transparent;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  padding: 3%;
  border-radius: 8px;
  resize: none;
}
#user-dashboard-body #post-form-section #posting-form #post-image-label {
  width: 80%;
  height: 200px;
  border: transparent;
  background-color: rgb(242, 242, 242);
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#user-dashboard-body #post-form-section #posting-form #post-image-label img:hover {
  cursor: pointer;
}
#user-dashboard-body #post-form-section #posting-form #post-img-upload {
  display: none;
}
#user-dashboard-body #post-form-section #posting-form textarea:focus {
  outline: none;
}
#user-dashboard-body #post-form-section #posting-form #location-icon-box {
  width: 80%;
}
#user-dashboard-body #post-form-section #posting-form #location-icon-box img {
  width: 40px;
  height: 40px;
}
#user-dashboard-body #post-form-section #posting-form #location-icon-box img:hover {
  cursor: pointer;
}
#user-dashboard-body #post-form-section #posting-form #post-form-button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 80%;
  height: 40px;
  text-align: center;
  border-radius: 8px;
}
#user-dashboard-body #post-form-section #posting-form #post-form-button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-dashboard-body #location-tagging-section {
  width: 40%;
  height: 50%;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  border-radius: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2%;
}
#user-dashboard-body #location-tagging-section img {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 3%;
  right: 3%;
}
#user-dashboard-body #location-tagging-section img:hover {
  cursor: pointer;
}
#user-dashboard-body #location-tagging-section input {
  width: 80%;
  height: 40px;
  background-color: rgb(239, 239, 239);
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  border-radius: 8px;
  padding: 2%;
  outline: none;
  border: transparent;
}
#user-dashboard-body #location-tagging-section input:active {
  outline: none;
}
#user-dashboard-body #location-tagging-section #current-location-link {
  font-weight: bold;
  text-align: left;
}
#user-dashboard-body #location-tagging-section #current-location-link:hover {
  cursor: pointer;
}
#user-dashboard-body #location-tagging-section #input-location {
  font-size: 15px;
}
#user-dashboard-body #location-tagging-section p {
  width: 80%;
  height: 30px;
  text-align: center;
}
#user-dashboard-body #main-feed-box {
  width: 50%;
  position: fixed;
  z-index: 98;
  height: 70%;
  font-family: "Roboto", sans-serif;
  border-radius: 8px;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 3%;
  align-items: center;
  overflow-y: scroll;
}
#user-dashboard-body #main-feed-box .user-posts {
  position: relative;
  width: 80%;
  height: auto;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  margin-top: 2%;
  margin-bottom: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#user-dashboard-body #main-feed-box .user-posts p:nth-child(1) {
  color: rgba(64, 1, 85, 0.6352941176);
}
#user-dashboard-body #main-feed-box .user-posts span {
  width: 80%;
  height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#user-dashboard-body #main-feed-box .user-posts span h3 {
  margin-left: 2%;
  text-transform: capitalize;
}
#user-dashboard-body #main-feed-box .user-posts .post-profile-img {
  width: 50px;
  height: 50px;
  -webkit-clip-path: circle(50%);
          clip-path: circle(50%);
  -o-object-fit: cover;
     object-fit: cover;
}
#user-dashboard-body #main-feed-box .user-posts .post-stats-box {
  width: 80%;
  height: 50px;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
}
#user-dashboard-body #main-feed-box .user-posts .post-stats-box .heart-icon {
  width: 30px;
  height: 30px;
  border-radius: none;
  box-shadow: none;
}
#user-dashboard-body #main-feed-box .user-posts .post-stats-box .heart-icon:hover {
  cursor: pointer;
}
#user-dashboard-body #main-feed-box .user-posts .post-stats-box p {
  width: 10%;
  color: #c30dff;
  font-weight: bold;
  margin-left: 0.5%;
}
#user-dashboard-body #main-feed-box .user-posts .post-stats-box p:hover {
  cursor: pointer;
}
#user-dashboard-body #main-feed-box .user-posts .comment-box {
  width: 80%;
  height: 50px;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
  gap: 2%;
  justify-content: left;
  align-items: center;
}
#user-dashboard-body #main-feed-box .user-posts .comment-box input {
  width: 80%;
  height: 40px;
  border-radius: 8px;
  padding-left: 2%;
  border: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
}
#user-dashboard-body #main-feed-box .user-posts .comment-box input:focus {
  outline: none;
}
#user-dashboard-body #main-feed-box .user-posts .comment-box button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 20%;
  height: 40px;
  font-size: 15px;
  border-radius: 8px;
}
#user-dashboard-body #main-feed-box .user-posts .comment-box button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-dashboard-body #main-feed-box .user-posts p {
  width: 80%;
  font-size: 15px;
  font-size: 18px;
  margin-top: 1%;
}
#user-dashboard-body #main-feed-box .user-posts img {
  width: 80%;
  height: 40%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
}
#user-dashboard-body #main-feed-box::-webkit-scrollbar {
  display: none;
}
#user-dashboard-body #post-info-container {
  width: 900px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.709);
  z-index: 99;
  overflow: hidden;
  display: none;
}
#user-dashboard-body #post-info-container #close-post-likers {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 2%;
  left: 2%;
  background-color: transparent;
  box-shadow: none;
}
#user-dashboard-body #post-info-container #close-post-likers:hover {
  cursor: pointer;
}
#user-dashboard-body #post-info-container #post-list-box {
  width: 80%;
  height: auto;
  max-height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2%;
  align-items: center;
  overflow-y: scroll;
}
#user-dashboard-body #post-info-container #post-list-box .post-likers {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding: 2%;
}
#user-dashboard-body #post-info-container #post-list-box .post-likers img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#user-dashboard-body #post-info-container #post-list-box .post-likers h2 {
  font-size: 18px;
  margin-left: 2%;
}
#user-dashboard-body #post-info-container #post-list-box .post-likers p {
  font-size: 15px;
  margin-left: 2%;
}
#user-dashboard-body #weather-section {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 400px;
  height: 290px;
  position: absolute;
  top: 12%;
  left: 4%;
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 5%;
}
#user-dashboard-body #weather-section h2 {
  font-size: 20px;
  width: 100%;
}
#user-dashboard-body #weather-section h3 {
  font-size: 18px;
  text-transform: capitalize;
}
#user-dashboard-body #weather-section img {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, rgba(195, 13, 255, 0.2705882353) 0%, rgba(255, 16, 151, 0.2235294118) 100%);
}
#user-dashboard-body #weather-section h4 {
  font-size: 18px;
  font-weight: bold;
}
#user-dashboard-body #reminders-section {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 400px;
  height: 400px;
  position: absolute;
  top: 12%;
  right: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3%;
}
#user-dashboard-body #reminders-section h2 {
  width: 100%;
  height: 10%;
}
#user-dashboard-body #reminders-section input {
  width: 80%;
  border-radius: 3rem;
  height: 30px;
  padding-left: 2%;
  border: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
}
#user-dashboard-body #reminders-section input:focus {
  outline: none;
}
#user-dashboard-body #reminders-section button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 80%;
  height: 30px;
}
#user-dashboard-body #reminders-section button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-dashboard-body #reminders-section ul {
  width: 80%;
  height: 60%;
  display: flex;
  flex-direction: column;
  gap: 2%;
  align-items: center;
  overflow-y: scroll;
}
#user-dashboard-body #reminders-section ul li {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
}
#user-dashboard-body #reminders-section ul li p {
  width: 90%;
  text-transform: capitalize;
}
#user-dashboard-body #reminders-section ul li img {
  width: 25px;
  height: 25px;
  align-self: flex-end;
}
#user-dashboard-body #reminders-section ul li img:hover {
  cursor: pointer;
}
#user-dashboard-body #notifications-section {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 400px;
  height: 500px;
  position: absolute;
  top: 46%;
  left: 4%;
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
#user-dashboard-body #notifications-section #notifications-list {
  width: 90%;
  height: 90%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  gap: 3%;
  margin-top: 2%;
}
#user-dashboard-body #notifications-section #notifications-list li {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  margin-top: 1%;
  padding: 2%;
}
#user-dashboard-body #notifications-section #notifications-list li:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.73);
}
#user-dashboard-body #notifications-section #notifications-list li img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#user-dashboard-body #notifications-section #notifications-list li p {
  font-size: 15px;
  text-transform: capitalize;
}
#user-dashboard-body #post-popUp-box {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  z-index: 99;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}
#user-dashboard-body #post-popUp-box #post-popUp-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 4%;
  left: 4%;
}
#user-dashboard-body #post-popUp-box #post-popUp-close:hover {
  cursor: pointer;
}
#user-dashboard-body #post-popUp-box #box {
  position: relative;
  width: auto;
  min-width: 500px;
  height: auto;
  min-height: 100px;
  max-height: 800px;
  overflow-y: scroll;
  background-color: white;
  border-radius: 2%;
  display: flex;
  flex-direction: column;
  padding: 2%;
  align-items: center;
}
#user-dashboard-body #post-popUp-box #box div:nth-child(1) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2%;
  width: 100%;
  height: 30%;
  margin-top: 2%;
}
#user-dashboard-body #post-popUp-box #box div:nth-child(1) #post-popUp-img {
  width: 50px;
  height: 50px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-left: 2%;
}
#user-dashboard-body #post-popUp-box #box div:nth-child(1) #post-popUp-name {
  width: 300px;
  height: 30px;
  font-size: 18px;
}
#user-dashboard-body #post-popUp-box #box #post-popUp-Mimg {
  width: 400px;
  height: 300px;
  border-radius: 4%;
}
#user-dashboard-body #post-popUp-box #box p {
  margin-top: 2%;
  padding: 2%;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#login-body {
  width: 100%;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
}
#login-body #title-box {
  width: 100%;
}
#login-body #title-box h1 {
  font-size: 80px;
  width: 100%;
  text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.192);
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#login-body #form-section {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#login-body #form-section #login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#login-body #form-section #login-form h2 {
  margin-bottom: 3%;
}
#login-body #form-section #login-form #login-form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80%;
}
#login-body #form-section #login-form #login-form-container label {
  width: 40%;
  text-align: left;
  display: block;
}
#login-body #form-section form {
  width: 60%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 2%;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.082);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(6.4px);
  backdrop-filter: blur(6.4px);
  border: 1px solid rgba(255, 255, 255, 0.73);
  padding: 3%;
}
#login-body #form-section form h2 {
  font-size: 40px;
  font-weight: bold;
}
#login-body #form-section form label {
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#login-body #form-section form input {
  width: 40%;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(255, 181, 212, 0.11);
  border: none;
  margin-top: 1%;
  margin-bottom: 1%;
  padding-left: 20px;
  box-shadow: 2px 2px 5px rgba(53, 49, 63, 0.205);
  position: relative;
}
#login-body #form-section form #login-eye-icon {
  margin-top: 2%;
}
#login-body #form-section form .eye-icons {
  position: absolute;
  margin-left: 30%;
  width: 25px;
  height: 25px;
}
#login-body #form-section form .eye-icons:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#login-body #form-section form input:focus {
  outline: none;
  border-color: transparent;
}
#login-body #form-section form button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 40%;
  height: 40px;
  border-radius: 8px;
  font-size: 18px;
  margin-top: 2%;
  margin-bottom: 2%;
}
#login-body #form-section form button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#login-body #form-section form button:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
#login-body #form-section form p {
  color: rgb(33, 0, 45);
}
#login-body #form-section form p a {
  text-decoration: none;
  color: rgb(33, 0, 45);
  font-weight: bold;
}
#login-body #form-section form .error-messages {
  margin-top: 0.5%;
  height: 20px;
}
#login-body #form-section form #login-error-message {
  color: #c30dff;
}

#signUp-body {
  width: 100%;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
}
#signUp-body #particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#signUp-body #title-box {
  width: 100%;
}
#signUp-body #title-box h1 {
  font-size: 80px;
  width: 100%;
  text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.192);
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#signUp-body section {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#signUp-body section form {
  width: 60%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 2%;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.082);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(6.4px);
  backdrop-filter: blur(6.4px);
  border: 1px solid rgba(255, 255, 255, 0.73);
  padding: 3%;
}
#signUp-body section form h2 {
  font-size: 40px;
  font-weight: bold;
}
#signUp-body section form label {
  font-size: 20px;
  font-weight: bold;
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#signUp-body section form input {
  width: 40%;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(255, 181, 212, 0.11);
  border: none;
  margin-top: 1%;
  margin-bottom: 1%;
  padding-left: 20px;
  box-shadow: 2px 2px 5px rgba(53, 49, 63, 0.205);
  position: relative;
}
#signUp-body section form #login-eye-icon {
  margin-top: 2%;
}
#signUp-body section form .eye-icons {
  position: absolute;
  margin-left: 30%;
  width: 25px;
  height: 25px;
}
#signUp-body section form .eye-icons:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#signUp-body section form input:focus {
  outline: none;
  border-color: transparent;
}
#signUp-body section form button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 40%;
  height: 40px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
  margin-top: 2%;
  margin-bottom: 2%;
}
#signUp-body section form button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#signUp-body section form button:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
#signUp-body section form p {
  color: rgb(33, 0, 45);
}
#signUp-body section form p a {
  text-decoration: none;
  color: rgb(33, 0, 45);
  font-weight: bold;
}
#signUp-body section form .error-messages {
  margin-top: 0.5%;
  height: 20px;
}
#signUp-body section form #signUp-err-message {
  margin-top: 1%;
  color: #c30dff;
}
#signUp-body section #signUp-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
#signUp-body section #signUp-form #signUp-form-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
}
#signUp-body section #signUp-form #signUp-form-container h2 {
  display: block;
  width: 40%;
  margin-left: 4%;
  grid-column: 1/-1;
  margin-bottom: 1%;
  text-align: left;
}
#signUp-body section #signUp-form #signUp-form-container div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#signUp-body section #signUp-form #signUp-form-container div label {
  width: 80%;
  display: block;
  text-align: left;
}
#signUp-body section #signUp-form #signUp-form-container div input {
  width: 80%;
  height: 40px;
}
#signUp-body section #signUp-form #signUp-form-container div:nth-child(8) {
  display: block;
  width: 100%;
  grid-column: 1/-1;
}

#profileBuilder-container {
  width: 100vw;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 3%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
  background-color: #f5f5f5;
  position: relative;
  overflow-y: hidden;
}
#profileBuilder-container #particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#profileBuilder-container #title-box {
  position: relative;
  width: 100%;
  height: 12%;
}
#profileBuilder-container #title-box h1 {
  font-size: 60px;
  width: 100%;
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 3%;
}
#profileBuilder-container #title-box h3 {
  font-size: 25px;
  width: 100%;
}
#profileBuilder-container #selection-box {
  position: relative;
  display: inline-flex;
  justify-content: center;
  z-index: 98;
  gap: 2%;
  width: 100%;
  height: 5%;
  margin-top: 3%;
}
#profileBuilder-container #selection-box .option-buttons {
  height: 50px;
  width: 50px;
  font-size: 20px;
  font-weight: bold;
  color: rgb(33, 0, 45);
  background-color: rgba(255, 255, 255, 0.3960784314);
  box-shadow: 5px 5px 20px rgba(162, 0, 255, 0.353);
  border-color: transparent;
  border-radius: 50%;
}
#profileBuilder-container #profile-builder-form-container {
  width: 80%;
  height: 70%;
  position: relative;
  justify-content: center;
  align-content: center;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  position: relative;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .next-buttons {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 300px;
  height: 40px;
  position: relative;
  align-self: center;
  bottom: 0;
  z-index: 99;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .next-buttons:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers {
  position: absolute;
  height: 90%;
  width: 100%;
  display: block;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  /* From https://css.glass */
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(7.7px);
  backdrop-filter: blur(7.7px);
  border: 1px solid rgba(255, 255, 255, 0.89);
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers h3 {
  width: 100%;
  height: 10%;
  font-size: 30px;
  margin-bottom: 2%;
  position: relative;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers h4 {
  font-size: 20px;
  position: absolute;
  width: 100%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers label {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: #ff1099;
  width: 100%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers input {
  position: relative;
  width: 30%;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.301);
  border: none;
  margin-top: 1%;
  margin-bottom: 1%;
  padding-left: 20px;
  box-shadow: 2px 2px 5px rgba(53, 49, 63, 0.205);
  text-transform: capitalize;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers input:focus {
  outline: none;
  border-color: transparent;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers .form-submission-buttons {
  width: 10%;
  border-radius: 3rem;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form .form-containers .error-messages {
  width: 100%;
  height: 30px;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #interests-container div {
  margin-top: 2%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-image-container input[type=file] {
  display: none;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-image-container #image-container {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1%;
  box-shadow: 2px 2px 10px rgba(53, 49, 63, 0.205);
  overflow: hidden;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-image-container #image-container #profile-image {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border: none;
  background-color: transparent;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-image-container img:hover {
  cursor: pointer;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #interests-container #interests-box {
  width: 100%;
  height: 100%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #interests-container #interests-box ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 2% 5% 0% 5%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #interests-container #interests-box ul .selected {
  color: rgb(195, 13, 255);
  box-shadow: 2px 2px 8px rgb(195, 13, 255);
  border-radius: 3rem;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #interests-container #interests-box ul .unselected {
  color: rgb(33, 0, 45);
  box-shadow: none;
  border-radius: none;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #interests-container #interests-box ul li {
  list-style: none;
  margin: 0.5%;
  font-weight: bold;
  position: relative;
  padding: 0.5%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #interests-container #interests-box ul li:hover {
  cursor: pointer;
  color: #c30dff;
  font-weight: bold;
  transform: scale(1.2);
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-image-section {
  display: flex;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-education-section {
  display: none;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-career-section {
  display: none;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-interests-section {
  display: none;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-section {
  display: none;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container #profile-builder-submit {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 30%;
  height: 40px;
  border-radius: 8px;
  font-size: 18px;
  position: relative;
  margin-bottom: 10%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container #profile-builder-submit:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes {
  width: 20%;
  height: 60%;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  box-shadow: 5px 5px 20px rgba(162, 0, 255, 0.242);
  position: relative;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes h4 {
  position: relative;
  font-size: 25px;
  top: 0%;
  left: 50%;
  width: 100%;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes ul {
  display: flex;
  height: 100px;
  display: grid;
  grid-auto-rows: min-content;
  overflow-y: scroll;
  margin-top: 50px;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes ul::-webkit-scrollbar {
  display: none;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes li {
  list-style: none;
  margin-bottom: 1%;
  margin-top: 2%;
  margin: 2% 10% 0% 10%;
  text-transform: capitalize;
  font-weight: 600;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.075);
  height: 30px;
  border-radius: 5px;
  padding: 1%;
  font-size: 14px;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes .edit-buttons {
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  color: white;
  width: 50%;
  height: 40px;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes .edit-buttons:hover {
  cursor: pointer;
  box-shadow: 5px 5px 20px rgba(162, 0, 255, 0.353);
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container .profile-preview-boxes:hover {
  box-shadow: 5px 5px 20px rgba(255, 0, 149, 0.242);
  transition: box-shadow 0.3s ease;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container #profile-image-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container #profile-image-preview #preview-image-container {
  width: 120px;
  height: 120px;
  display: flex;
  margin-bottom: 50px;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 2px 2px 10px rgba(53, 49, 63, 0.205);
  overflow: hidden;
}
#profileBuilder-container #profile-builder-form-container #profile-builder-form #profile-preview-container #profile-image-preview #preview-image-container #preview-image {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  position: relative;
  justify-self: center;
}

#main-nav-header {
  width: 100%;
  height: 10vh;
  position: fixed;
  z-index: 99;
  top: 0;
  font-family: "Roboto", sans-serif;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.103);
}
#main-nav-header #main-nav {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.315);
  position: relative;
}
#main-nav-header #main-nav div {
  width: 30%;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#main-nav-header #main-nav div ul {
  width: 100%;
  display: flex;
}
#main-nav-header #main-nav div:nth-child(1) {
  width: 10%;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-weight: bold;
}
#main-nav-header #main-nav div:nth-child(2) {
  width: 25%;
}
#main-nav-header #main-nav div:nth-child(2) li {
  list-style: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: transparent;
  background-color: white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  outline: none;
  transition: transform 0.1s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  border-radius: 50%;
  background-color: white;
}
#main-nav-header #main-nav div:nth-child(2) li:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#main-nav-header #main-nav div:nth-child(2) li img {
  width: 40px;
  height: 40px;
}
#main-nav-header #main-nav div:nth-child(3) {
  justify-items: center;
}
#main-nav-header #main-nav div:nth-child(3) form {
  width: 100%;
  position: relative;
  justify-items: center;
}
#main-nav-header #main-nav div:nth-child(3) form #user-search-input {
  width: 70%;
  height: 40px;
  border-radius: 3rem;
  border: none;
  padding-left: 2%;
  box-shadow: 2px 2px 5px rgba(108, 108, 108, 0.522);
  font-size: 15px;
  position: absolute;
  left: 50%;
  top: 1%;
  transform: translate(-50%, -50%);
}
#main-nav-header #main-nav div:nth-child(3) form #user-search-input:focus {
  outline: none;
  border-color: transparent;
}
#main-nav-header #main-nav div:nth-child(4) {
  justify-content: center;
}
#main-nav-header #main-nav div:nth-child(4) img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(108, 108, 108, 0.522);
  -o-object-fit: cover;
     object-fit: cover;
}
#main-nav-header #main-nav div:nth-child(4) p {
  margin-left: 5%;
  width: 40%;
  font-weight: bold;
  font-size: 20px;
  text-transform: capitalize;
}
#main-nav-header #main-nav div:nth-child(4) #logout-button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
}
#main-nav-header #main-nav div:nth-child(4) #logout-button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#main-nav-header #friend-requests-container {
  position: absolute;
  top: 110%;
  left: 2%;
  background-color: white;
  width: 400px;
  height: auto;
  max-height: 400px;
  display: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.455);
  z-index: 99;
}
#main-nav-header #friend-requests-container #friend-requests {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2%;
  overflow-y: auto;
}
#main-nav-header #friend-requests-container #friend-requests li {
  position: relative;
  width: 100%;
  height: 100px;
  padding: 2%;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-transform: capitalize;
  gap: 2%;
}
#main-nav-header #friend-requests-container #friend-requests li img {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#main-nav-header #friend-requests-container #friend-requests li p {
  position: relative;
  text-decoration: none;
  color: black;
  font-weight: bold;
  flex-wrap: wrap;
}
#main-nav-header #friend-requests-container #friend-requests li .request-buttons {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  position: absolute;
  width: 70px;
  height: 30px;
}
#main-nav-header #friend-requests-container #friend-requests li .request-buttons:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#main-nav-header #friend-requests-container #friend-requests li .accept-friend-request-buttons {
  left: 60%;
}
#main-nav-header #friend-requests-container #friend-requests li .decline-friend-request-buttons {
  left: 80%;
}
#main-nav-header #friend-requests-container #friend-requests li button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#main-nav-header #friend-requests-container div {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 0px 8px 8px;
  margin-bottom: 2%;
}
#main-nav-header #friend-requests-container div #close-notifications {
  width: 35px;
  height: 35px;
}
#main-nav-header #friend-requests-container div #close-notifications:hover {
  cursor: pointer;
}
#main-nav-header #user-search-list-container {
  position: absolute;
  width: 500px;
  height: auto;
  background-color: white;
  left: 37%;
  top: 80%;
  overflow-y: scroll;
  display: none;
}
#main-nav-header #user-search-list-container ul {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#main-nav-header #user-search-list-container ul li {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  padding: 2%;
  align-items: center;
  margin-top: 2%;
  text-transform: capitalize;
}
#main-nav-header #user-search-list-container ul li img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#main-nav-header #user-search-list-container ul li p {
  margin-left: 3%;
  text-decoration: none;
  color: black;
}
#main-nav-header #user-search-list-container ul li:hover {
  cursor: pointer;
}
#main-nav-header #user-search-list-container ::-webkit-scrollbar {
  display: none;
}

footer {
  position: absolute;
  width: 100%;
  height: 8vh;
  background-color: rgb(248, 248, 248);
  display: flex;
  flex-direction: row;
}
footer div:nth-child(1) {
  display: flex;
  width: 10%;
  align-items: center;
  justify-content: center;
}
footer div:nth-child(1) img {
  width: 80px;
  height: 80px;
}
footer div:nth-child(2) {
  width: 90%;
  display: flex;
}
footer div:nth-child(2) ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2%;
}
footer div:nth-child(2) ul li {
  list-style: none;
}

#user-profile-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  margin-bottom: 200px;
  background-attachment: fixed;
}
#user-profile-body #particles-js {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#user-profile-body #profile-background-box {
  top: 7%;
  position: absolute;
  left: 0;
  width: 100vw;
  height: 50vh;
  background-color: pink;
  overflow: hidden;
}
#user-profile-body #profile-background-box div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#user-profile-body #profile-background-box div img {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#user-profile-body #profile-background-box div img:not([src]), #user-profile-body #profile-background-box div img[src=""] {
  display: none;
}
#user-profile-body #profile-background-box .friendship-button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  width: 150px;
  height: 40px;
  font-size: 15px;
  font-weight: bold;
}
#user-profile-body #profile-background-box .friendship-button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-profile-body #profile-background-box #report-user-button {
  position: absolute;
  top: 10%;
  right: 2%;
}
#user-profile-body #profile-background-box #main-add-button {
  position: absolute;
  top: 10%;
  left: 2%;
}
#user-profile-body #profile-background-box #unsend-request-button {
  position: absolute;
  top: 10%;
  left: 2%;
}
#user-profile-body #profile-background-box #main-unfriend-button {
  position: absolute;
  top: 10%;
  left: 2%;
}
#user-profile-body #profile-background-box .main-block-buttons {
  position: absolute;
  top: 20%;
  left: 2%;
}
#user-profile-body #profile-background-box #edit-background-icon {
  position: absolute;
  top: 85%;
  left: 2%;
  width: 55px;
  height: 55px;
  background-color: rgba(255, 255, 255, 0.707);
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(53, 0, 71, 0.249);
  transition: transform 0.1s ease-in-out;
}
#user-profile-body #profile-background-box #edit-background-icon:hover {
  cursor: pointer;
  transform: scale(1.2);
}
#user-profile-body #profile-background-box #report-user-form-container {
  width: 600px;
  height: 300px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.218);
  z-index: 99;
  display: none;
}
#user-profile-body #profile-background-box #report-user-form-container form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4%;
  position: relative;
  text-align: center;
}
#user-profile-body #profile-background-box #report-user-form-container form img {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 40px;
  height: 40px;
}
#user-profile-body #profile-background-box #report-user-form-container form img:hover {
  cursor: pointer;
}
#user-profile-body #profile-background-box #report-user-form-container form label {
  font-weight: bold;
}
#user-profile-body #profile-background-box #report-user-form-container form select {
  width: 80%;
  height: 40px;
  outline: 2px solid #c30dff;
  border: transparent;
  border-radius: 8px;
}
#user-profile-body #profile-background-box #report-user-form-container form button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 80%;
  height: 40px;
  border-radius: 8px;
}
#user-profile-body #profile-background-box #report-user-form-container form button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-profile-body #profile-background-box #report-user-form-container form #report-form-err-msg {
  width: 30px;
  width: 80%;
}
#user-profile-body #profile-background-box #update-background-image-form {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 300px;
  z-index: 99;
  border-radius: 3rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.218);
  justify-content: center;
  align-items: center;
  display: none;
  flex-direction: column;
  text-align: center;
}
#user-profile-body #profile-background-box #update-background-image-form #close-background-form-button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 80px;
  height: 30px;
  position: absolute;
  top: 8%;
  left: 4%;
  font-size: 15px;
}
#user-profile-body #profile-background-box #update-background-image-form #close-background-form-button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-profile-body #profile-background-box #update-background-image-form #close-background-form-button:hover {
  cursor: pointer;
}
#user-profile-body #profile-background-box #update-background-image-form #background-img-upload {
  display: none;
}
#user-profile-body #profile-background-box #update-background-image-form label {
  display: inline-block;
  background-color: white; /* Accent color */
  color: black;
  font-size: 16px;
  font-weight: bold;
  width: 80%;
  height: 60px;
  border: dashed 3px #c30dff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
#user-profile-body #profile-background-box #update-background-image-form label:hover {
  background-color: rgba(255, 192, 222, 0.3176470588);
}
#user-profile-body #profile-background-box #update-background-image-form button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 80%;
  height: 40px;
  font-size: 18px;
  font-weight: bold;
  border: transparent;
  border-radius: 8px;
}
#user-profile-body #profile-background-box #update-background-image-form button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#user-profile-body #profile-background-box #update-background-image-form #background-image-err-msg {
  margin-top: 2%;
}
#user-profile-body #p-image-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(53, 0, 71, 0.249);
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
  background-color: white;
}
#user-profile-body #p-image-box img {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#user-profile-body #name-box {
  width: 250px;
  height: 50px;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(53, 0, 71, 0.249);
  border: 2px solid white;
  border-radius: 8px;
  display: flex;
  text-align: center;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#user-profile-body #name-box h2 {
  font-size: 30px;
  font-weight: bold;
  text-transform: capitalize;
}
#user-profile-body .profile-boxes {
  box-shadow: 2px 2px 5px rgba(53, 0, 71, 0.249);
  width: 300px;
  height: 150px;
  position: absolute;
  background-color: white;
  border-radius: 8px;
  text-transform: capitalize;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#user-profile-body .profile-boxes img {
  margin-bottom: 2%;
  width: 50px;
  align-self: center;
  border-radius: 50%;
}
#user-profile-body .profile-boxes h2 {
  font-size: 18px;
}
#user-profile-body .profile-boxes p {
  color: rgb(100, 0, 128);
}
#user-profile-body .profile-boxes p:hover {
  cursor: pointer;
  font-weight: bold;
}
#user-profile-body #profile-info-box {
  top: 70%;
  left: 90%;
}
#user-profile-body #friends-list-box {
  top: 70%;
  left: 10%;
}
#user-profile-body #user-info-container {
  width: 700px;
  height: auto;
  min-height: 400px;
  max-height: 700px;
  position: absolute;
  top: 70%;
  left: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.312);
  z-index: 99;
}
#user-profile-body #user-info-container ::-webkit-scrollbar {
  display: none;
}
#user-profile-body #user-info-container h2 {
  margin-bottom: 3%;
}
#user-profile-body #user-info-container ul {
  width: 100%;
  height: auto;
  text-align: center;
  margin-bottom: 2%;
  display: flex;
  flex-direction: column;
}
#user-profile-body #user-info-container ul li {
  list-style: none;
  width: 100%;
  margin-top: 1%;
  text-transform: capitalize;
}
#user-profile-body #user-info-container #user-info-close-button {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 80px;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.316);
  color: black;
  font-size: 15px;
  border: transparent;
  font-weight: bold;
}
#user-profile-body #user-info-container #user-info-close-button:hover {
  cursor: pointer;
}
#user-profile-body #user-info-container #friends-list-close-button:hover {
  cursor: pointer;
}
#user-profile-body #friends-list-container {
  width: 700px;
  height: auto;
  min-height: 300px;
  max-height: 500px;
  position: absolute;
  top: 70%;
  left: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.312);
  z-index: 99;
}
#user-profile-body #friends-list-container ::-webkit-scrollbar {
  display: none;
}
#user-profile-body #friends-list-container #friends-list-close-button {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 80px;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.316);
  color: black;
  font-size: 15px;
  border: transparent;
  font-weight: bold;
}
#user-profile-body #friends-list-container #friends-list-close-button:hover {
  cursor: pointer;
}
#user-profile-body #friends-list-container #friends-list {
  position: relative;
  width: 80%;
  height: 50%;
  background-color: white;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  padding-bottom: 2%;
}
#user-profile-body #friends-list-container #friends-list li {
  list-style: none;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  margin-top: 1%;
  gap: 2%;
}
#user-profile-body #friends-list-container #friends-list li img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.596);
}
#user-profile-body #friends-list-container #friends-list li img:hover {
  cursor: pointer;
}
#user-profile-body #friends-list-container #friends-list li p {
  text-transform: capitalize;
  font-weight: bold;
  font-size: 20px;
}
#user-profile-body #user-photos-box {
  top: 70%;
  left: 30%;
}
#user-profile-body #user-photos-container {
  width: 1000px;
  height: auto;
  min-height: 500px;
  max-height: 800px;
  position: absolute;
  top: 70%;
  left: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.312);
  z-index: 99;
  overflow: hidden;
}
#user-profile-body #user-photos-container div {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-y: scroll;
}
#user-profile-body #user-photos-container div ::-webkit-scrollbar {
  display: none;
}
#user-profile-body #user-photos-container div img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 200px;
  height: 150px;
  border-radius: 3px;
  margin: 2% 0% 2% 0%;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.386);
}
#user-profile-body #user-photos-container #photo-album-close-button {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 80px;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.316);
  color: black;
  font-size: 15px;
  border: transparent;
  font-weight: bold;
}
#user-profile-body #user-photos-container #photo-album-close-button:hover {
  cursor: pointer;
}
#user-profile-body #user-interests-box {
  top: 70%;
  left: 70%;
}
#user-profile-body #user-interests-container {
  width: 700px;
  height: auto;
  min-height: 400px;
  max-height: 700px;
  position: absolute;
  top: 70%;
  left: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.312);
  z-index: 99;
}
#user-profile-body #user-interests-container ul {
  width: 80%;
  height: 250px;
  margin: 4%;
  background-color: rgb(249, 249, 249);
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.3);
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#user-profile-body #user-interests-container ul li {
  margin-top: 2%;
  width: 100%;
  width: 100%;
  height: 20px;
  list-style: none;
  display: block;
}
#user-profile-body #user-interests-container ul::-webkit-scrollbar {
  display: none;
}
#user-profile-body #user-interests-container #interests-close-button {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 80px;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.316);
  color: black;
  font-size: 15px;
  border: transparent;
  font-weight: bold;
}
#user-profile-body #user-interests-container #interests-close-button:hover {
  cursor: pointer;
}
#user-profile-body #post-info-container {
  width: 900px;
  height: 600px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.709);
  z-index: 99;
  overflow: hidden;
  display: none;
}
#user-profile-body #post-info-container #close-post-likers {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 2%;
  left: 2%;
  background-color: transparent;
  box-shadow: none;
}
#user-profile-body #post-info-container #close-post-likers:hover {
  cursor: pointer;
}
#user-profile-body #post-info-container #post-list-box {
  width: 80%;
  height: auto;
  max-height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2%;
  padding: 2%;
  align-items: center;
  overflow-y: scroll;
}
#user-profile-body #post-info-container #post-list-box .post-likers {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding: 2%;
}
#user-profile-body #post-info-container #post-list-box .post-likers img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#user-profile-body #post-info-container #post-list-box .post-likers p {
  font-size: 18px;
  margin-left: 2%;
  font-weight: bold;
}
#user-profile-body #zodiac-box {
  position: absolute;
  top: 90%;
  left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#user-profile-body #zodiac-box h2 {
  font-size: 20px;
  width: 100%;
  height: 20px;
}
#user-profile-body #zodiac-box img {
  width: 80px;
  height: 80px;
  margin-bottom: 0%;
}
#user-profile-body #timeline-box {
  position: absolute;
  top: 90%;
  left: 90%;
}
#user-profile-body #timeline-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 400px;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
  border-radius: 8px;
  display: none;
  justify-content: center;
  align-items: center;
}
#user-profile-body #timeline-container #line {
  width: 80%;
  height: 3px;
  background-color: #c30dff;
  position: absolute;
}
#user-profile-body #timeline-container #timeline-close-button {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 80px;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.316);
  color: black;
  font-size: 15px;
  border: transparent;
  font-weight: bold;
  z-index: 99;
}
#user-profile-body #timeline-container #timeline-close-button:hover {
  cursor: pointer;
}
#user-profile-body #timeline-container ul {
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  gap: 2%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow-x: scroll;
  position: relative;
}
#user-profile-body #timeline-container ul li {
  width: 250px;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 2%;
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 2%;
  background-color: white;
}
#user-profile-body #timeline-container ul li img {
  width: 30px;
  height: 30px;
}
#user-profile-body #timeline-container ul li h2 {
  font-size: 15px;
  width: 100%;
}
#user-profile-body #timeline-container ul li h3 {
  font-size: 12px;
  width: 100%;
}
#user-profile-body #user-post-feed {
  width: 40%;
  position: absolute;
  top: 110%;
  height: 500px;
  left: 50%;
  font-family: "Roboto", sans-serif;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 2%;
  align-items: center;
  overflow-y: scroll;
  gap: 3%;
}
#user-profile-body #user-post-feed .user-posts {
  position: relative;
  width: 80%;
  height: auto;
  padding: 2% 0% 2% 0%;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  margin-top: 2%;
  margin-bottom: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#user-profile-body #user-post-feed .user-posts p:nth-child(1) {
  color: rgba(64, 1, 85, 0.6352941176);
}
#user-profile-body #user-post-feed .user-posts .post-locations {
  font-size: 15px;
  font-weight: bold;
}
#user-profile-body #user-post-feed .user-posts span {
  width: 80%;
  height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#user-profile-body #user-post-feed .user-posts span h3 {
  margin-left: 2%;
}
#user-profile-body #user-post-feed .user-posts .post-profile-img {
  width: 50px;
  height: 50px;
  -webkit-clip-path: circle(50%);
          clip-path: circle(50%);
  -o-object-fit: cover;
     object-fit: cover;
}
#user-profile-body #user-post-feed .user-posts .post-stats-box {
  width: 80%;
  height: 50px;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
}
#user-profile-body #user-post-feed .user-posts .post-stats-box .heart-icon {
  width: 30px;
  height: 30px;
  border-radius: none;
  box-shadow: none;
}
#user-profile-body #user-post-feed .user-posts .post-stats-box .heart-icon:hover {
  cursor: pointer;
}
#user-profile-body #user-post-feed .user-posts .post-stats-box p {
  width: 15%;
  color: #c30dff;
  font-weight: bold;
  margin-left: 2%;
}
#user-profile-body #user-post-feed .user-posts .post-stats-box p:hover {
  cursor: pointer;
}
#user-profile-body #user-post-feed .user-posts p {
  width: 80%;
  font-size: 15px;
  font-size: 18px;
  margin-top: 1%;
}
#user-profile-body #user-post-feed .user-posts img {
  width: 80%;
  height: 40%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.336);
}

#messages-body {
  width: 100%;
  height: 100vh;
  position: fixed;
}
#messages-body .hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
#messages-body .visible {
  visibility: visible;
  opacity: 1;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}
#messages-body #messages-section {
  position: absolute;
  left: 3%;
  top: 15%;
  width: 350px;
  height: 50%;
  border-radius: 8px;
  background-color: rgb(248, 248, 248);
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
  flex-direction: column;
  overflow-y: scroll;
  align-items: stretch;
}
#messages-body #messages-section h2 {
  width: 100%;
  height: 50px;
  background-color: white;
  text-align: center;
  font-size: 22px;
  position: sticky;
  top: 0;
  left: 0;
  padding-top: 2%;
}
#messages-body #messages-section .conversation-boxes {
  width: 100%;
  height: 80px;
  margin-top: 1%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 2%;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
  background-color: white;
}
#messages-body #messages-section .conversation-boxes:hover {
  cursor: pointer;
  background-color: rgb(247, 247, 247);
}
#messages-body #messages-section .conversation-boxes img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-left: 3%;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
}
#messages-body #messages-section .conversation-boxes p {
  width: 60%;
  text-transform: capitalize;
  font-weight: bold;
}
#messages-body #message-friends-section {
  position: absolute;
  left: 3%;
  top: 70%;
  width: 350px;
  height: 25%;
  border-radius: 8px;
  background-color: rgb(248, 248, 248);
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
  flex-direction: column;
  overflow-y: scroll;
  align-items: stretch;
}
#messages-body #message-friends-section h2 {
  width: 100%;
  height: 50px;
  background-color: white;
  text-align: center;
  font-size: 22px;
  position: sticky;
  top: 0;
  left: 0;
  padding-top: 2%;
}
#messages-body #message-friends-section .friend-boxes {
  width: 100%;
  height: 80px;
  margin-top: 1%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 2%;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
  background-color: white;
}
#messages-body #message-friends-section .friend-boxes:hover {
  cursor: pointer;
  background-color: rgb(247, 247, 247);
}
#messages-body #message-friends-section .friend-boxes img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-left: 3%;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
}
#messages-body #message-friends-section .friend-boxes p {
  width: 60%;
  text-transform: capitalize;
  font-weight: bold;
}
#messages-body #main-chat-section {
  position: absolute;
  top: 55%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 80%;
  border-radius: 8px;
  background-color: rgba(248, 248, 248, 0.482);
  box-shadow: 2px 2px 5px rgba(157, 157, 157, 0.341);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2%;
}
#messages-body #main-chat-section #chat-box {
  position: relative;
  width: 90%;
  height: 70%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
  border-radius: 8px;
  gap: 1%;
}
#messages-body #main-chat-section #chat-box .chat-messages {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  position: relative;
  width: 40%;
  height: auto;
  min-height: 100px;
  margin: 1%;
  align-content: center;
  justify-content: center;
  padding: 1%;
  border-radius: 8px;
  gap: 3%;
}
#messages-body #main-chat-section #chat-box .chat-messages:nth-child(even) {
  align-content: flex-start;
}
#messages-body #main-chat-section #chat-box .chat-messages:nth-child(odd) {
  align-self: flex-end;
}
#messages-body #main-chat-section #chat-box span {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4%;
}
#messages-body #main-chat-section #chat-box span img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-left: 3%;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
}
#messages-body #main-chat-section #chat-box span h2 {
  width: 60%;
  text-transform: capitalize;
  font-weight: bold;
  font-size: 15px;
}
#messages-body #main-chat-section #chat-box p {
  width: 100%;
  height: auto;
  align-self: center;
  margin-left: 3%;
  margin-top: 1%;
}
#messages-body #main-chat-section #message-container {
  width: 90%;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
  border-radius: 8px;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 3%;
}
#messages-body #main-chat-section #message-container #message-input {
  width: 75%;
  height: 100px;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(115, 115, 115, 0.372);
  outline: none;
  border: transparent;
  resize: none;
  padding-left: 2%;
  padding-top: 1%;
  border-radius: 8px;
}
#messages-body #main-chat-section #message-container button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
}
#messages-body #main-chat-section #message-container button:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#adminDashboard {
  width: 100vw;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  display: flex;
  position: relative;
  overflow-y: hidden;
}
#adminDashboard button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
}
#adminDashboard button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#adminDashboard .hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
#adminDashboard .visible {
  visibility: visible;
  opacity: 1;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}
#adminDashboard #admin-header {
  width: 100%;
  height: 10vh;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;
  background-color: white;
  align-items: center;
  justify-content: center;
}
#adminDashboard #admin-header div {
  width: 48%;
  height: 100%;
  display: flex;
  align-items: center;
}
#adminDashboard #admin-header div:nth-child(1) {
  gap: 20%;
}
#adminDashboard #admin-header div:nth-child(1) h1 {
  text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.192);
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
}
#adminDashboard #admin-header div:nth-child(2) {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 3%;
}
#adminDashboard #admin-header div:nth-child(2) img {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-clip-path: circle(50%);
          clip-path: circle(50%);
}
#adminDashboard #admin-header div:nth-child(2) button {
  width: 120px;
  height: 40px;
  font-size: 20px;
  text-align: center;
}
#adminDashboard #admin-dashboard-nav {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  position: absolute;
  left: 3%;
  top: 13%;
  width: 350px;
  height: 800px;
  border-radius: 3rem;
  justify-content: center;
  display: flex;
}
#adminDashboard #admin-dashboard-nav ul {
  margin-top: 20%;
  width: 50%;
  height: 50%;
  justify-content: center;
}
#adminDashboard #admin-dashboard-nav ul li {
  list-style: none;
  margin-left: 25%;
  font-size: 20px;
  margin-top: 20%;
}
#adminDashboard #admin-dashboard-nav ul li form {
  width: 100%;
}
#adminDashboard #admin-dashboard-nav ul li form button:hover {
  cursor: pointer;
}
#adminDashboard #admin-dashboard-nav ul li:hover {
  font-weight: bold;
  cursor: pointer;
}
#adminDashboard #main-dash-section {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 1350px;
  height: 800px;
  position: absolute;
  top: 13%;
  left: 25%;
  border-radius: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#adminDashboard #main-dash-section h2 {
  position: absolute;
  top: 4%;
  left: 4%;
  z-index: 99;
}
#adminDashboard #main-dash-section div {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#adminDashboard #main-dash-section div #chart-containers {
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 2%;
}
#adminDashboard #main-dash-section div .box {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 250px;
  height: 200px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  margin: 3%;
}
#adminDashboard #main-dash-section div .box p {
  font-size: 80px;
}
#adminDashboard #admin-users-section {
  width: 1350px;
  height: 800px;
  background-color: transparent;
  position: absolute;
  top: 13%;
  left: 25%;
  border-radius: 3rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#adminDashboard #admin-users-section #admin-search-table-section {
  position: relative;
  width: 400px;
  height: 50px;
  display: flex;
}
#adminDashboard #admin-users-section #admin-search-table-section form {
  width: 100%;
  height: 100%;
  display: flex;
}
#adminDashboard #admin-users-section #admin-search-table-section form input {
  margin-left: 2%;
  width: 350px;
  height: 40px;
  padding: 1%;
  border-radius: 3rem;
  border: transparent;
  box-shadow: 2px 2px 5px rgba(218, 218, 218, 0.465);
  outline: none;
}
#adminDashboard #admin-users-section #admin-search-table-section form input:focus {
  border: transparent;
  outline: none;
}
#adminDashboard #admin-users-section #users-table-header {
  width: 100%;
  height: 80px;
  border-radius: 3rem 3rem 0rem 0rem;
}
#adminDashboard #admin-users-section #users-table-header ul {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 3rem 3rem 0rem 0rem;
}
#adminDashboard #admin-users-section #users-table-header ul li {
  list-style: none;
  width: 18%;
  margin-left: 2%;
  font-weight: bold;
  list-style: none;
  list-style-type: none;
}
#adminDashboard #admin-users-section #users-table {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 100%;
  height: 670px;
  overflow-y: scroll;
  border-radius: 0rem 0rem 3rem 3rem;
}
#adminDashboard #admin-users-section #users-table ul {
  width: 100%;
  height: 70px;
  display: flex;
  list-style-type: none;
  list-style: none;
}
#adminDashboard #admin-users-section #users-table ul li {
  margin-top: 2%;
  list-style: none !important;
  width: 18%;
  height: 100%;
  margin-left: 2%;
  list-style-type: none;
}
#adminDashboard #admin-users-section #users-table ul li .admin-icons {
  width: 20px;
  height: 20px;
  margin-left: 12%;
  border-radius: none;
  background-color: transparent;
}
#adminDashboard #admin-users-section #users-table ul li .admin-icons:hover {
  cursor: pointer;
  transform: scale(1.2);
}
#adminDashboard #admin-users-section #users-table ul li:nth-child(1) img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.303);
  justify-content: center;
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
}
#adminDashboard #admin-users-section #users-table ul li:nth-child(2) {
  text-transform: capitalize;
}
#adminDashboard #admin-users-section #users-table ul li:nth-child(5) {
  display: flex;
  flex-direction: row;
}
#adminDashboard #analytics-section {
  width: 1350px;
  height: 800px;
  padding-left: 3%;
  position: absolute;
  top: 13%;
  left: 25%;
  background-color: transparent;
  display: block;
}
#adminDashboard #analytics-section section {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10%;
}
#adminDashboard #analytics-section section form {
  width: 100%;
  height: 10%;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4%;
  border-radius: 3rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.303);
}
#adminDashboard #analytics-section section form select {
  height: 40px;
  width: 15%;
  border: none;
  outline: transparent;
  box-shadow: 2px 2px 15px rgba(151, 0, 148, 0.433);
  border-radius: 8px;
  text-transform: capitalize;
}
#adminDashboard #analytics-section #data-container {
  position: relative;
  width: 100%;
  height: 80%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 5%;
}
#adminDashboard #analytics-section #data-container div {
  width: 20%;
  height: 200px;
  border-radius: 3rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.303);
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#adminDashboard #analytics-section #data-container div p {
  font-size: 80px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.192);
  background: -webkit-linear-gradient(rgba(255, 16, 153, 0.9254901961), #c30dff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#adminDashboard #reports-section {
  width: 1350px;
  height: 850px;
  background-color: transparent;
  position: absolute;
  top: 13%;
  left: 25%;
  border-radius: 3rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#adminDashboard #reports-section #reports-table-header {
  width: 100%;
  height: 10%;
  border-radius: 3rem 3rem 0rem 0rem;
}
#adminDashboard #reports-section #reports-table-header ul {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 3rem 3rem 0rem 0rem;
}
#adminDashboard #reports-section #reports-table-header ul li {
  list-style: none;
  width: 18%;
  margin-left: 2%;
  font-weight: bold;
  list-style: none;
  list-style-type: none;
}
#adminDashboard #reports-section #reports-table {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.389);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 2% 0% 2% 0%;
  box-shadow: 0 0 8px 2px rgba(162, 0, 255, 0.242);
  border-radius: 3rem;
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  gap: 2%;
  overflow-y: scroll;
  border-radius: 0rem 0rem 3rem 3rem;
  align-items: center;
}
#adminDashboard #reports-section #reports-table ul {
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
  height: 70px;
  display: flex;
  list-style-type: none;
  list-style: none;
  align-items: center;
  gap: 3%;
  border-bottom: 1.5px solid #c30dff;
}
#adminDashboard #reports-section #reports-table ul li {
  list-style: none !important;
  width: 18%;
  display: flex;
  height: 100%;
  list-style-type: none;
  padding-bottom: 1%;
  align-items: center;
}
#adminDashboard #reports-section #reports-table ul li .report-icons {
  width: 20px;
  height: 20px;
  margin-left: 12%;
  border-radius: none;
  background-color: transparent;
}
#adminDashboard #reports-section #reports-table ul li .report-icons:hover {
  cursor: pointer;
  transform: scale(1.2);
}
#adminDashboard #reports-section #reports-table ul li:nth-child(2) img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.303);
  justify-content: center;
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
}
#adminDashboard #reports-section #reports-table ul li:nth-child(4) {
  text-transform: capitalize;
}
#adminDashboard #report-action-box {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background-color: white;
  border-radius: 3rem;
  box-shadow: 2px 2px 20px rgba(128, 128, 128, 0.303);
  display: none;
  justify-content: center;
  align-items: center;
}
#adminDashboard #report-action-box form {
  width: 80%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5%;
  text-align: center;
}
#adminDashboard #report-action-box form h2 {
  text-transform: capitalize;
}
#adminDashboard #report-action-box form img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.303);
  justify-content: center;
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
}
#adminDashboard #report-action-box form input {
  width: 50%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.474);
  padding-left: 2%;
}
#adminDashboard #report-action-box form select {
  width: 50%;
  height: 40px;
  background-color: transparent;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.474);
  border: transparent;
  border-radius: 8px;
  padding-left: 2%;
}
#adminDashboard #report-action-box #action-box-button {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 100px;
  height: 40px;
  font-size: 20px;
}
#adminDashboard #report-action-box .form-err-mssgs {
  height: 20px;
  color: #c30dff;
}
#adminDashboard #report-action-box button {
  width: 50%;
}

#settings-body {
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  background-color: rgba(212, 189, 228, 0.226);
}
#settings-body .hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
#settings-body .visible {
  visibility: visible;
  opacity: 1;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}
#settings-body #settings-nav-section {
  position: absolute;
  left: 3%;
  top: 13%;
  width: 350px;
  height: 800px;
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.496);
  box-shadow: 2px 2px 5px rgba(65, 0, 112, 0.138);
  justify-content: center;
  display: flex;
}
#settings-body #settings-nav-section ul {
  margin-top: 20%;
  width: 50%;
  height: 50%;
  justify-content: center;
}
#settings-body #settings-nav-section ul li {
  list-style: none;
  margin-left: 25%;
  font-size: 20px;
  margin-top: 20%;
}
#settings-body #settings-nav-section ul li a {
  text-decoration: none;
  color: black;
}
#settings-body #settings-nav-section ul li:hover {
  font-weight: bold;
  cursor: pointer;
}
#settings-body .form-sections {
  position: absolute;
  top: 55%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 800px;
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.496);
  box-shadow: 2px 2px 5px rgba(65, 0, 112, 0.138);
  justify-content: center;
  display: flex;
  align-items: center;
}
#settings-body .form-sections .error-messages {
  width: 40%;
  height: 30px;
  width: 100%;
  text-align: center;
  margin-bottom: 1%;
  margin-top: 0.5%;
}
#settings-body .form-sections #update-education-form {
  height: 90%;
}
#settings-body .form-sections #update-education-form input {
  margin-bottom: 0.5%;
}
#settings-body .form-sections #update-education-form .error-messages {
  margin-bottom: 0.5%;
}
#settings-body .form-sections form {
  width: 80%;
  height: 80%;
  border-radius: 3rem;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(172, 172, 172, 0.372);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#settings-body .form-sections form h2 {
  margin-bottom: 4%;
}
#settings-body .form-sections form label {
  margin-bottom: 1%;
}
#settings-body .form-sections form input {
  width: 40%;
  height: 40px;
  margin-bottom: 1%;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.596);
  border-radius: 8px;
  border: transparent;
  padding-left: 1%;
}
#settings-body .form-sections form input:focus {
  border: 2px solid #cf0362;
  outline: none;
}
#settings-body .form-sections form button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 40%;
  height: 40px;
  border-radius: 8px;
  border: transparent;
  font-weight: bold;
  font-size: 18px;
}
#settings-body .form-sections form button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#settings-body .form-sections form button:hover {
  cursor: pointer;
  animation: transform 0.5s ease-in-out;
  transform: scale(1.1);
  background-color: rgba(207, 3, 98, 0.6078431373);
}
#settings-body #update-interests-section ul {
  width: 80%;
  height: 80%;
  background-color: white;
  border-radius: 3rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.596);
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  flex-direction: column;
}
#settings-body #update-interests-section ul h2 {
  margin-bottom: 2%;
}
#settings-body #update-interests-section ul li {
  width: 100%;
  height: 30px;
  list-style: none;
}
#settings-body #update-friends-section ul, #settings-body #update-blocked-section ul {
  width: 80%;
  height: 80%;
  background-color: white;
  border-radius: 3rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.596);
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
}
#settings-body #update-friends-section ul li, #settings-body #update-blocked-section ul li {
  width: 25%;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.596);
  margin: 2%;
  gap: 5%;
}
#settings-body #update-friends-section ul li img, #settings-body #update-blocked-section ul li img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.596);
}
#settings-body #update-friends-section ul li img:hover, #settings-body #update-blocked-section ul li img:hover {
  cursor: pointer;
}
#settings-body #update-friends-section ul li p, #settings-body #update-blocked-section ul li p {
  text-transform: capitalize;
  font-weight: bold;
  font-size: 20px;
}
#settings-body #update-friends-section ul li div, #settings-body #update-blocked-section ul li div {
  display: flex;
  flex-direction: row;
  gap: 10%;
}
#settings-body #update-friends-section ul li div button, #settings-body #update-blocked-section ul li div button {
  width: 150px;
  height: 40px;
  border-radius: 3rem;
  border: transparent;
  background: rgb(195, 13, 255);
  background: linear-gradient(321deg, #c30dff 0%, rgba(255, 16, 153, 0.9254901961) 100%);
  box-shadow: 2px 2px 5px rgba(58, 0, 94, 0.518);
  outline: none;
  font-weight: bold;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  transition: transform 0.1s ease-in-out;
  color: white;
  width: 100px;
}
#settings-body #update-friends-section ul li div button:hover, #settings-body #update-blocked-section ul li div button:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#user-not-found-body {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#user-not-found-body section {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#user-not-found-body section h1 {
  font-size: 50px;
}
#user-not-found-body section p {
  color: rgba(255, 16, 153, 0.9254901961);
  font-weight: bold;
  font-size: 25px;
}
#user-not-found-body section p:hover {
  cursor: pointer;
}
#user-not-found-body section img {
  width: 40%;
  height: 70%;
}

#server-error-body {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#server-error-body section {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#server-error-body section h1 {
  font-size: 100px;
  font-weight: bold;
}
#server-error-body section p {
  color: rgba(255, 16, 153, 0.9254901961);
  font-weight: bold;
  font-size: 25px;
  margin-top: 2%;
}
#server-error-body section p:hover {
  cursor: pointer;
}
#server-error-body section img {
  width: 40%;
  height: 70%;
}

#requests-error-body {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#requests-error-body section {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#requests-error-body section h1 {
  font-size: 100px;
  font-weight: bold;
}
#requests-error-body section p {
  color: rgba(255, 16, 153, 0.9254901961);
  font-weight: bold;
  font-size: 20px;
  margin-top: 2%;
}
#requests-error-body section p:hover {
  cursor: pointer;
}
#requests-error-body section img {
  width: 40%;
  height: 70%;
}/*# sourceMappingURL=main.css.map */