:root {
  /* colors */
  --clr-red: hsl(2, 70%, 48%);
  --clr-yellow: hsl(47, 81%, 56%);
  --clr-green: hsl(138, 76%, 31%);
  --clr-black: hsl(0, 0%, 0%);
  --clr-white: hsl(0, 0%, 96%);
  --clr-teal: hsl(187, 97%, 29%);
  --clr-teal-hover: hsl(187, 97%, 24%);

  /* font families */
  --ff-base: "Crimson Text", serif;
  --ff-accent: "Unica One", sans-serif;

  /* font weights */
  --fw-regular: 400;
  --fw-bold: 600;
  --fw-black: 700;

  /* font sizes */
  --fs-300: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --fs-400: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
  --fs-500: clamp(1.5rem, 1.45rem + 0.25vw, 1.75rem);
  --fs-600: clamp(1.75rem, 1.7rem + 0.25vw, 2rem);
  --fs-700: clamp(2rem, 1.95rem + 0.25vw, 2.25rem);
}

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

body {
  --body: var(--clr-black);
  --heading: var(--clr-black);
  --bg: var(--clr-white);
  --button-text: var(--clr-white);
  --button-bg: var(--clr-teal);
  --button-text-hover: var(--clr-white);
  --button-bg-hover: var(--clr-teal-hover);

  min-height: 100vh;

  background: var(--bg);
  color: var(--body);

  line-height: 1.5;
  font-family: var(--ff-base);
  font-size: var(--fs-300);

  /* Improve text rendering on macOS*/
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  font-family: var(--ff-accent);
}
/* button */
button {
  background: var(--button-bg);
  color: var(--button-text);
  border: 0;
  border-radius: 3px;
  padding: 1ex 2ex;
}

button:hover,
button:focus {
  background: var(--button-bg-hover);
  color: var(--button-text-hover);
}

/* links */
a:link,
a:visited {
  color: var(--clr-teal);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--clr-teal-hover);
  text-decoration: underline;
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0.5rem 1rem;
  font-family: var(--ff-accent);
}

h1 {
  font-size: var(--fs-700);
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0;

  a {
    border-radius: 3px;
    padding: 0.5rem 1rem;
  }

  a.login {
    border: 2px solid var(--clr-teal);
  }

  a.sign-up {
    background-color: var(--clr-teal);
    color: var(--clr-white);
    border: 2px solid var(--clr-teal);
  }
}

@media screen and (max-width: 470px) {
  header {
    flex-direction: column;
  }
}

/* DROPDOWN MENU */
.user-button {
  padding: 0;
  border-radius: 100vw;
  aspect-ratio: 1;
  border: none;
  anchor-name: --user-button;
  --button-bg: transparent;
  --button-text: var(--clr-teal);
}

.user-button:hover,
.user-button:focus {
  --button-text-hover: var(--clr-teal-hover);
  --button-bg-hover: transparent;
}

.fa-circle-user {
  vertical-align: middle;
  font-size: var(--fs-700);
}

.profile-menu {
  position: absolute;
  position-anchor: --user-button;
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);

  margin-block-start: 6px;
  padding: 0;
  border: 1px solid var(--clr-teal);
  border-radius: 3px;
  box-shadow: 1px 0 12px 1px rgba(0, 0, 0, 0.4);

  background-color: var(--clr-white);
  color: var(--clr-black);
}

.profile-menu:popover-open {
  display: grid;
}

.profile-menu > * {
  padding: 0.75rem 1rem;
}

.account-info > strong {
  font-weight: var(--fw-bold);
  font-size: var(--fs-400);
  text-transform: capitalize;
}

.profile-menu > a:hover {
  background-color: var(--clr-teal);
  color: var(--clr-white);
}

#logout:hover {
  background-color: var(--clr-red);
}

/* FORM */
.form-container {
  border: 1px solid var(--clr-black);
  border-radius: 1em;
  max-width: 35ch;
  padding: 1em;
  margin: 2rem auto;
}

form {
  --clr-success: var(--clr-green);
  --clr-warning: var(--clr-yellow);
  --clr-error: var(--clr-red);

  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-container:focus-within {
  box-shadow: 0 0 1rem var(--clr-teal);
}

.errors_list {
  list-style: none;
  color: var(--clr-red);
}

.form-group {
  display: grid;
  gap: 0.5cap;
}

legend {
  font-size: var(--fs-400);
  font-family: var(--ff-accent);
  text-align: center;
}
label {
  text-transform: uppercase;
  font-size: var(--fs-300);
}

input {
  outline: 3px solid var(--clr-teal);
  border-radius: 4px;
  border: none;
  padding: 1ex 2ex;
}

input:not(:placeholder-shown):valid {
  outline-color: var(--clr-success);
}

input:not(:placeholder-shown):invalid {
  outline-color: var(--clr-error);
}

input:focus:invalid {
  outline-color: var(--clr-warning);
}

.form-container.message {
  max-width: calc(100% - 2rem);
  min-width: 35ch;
}

textarea {
  width: 100%;
  aspect-ratio: 1;
  max-height: 200px;
}

/* POSTS */
.posts-container {
  max-width: calc(100% - 4rem);
  margin: 2rem auto;
}

.posts_list,
.user_info {
  list-style: none;
}

.posts_list {
  display: grid;
  gap: 1rem;
}

.post {
  position: relative;
  border: 1px solid var(--clr-teal);
  border-radius: 3px;
  box-shadow: 0px 0px 8px 0px hsl(0 0 0 / 0.3);
  max-width: 100%;
  padding: 1rem;
  font-size: var(--fs-400);

  .user {
    font-family: var(--ff-accent);
  }
  .name {
    font-weight: var(--fw-bold);
    letter-spacing: 1px;
  }
  .message {
    overflow-wrap: anywhere;
    font-size: var(--fs-500);
  }

  .user.username,
  .timestamp {
    font-size: var(--fs-300);
  }
}

form.delete_post {
  --clr-delete: hsl(2, 71%, 32%);
  --clr-delete-hover: hsl(2, 71%, 56%);
  margin: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}

.delete_btn {
  background: none;
  max-width: fit-content;
  color: var(--clr-delete);
}

.delete_btn:hover,
.delete_btn:active,
.delete_btn:focus {
  background: none;
  color: var(--clr-delete-hover);
}

/* LOGIN FIRST MESSAGE */
.login_first {
  background-color: var(--clr-teal);
  text-align: center;
  padding: 1rem;
  margin: 2rem auto;
  border-radius: 3px;
  max-width: calc(100% - 4rem);
  color: var(--clr-white);

  a {
    color: var(--clr-white);
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    letter-spacing: 1px;
    text-decoration: underline;
  }
}

.banner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: calc(100% - 2rem);
  margin: 2rem auto;
}

.form_desc {
  padding: 1rem;
  text-align: center;
  align-content: center;
  font-size: var(--fs-400);

  h2 {
    font-size: var(--fs-600);
  }
}

@media screen and (max-width: 570px) {
  .banner {
    grid-template-columns: 1fr;
  }
}