@import url(utilities.css);
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  --clr-red: hsl(1, 90%, 64%);
  --clr-blue: hsl(219, 85%, 26%);

  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-200: hsl(210, 60%, 98%);
  --clr-neutral-300: hsl(211, 68%, 94%);
  --clr-neutral-400: hsl(205, 33%, 90%);
  --clr-neutral-500: hsl(219, 14%, 63%);
  --clr-neutral-600: hsl(219, 12%, 42%);
  --clr-neutral-700: hsl(224, 21%, 14%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
  width: 100%;
}
body {
  display: flex;
  place-items: center;
  place-content: center;
  min-height: 100vh;
  background-color: var(--clr-neutral-200);
  color: var(--clr-neutral-600);
  font-family: "Plus Jakarta Sans", serif;
  font-size: 0.938rem;
}
.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 600px;
  background-color: var(--clr-neutral-100);
  padding: 20px;
}
.notifications-header {
  display: flex;
  place-items: center;
  gap: 0.5rem;
}
.notifications-header .notifications-number {
  padding: 2px 8px;
  font-weight: 700;
  border-radius: 25%;
}

.notifications-header p {
  color: var(--clr-blue);
  margin-left: auto;
}
.notifications {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.notifications-notification {
  display: flex;
  gap: 0.5rem;
  place-items: center;
  padding: 5px;
  border-radius: 8px;

  img {
    width: 40px;
    height: 40px;
  }
}

.notifications-notification__unread {
  background-color: var(--clr-neutral-200);
}
.notifications-content {
  width: auto;
  margin-right: auto;
}
.notifications-image__comment {
  border-radius: 4px;
  margin-left: auto;
}
.notifications-PM {
  margin-top: -10px;
  margin-left: 100px;
  padding: 5px 20px;
  border-radius: 4px;
  text-wrap: pretty;
  border: 1px solid var(--clr-neutral-400);
  margin-bottom: 15px;
}

@media only screen and (max-width: 425px) {
  .container {
    padding: 10px;
  }
  body {
    font-size: 0.825rem;
  }
  .notifications-header {
    font-size: 0.7rem;
  }
  .notifications-header .notifications-number {
    padding: 2px 8px;
    font-weight: 700;
    border-radius: 25%;
  }

  .notifications-header p {
    color: var(--clr-blue);
    margin-left: auto;
  }
  .notifications-PM {
    margin-left: 20px;
  }
}