@charset "utf-8";

:root {
    --dark_purple: hsl(245, 23%, 21%);
    --medium_purple: hsl(244, 11%, 50%);
    --light_purple: hsl(240, 22%, 90%);
    --red: hsl(0, 57%, 58%);
    --beige: hsl(0, 10%, 90%);
    --button: rgba(133, 133, 168, 95%);
    --title: hsl(245, 23%, 70%);
}

.all_reviews {
    padding: 0 10% 2rem 10%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--light_purple);
    border-radius: 10px;
    padding: 2rem;
    background-color: white;
}

.review_header {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    align-items: baseline;
}

.review_icon {
    max-width: 30px;
    padding-right: 5px;
}

.review_name {
    font-weight: 600;
}

.review_date {
    color: var(--button);
    font-size: 13px;
}

.review_footer {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
}

.review_footer .button {
    font-size: 10px;
    padding: 5px 10px;
    max-width: 150px;
}

.popup {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
  }

  .popup_content {
      position: relative;
      margin: 0 10px;
      max-width: 100%;
      max-height: 100%;
  }

  .popup_content img {
      max-width: 100%;
      max-height: 80vh;
      display: block;
  }

  .popup_close {
      position: absolute;
      top: 0px;
      right: 1rem;
      font-size: 3rem;
      font-weight: 300;
      color: var(--medium_purple);
      cursor: pointer;
  }

  @media (max-width: 470px) {
    .all_reviews {
        padding: 0 10px 2rem 10px;
    }
  }