@import url("https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Gaegu&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --text-color: #071952;
  --dark-purple: var(--pink);
  --dark-pink: var(--primary-color);
  --dark-purple-red: var(--secondary-color);
  --bg-color: #fbfbfb;
  --bg-color-secondary: rgb(247, 214, 208);
  --primary-color: rgb(218, 82, 141);
  --secondary-color: rgb(166, 28, 95);
  --pink: rgb(255, 199, 209);
  --primary-font: "Poppins", sans-serif;
  --secondary-font: "Gaegu", sans-serif;
  --heading-font: "Bungee Shade", sans-serif;
  --font-size: 1rem;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 1.5rem;
  --mobile-font-size: 0.75rem;
  --mobile-font-size-h1: 2rem;
  --mobile-font-size-h2: 1.75rem;
  --mobile-font-size-h3: 1.25rem;
  --mobile-font-size-h4: 1rem;
  --mobile-font-size-small: 0.5rem;
  --mobile-font-size-medium: 1.25rem;
}

body {
  font-family: var(--primary-font);
}
body h1,
body h2,
body h3,
body h4 {
  font-family: var(--primary-font);
  margin-top: 0;
  line-height: 120%;
  font-weight: 400;
}
body h1 {
  font-size: var(--font-size-h1);
}
@media (max-width: 767px) {
  body h1 {
    font-size: var(--mobile-font-size-h1);
  }
}
body p {
  font-size: var(--font-size-medium);
}
@media (max-width: 767px) {
  body p {
    font-size: var(--mobile-font-size-medium);
  }
}
body a {
  color: inherit;
}

form {
  margin-bottom: 1rem;
}
form label {
  font-size: var(--font-size);
}
@media (min-width: 768px) {
  form label {
    font-size: var(--font-size);
  }
}
form .input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  form .input-wrapper {
    flex-direction: row;
  }
}
form .input-wrapper input,
form .input-wrapper button {
  padding: 1rem 2rem;
  border: 0;
  border-radius: 999px;
  font-size: var(--font-size-h4);
}
form .input-wrapper input:not(.btn) {
  border: 3px solid var(--dark-pink);
}
@media (min-width: 768px) {
  form .input-wrapper input:not(.btn) {
    width: 90%;
  }
}
form .input-wrapper .btn {
  width: 200px;
  color: var(--text-color);
  background-color: var(--dark-pink);
  cursor: pointer;
  color: var(--bg-color);
  transition: all 0.3s ease-in-out;
}
form .input-wrapper .btn:hover {
  background-color: var(--dark-purple-red);
}

body {
  margin-top: 100px;
  background: rgb(254, 232, 228);
  background: linear-gradient(90deg, rgb(254, 232, 228) 17%, rgb(255, 199, 209) 50%, rgb(237, 122, 172) 100%);
}

footer {
  font-size: var(--font-size);
  margin-top: 1rem;
}
@media (min-width: 768px) {
  footer.container {
    padding: 1rem 4rem;
  }
}

.container {
  max-width: 800px;
  position: relative;
  margin: 0 auto;
  margin-bottom: 2rem;
  padding: 4rem;
  border-radius: 12px;
  background-color: var(--bg-color);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
@media (max-width: 767px) {
  .container {
    padding: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.app-header {
  position: relative;
  z-index: 0;
}

/*** Highlighter effect
** credit: https://max.hn/thoughts/how-to-create-a-highlighter-marker-effect-in-css
***/
.highlight {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(to right, rgb(197, 186, 255), rgba(204, 72, 121, 0.5), rgba(232, 249, 255, 0.3));
}

.highlight-small {
  margin: 0 -0.1em;
  padding: 0.1em 0.3em;
  border-radius: 0.5em 0.3em 0.3em 0.4em;
  background: transparent;
  background-image: linear-gradient(to right, rgba(251, 96, 144, 0.3), rgba(255, 199, 209, 0.3), rgba(145, 207, 230, 0.545));
}
@media (max-width: 767px) {
  .highlight-small {
    background-image: none;
  }
}

.poem-content {
  border-radius: 0;
  border-left: 3px solid var(--dark-pink);
}

.hidden {
  display: none;
}

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.7;
  }
}

/*# sourceMappingURL=styles.css.map */