* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", "Cairo", sans-serif;
  background: linear-gradient(
    to right,
    #31394d,
    #3d445b,
    #4a516a,
    #545d77,
    #5b6480
  );
}

.glassy {
  background: linear-gradient(
    to right,
    #171b2c,
    #1e2235ab,
    #1e22356a,
    #1e2235ab
  );
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.7px);
  -webkit-backdrop-filter: blur(7.7px);
}

.card-body {
  cursor: pointer;
}

.new-btn-color {
  padding: 5px 20px;
  border: none;
  color: white;
  background: rgba(255, 255, 255, 0.201);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.7px);
  -webkit-backdrop-filter: blur(7.7px);
  transition: 0.4s;
}

.new-btn-color:hover {
  color: white;
  background: rgba(0, 153, 255, 0.08);
}

#logout-btn,
#user-profile-data,
#user-profile-image {
  display: none;
}

#success-alert {
  position: fixed;
  z-index: 9999;
  width: 30%;
  bottom: 0;
  right: 0;
}

#add-post {
  display: none;
  position: fixed !important;
  bottom: 2rem;
  right: 6rem;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  font-size: 30px;
  border: none;
  background-color: #0d6efd;
  color: white;
  transition: 0.5s;
}

#add-post:hover {
  background-color: #0b5bd3;
  color: white;
}

#post-body {
  resize: none;
  height: 100px;
}

#post-body:focus {
  outline: 2px solid #1c375f;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.spinner-border {
  position: fixed;
  bottom: 0;
  opacity: 0;
  z-index: 999;
}

.spinner-border.show {
  opacity: 1;
}

@media (max-width: 768px) {
  #add-post {
    right: 1rem;
    width: 50px;
    height: 50px;
    border-radius: 20px;
  }
}

#edit-post,
#delete-post,
.profile-user {
  cursor: pointer;
}