html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;

  //   flex-grow: 1;
  //   display: flex;
  //   justify-content: center;
  //width: 100%;
  //position: relative;
  background-color: var(--main-bg);
  color: var(--main-color);
  box-shadow: 0 0 6px 0 var(--main-shadow-color);
}

* {
  box-sizing: border-box;
}

:root {
  --color-black: #272e3c; // hsl(115, 31%, 21%);
  --color-primary: #9600ff; //hsl(44, 100%, 60%);
  --header-bg-color: #272e3c; //hsl(115, 31%, 20%);
  --transition-slow: 500ms;
  --transition-fast: 150ms;
  --transition-instant: 0ms;
  --font-heading: "Fira Sans", sans-serif;
  --font-body: var(--font-heading);
  // --font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
  //   Consolas, "Liberation Mono", "Courier New", monospace;
  --main-color: #272e3c;
  //--main-color-light: #858585;
  --main-shadow-color: var(--color-black);
  --main-bg: #f2f2f2; //#f9f7ec;
  --main-bg-dark: #edebdd;
  --gray-border: #d5d3cb;
  --space-4xs: clamp(0.13rem, calc(0.13rem + 0vw), 0.13rem);
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
  --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
  --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
  --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
  --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
  --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
  --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
  --space-2xl: clamp(3.5rem, calc(3.11rem + 1.95vw), 4.5rem);
  --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
  --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
  --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
  --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
  --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
  --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
  --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
  --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
  --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.5rem);
  --space-2xl-3xl: clamp(3.5rem, calc(2.23rem + 6.34vw), 6.75rem);
  --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
}

.post-list-header {
  background-color: var(--header-bg-color);
}

.post-list-header h1 {
  margin: 0 0 var(--space-m);
  padding: var(--space-m) 0;
  font-size: var(--space-m-l);
  text-align: center;
  color: #fff;
  text-shadow: 1px 3px 2px var(--color-black);
}

form {
  --input-padding: 8px;
  --input-padding-left: 16px;
  --submit-button-padding-left: 12px;
  --submit-button-padding-right: 16px;

  font-size: var(--space-s);

  --border-radius: 5000px;
  --submit-icon-size: 1em;
  --submit-button-padding-left: var(--space-2xs);
  --submit-button-padding-right: var(--space-xs);
  --submit-button-width: calc(
    var(--submit-button-padding-left) + var(--submit-icon-size) +
      var(--submit-button-padding-right)
  );
  --input-padding: var(--space-3xs);
  --input-padding-left: var(--space-xs);
  --input-padding-right: calc(
    var(--submit-button-width) + var(--input-padding)
  );

  position: relative;
  font-size: calc(var(--space-s) * 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 640px;
}

.new-post-form {
  border-bottom: 1px solid var(--gray-border);
  padding-bottom: var(--space-l);
  margin: auto;
}

input,
textarea {
  --input-padding: 8px;
  --input-padding-left: 16px;
  --submit-button-padding-left: 12px;
  --submit-button-padding-right: 16px;
  --search-form-focus-shadow: 0 0 0 var(--space-3xs) var(--color-primary);
  --border-radius: 6px;

  border: 0;
  color: #000;
  width: 100%;
  padding: var(--input-padding) var(--input-padding-right) var(--input-padding)
    var(--input-padding-left);
  border-radius: var(--border-radius);
  box-shadow: 1px 1px 1px 0 var(--color-black);
  transition: box-shadow var(--transition-fast);

  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button {
  --text-color: #ffffff; //#383838;
  --disabled-text-color: #989cad; //#858585;
  --bg-color-left: #ff00a0; // #fede9e;
  --bg-color-right: #9600ff; // #fdc452;
  // --bg-color-top-light: #fee7b7;
  // --bg-color-bottom-light: #fdcd6b;
  // --bg-color-top-dark: #fed585;
  // --bg-color-bottom-dark: #fdbb39;

  color: var(--text-color);
  padding: var(--space-xs) var(--space-m-l);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  outline: 0;
  border-radius: 5000px;
  // background: linear-gradient(
  //   to right,
  //   var(--bg-color-left) 0%,
  //   var(--bg-color-right) 100%
  // );
  cursor: pointer;

  transform: scale(var(--generate-button-scale, 1)) translateZ(0);
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
  background: linear-gradient(-60deg, #8700ff, #ff009e);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

button:hover {
  transform: scale(1.1);
  color: var(--text-color);
  --generate-button-shadow-inset: rgba(255, 255, 255, 0.7);
  background: linear-gradient(-60deg, #8700ff, #ff009e);
  box-shadow: 0 0 10px rgba(255, 0, 158, 0.5), 0 1px 3px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(150, 0, 255, 0.3),
    inset 0 1px 1px
      var(--generate-button-shadow-inset, rgba(255, 255, 255, 0.04));
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.post-list {
  margin-top: 42px;
  margin-left: 40px;
  margin-right: 40px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.post-list > li {
  background: white;
  width: 320px;
}

.post-list > li > a {
  display: block;
  //padding: 16px;
  //text-decoration: none;
  //color: #525252;

  --shadow: 0 2px 3px hsla(51, 50%, 44%, 0.35);
  //   display: flex;
  //   flex-direction: column;
  //align-items: center;
  width: 100%;
  //height: 160px;
  //height: var(--space-2xl);
  padding: var(--space-s);
  background-color: #fff;
  color: #525252;
  text-decoration: none;
  border-radius: var(--space-3xs);
  box-shadow: var(--shadow);
  transition: background-color var(--transition-slow);
}

.post-list > li > a:hover {
  color: #525252;
  background-color: #9600ff11;
  //background-color: hsl(58deg 72% 97%);
  transition: background-color var(--transition-instant);
}

.post-list h2 {
  margin: 0;
  padding: 0;
}

.post-list-footer {
  font-size: 0.8em;
  color: #858585;
}

.post-details-header {
  padding: var(--space-s) var(--space-m);
  margin: 22px;
  background-color: #9600ff11;
  margin-bottom: var(--space-s);
  border-radius: 5px;
}

.post-details-header-infos,
.comment-infos {
  font-size: 0.8em;
  color: #858585;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-section {
  margin-left: 22px;
  margin-top: 12px;
}

.submit-comment-button {
  align-self: flex-start;
}

.sign-up-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  margin: auto;
}

.email-input,
.password-input {
  margin-top: 20px;
}

.sign-in-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  margin: auto;
}

.sign-out-form {
  display: none;
}

.main-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  background-color: var(--main-bg);
  height: 64px;
  border-bottom: 1px solid var(--gray-border);
}

.main-navbar a {
  text-decoration: none;
  color: var(--text-color);
}

.main-navbar a:hover {
  color: #9600ff !important;
}

.sign-up-link {
  color: #ff00a0 !important;
}

.anonymous-navbar-list {
  display: flex;
  gap: 16px;
}

.authenticated-navbar-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.username {
  color: #989cad;
}

.avatar {
  width: 32px;
  margin-right: 16px;
}