@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap");


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background:
    #0b0910;

  color:
    #f1ebef;

  font-family:
    Inter,
    Arial,
    sans-serif;

  line-height: 1.7;
}


.background {
  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 20%,
      #5d354d33,
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 60%,
      #8a607433,
      transparent 35%
    );
}


/* HEADER */

header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    25px 7%;

  border-bottom:
    1px solid #ffffff12;
}


.back {
  color:
    #d8b8c8;

  text-decoration: none;

  font-size: 12px;

  transition:
    0.25s;
}


.back:hover {
  color: white;
}


.title-small {
  font-size: 10px;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color:
    #8f7a85;
}


/* MAIN */

main {
  max-width: 950px;

  margin: auto;

  padding:
    0 6%;
}


/* HERO */

.hero {
  padding:
    110px 0
    90px;
}


.eyebrow {
  font-size: 10px;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color:
    #bd91a6;

  margin:
    0 0 15px;
}


.hero h1,
.question-content h2,
.history h2,
.success h2 {
  font-family:
    "Cormorant Garamond",
    serif;

  font-weight: 500;

  line-height: 0.95;

  letter-spacing:
    -0.02em;
}


.hero h1 {
  font-size:
    clamp(
      4rem,
      11vw,
      7rem
    );

  margin: 0;
}


.subtitle {
  max-width: 480px;

  color:
    #aaa1a8;

  font-size: 15px;

  margin-top: 28px;
}


/* QUESTION CARD */

.question-card {
  display: grid;

  grid-template-columns:
    80px 1fr;

  gap: 30px;

  padding:
    55px 0;

  border-top:
    1px solid #ffffff14;
}


.number {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 32px;

  color:
    #7f5c6d;
}


.question-content h2 {
  font-size:
    clamp(
      2.3rem,
      6vw,
      4rem
    );

  margin:
    5px 0
    10px;
}


.question-content > p {
  color:
    #9e969d;

  max-width: 600px;

  font-size: 14px;
}


/* EMOTION OPTIONS */

.mood-options {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 12px;

  margin-top: 30px;
}


.mood-options label {
  min-height: 130px;

  padding: 15px 8px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-align: center;

  cursor: pointer;

  border:
    1px solid #ffffff18;

  border-radius: 18px;

  background:
    #ffffff05;

  transition:
    0.25s;
}


.mood-options input {
  display: none;
}


.mood-options span {
  font-size: 30px;
}


.mood-options small {
  color:
    #a9a0a7;

  font-size: 10px;
}


.mood-options label:has(input:checked) {
  border-color:
    #d5a7bc;

  background:
    #d5a7bc18;

  transform:
    translateY(-4px);
}


/* RANGE */

.scale {
  margin-top: 35px;

  max-width: 650px;
}


.scale-labels {
  display: flex;

  justify-content: space-between;

  color:
    #9e8b95;

  font-size: 10px;

  margin-bottom: 15px;
}


input[type="range"] {
  width: 100%;

  accent-color:
    #d3a0b8;

  cursor: pointer;
}


.range-value {
  margin-top: 15px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 45px;

  color:
    #e2bdcf;
}


/* PHYSICAL CHOICES */

.choice-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;

  margin-top: 30px;
}


.choice {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 20px;

  border:
    1px solid #ffffff17;

  border-radius: 16px;

  cursor: pointer;

  background:
    #ffffff04;

  transition:
    0.25s;
}


.choice input {
  display: none;
}


.choice > span {
  font-size: 28px;
}


.choice strong {
  display: block;

  font-size: 13px;

  font-weight: 500;
}


.choice small {
  color:
    #918890;

  font-size: 10px;
}


.choice:has(input:checked) {
  border-color:
    #d5a7bc;

  background:
    #d5a7bc15;
}


/* DAY OPTIONS */

.day-options {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;

  margin-top: 30px;
}


.day-options label {
  min-height: 150px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  border:
    1px solid #ffffff17;

  border-radius: 18px;

  cursor: pointer;

  background:
    #ffffff04;

  transition:
    0.25s;
}


.day-options input {
  display: none;
}


.day-options span {
  font-size: 35px;
}


.day-options strong {
  font-size: 11px;

  font-weight: 400;

  color:
    #b7adb4;
}


.day-options label:has(input:checked) {
  border-color:
    #d5a7bc;

  transform:
    translateY(-4px);
}


/* MISS ME */

.special {
  border-radius: 25px;

  padding:
    60px 40px;

  margin:
    40px 0;

  background:
    radial-gradient(
      circle at top right,
      #8b526b30,
      transparent 45%
    ),
    #ffffff04;
}


.miss-options {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


.miss-options input {
  display: none;
}


.miss-options span {
  display: block;

  padding:
    13px 18px;

  border:
    1px solid #ffffff22;

  border-radius: 100px;

  cursor: pointer;

  color:
    #bdb3ba;

  font-size: 12px;

  transition:
    0.25s;
}


.miss-options label:has(input:checked) span {
  background:
    #d5a7bc;

  color:
    #22141b;

  border-color:
    #d5a7bc;
}


/* TEXTAREAS */

textarea {
  width: 100%;

  min-height: 150px;

  margin-top: 25px;

  padding: 20px;

  resize: vertical;

  border:
    1px solid #ffffff1c;

  border-radius: 16px;

  outline: none;

  background:
    #ffffff05;

  color:
    white;

  font-family:
    Inter,
    sans-serif;

  font-size: 13px;

  line-height: 1.7;

  transition:
    0.25s;
}


textarea:focus {
  border-color:
    #c98fa9;

  background:
    #ffffff08;
}


textarea::placeholder {
  color:
    #6f6870;
}


/* SUBMIT */

.submit-section {
  text-align: center;

  padding:
    80px 0;
}


.submit-section p {
  color:
    #938991;

  font-size: 13px;
}


.submit-section button,
.success button {
  margin-top: 15px;

  padding:
    15px 28px;

  border: 0;

  border-radius: 100px;

  background:
    #d5a7bc;

  color:
    #24151d;

  font-family:
    Inter,
    sans-serif;

  font-size: 12px;

  cursor: pointer;

  transition:
    0.25s;
}


.submit-section button:hover,
.success button:hover {
  transform:
    translateY(-3px);
}


/* SUCCESS */

.success {
  text-align: center;

  padding:
    100px 20px;

  border-top:
    1px solid #ffffff16;
}


.success-heart {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 100px;

  color:
    #d8a8be;
}


.success h2 {
  font-size: 50px;

  margin: 10px 0;
}


.success p {
  color:
    #9c9299;
}


.hidden {
  display: none;
}


/* HISTORY */

.history {
  padding:
    100px 0;

  border-top:
    1px solid #ffffff16;
}


.history h2 {
  font-size: 48px;

  margin-top: 0;
}


.history-item {
  padding:
    25px;

  margin-top: 15px;

  border:
    1px solid #ffffff16;

  border-radius: 18px;

  background:
    #ffffff04;
}


.history-date {
  font-size: 10px;

  color:
    #c393aa;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.history-summary {
  margin-top: 10px;

  color:
    #b7adb4;

  font-size: 13px;
}


.empty {
  color:
    #716a71;

  font-size: 13px;
}


/* FOOTER */

footer {
  text-align: center;

  padding:
    50px 20px;

  border-top:
    1px solid #ffffff12;

  color:
    #796f76;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 20px;
}


/* MOBILE */

@media (max-width: 700px) {

  header {
    padding:
      20px 6%;
  }


  .title-small {
    display: none;
  }


  main {
    padding:
      0 6%;
  }


  .hero {
    padding:
      80px 0
      60px;
  }


  .question-card {
    grid-template-columns:
      1fr;

    gap: 5px;

    padding:
      45px 0;
  }


  .number {
    font-size: 22px;
  }


  .mood-options {
    grid-template-columns:
      repeat(5, 1fr);

    gap: 6px;
  }


  .mood-options label {
    min-height: 105px;

    padding: 8px 3px;
  }


  .mood-options span {
    font-size: 23px;
  }


  .mood-options small {
    font-size: 8px;
  }


  .choice-grid {
    grid-template-columns:
      1fr;
  }


  .day-options {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .special {
    padding:
      40px 20px;
  }


  .success h2 {
    font-size: 40px;
  }

}