@font-face {
  font-family: handwriting;
  src: url("d65011811318cf4e-s.p.44d63d5a.ttf");
}

@font-face {
  font-family: handwriting-1;
  src: url("5d1da943bd8329eb-s.p.bbc2b449.ttf");
}

@font-face {
  font-family: handwriting-2;
  src: url("1d259d87df01aa93-s.p.5d1780fe.ttf");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.parent {
  background-color: #d4c1a3;
  background-image: url("writing-3.6e0bdaf5.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}

.error-div {
  color: 1;
  background: linear-gradient(#000000c7, #c00707a2);
  border: 1px solid red;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: handwriting-1;
  display: flex;
}

.error-div > h1 {
  color: #000;
  font-size: 40px;
}

.log-in-page-container {
  height: 100vh;
  display: flex;
}

.banner {
  object-fit: contain;
  flex: 1.1;
  height: 100%;
  position: relative;
}

.banner-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.banner-btns {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
}

.log-sign-btn {
  color: #262135;
  background-color: #f99172;
  border: 1px solid #000;
  border-radius: 100px 0 0 100px;
  outline: none;
  width: 30%;
  margin: 0;
  padding: 1em;
  font-size: clamp(1.125rem, .5161rem + 1.2685vw, 2.625rem);
  transition: all .2s;
}

.active {
  color: #fff;
  background-color: #000;
  width: calc(30% + 30px);
}

.log-sign-btn:hover {
  width: calc(30% + 30px);
}

.log-in-container {
  background-color: #000;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
}

.logo-div {
  position: absolute;
  top: 2%;
  left: 4%;
}

.logo {
  width: clamp(3.125rem, 2.0823rem + 5.2137vw, 10.75rem);
}

.sign-up-form {
  flex-direction: column;
  gap: .4em;
  width: 53%;
  font-family: handwriting;
  font-size: clamp(1rem, .6239rem + 1.8803vw, 3.75rem);
  display: flex;
}

.sign-up-form > h2, p {
  text-wrap: balance;
  text-align: center;
}

.sign-up-form > h2 {
  color: #fff;
  font-weight: 700;
}

.sign-up-form > p {
  color: #7a7979;
  font-size: clamp(1.375rem, .9437rem + .8985vw, 2.4375rem);
}

.sign-up-form label {
  color: #fff;
  margin-top: .1em;
  font-weight: 700;
}

.sign-up-form input {
  color: #fff;
  background-color: #0000;
  border: 2px solid #d6d6d6;
  border-radius: 4px;
  outline: none;
  padding: .4em 1em;
  font-size: clamp(1rem, .1374rem + 1.797vw, 3.125rem);
  transition: all .2s;
}

.sign-up-form > input:hover {
  box-shadow: 0 0 10px 1px #c5b03b;
}

.sign-up-form > input:focus {
  animation: .7s linear infinite alternate pulse;
}

input::placeholder {
  color: #b6b3b3;
  font-family: handwriting-1;
}

.create-now {
  color: #c9c8c8;
  background: none;
  border: none;
  outline: #ffdead;
  margin: 20px 0 0;
  padding: 0;
  text-decoration: underline;
}

.sign-btn {
  color: #000;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  padding: .4em 1em;
  font-size: clamp(1rem, .1374rem + 1.797vw, 3.125rem);
  transition: scale .2s;
}

.sign-btn:active {
  scale: .99;
}

.sign-btn:hover {
  color: #000;
  background-color: #e9e6e6;
  border: 2px solid #fff;
  border-radius: 10px;
  padding: .4em 1em;
  font-size: clamp(1rem, .1374rem + 1.797vw, 3.125rem);
}

.show-on-small {
  color: #b6b3a2;
  margin: 20px auto;
  display: none;
}

header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .7em 2em 0;
  display: flex;
  position: fixed;
  top: 0;
}

.intro-logo {
  border-radius: 50%;
  width: clamp(2.5rem, 1.9359rem + 2.8205vw, 6.625rem);
}

.log-out-btn {
  color: #fff;
  background-color: #00000069;
  border: 1px solid #fff;
  height: max-content;
  padding: .2em .8em;
  font-size: clamp(1.25rem, 1.0791rem + .8547vw, 2.5rem);
  transition: all .2s;
}

.log-out-btn:hover {
  color: #000;
  background-color: #ffffffcf;
  border: 1px solid #000;
}

.idle-timer {
  color: #000;
  z-index: 100;
  font-size: clamp(1.75rem, 1.4423rem + 1.5385vw, 4rem);
  transition: color .2s;
  position: absolute;
  top: 2%;
  left: 50%;
  translate: -50%;
}

.writing-header {
  backdrop-filter: blur(5px);
  background-color: #f1efefb4;
  border-radius: 0 0 1em 1em;
  justify-content: space-between;
  margin-bottom: 1em;
  padding: .6em;
  font-family: handwriting-1;
  font-size: clamp(.8125rem, .5304rem + 1.4103vw, 2.875rem);
  display: flex;
  box-shadow: 0 0 10px 1px #000000da;
}

.writing-header > ul {
  color: #000;
  align-items: center;
  gap: .5em;
  list-style: none;
  display: flex;
}

.wotd-div {
  align-items: center;
  gap: .6em;
  display: flex;
}

a {
  text-decoration: none;
}

.text-area-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

textarea {
  color: #000;
  resize: none;
  letter-spacing: 1px;
  background-image: url("page.8401c542.avif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px;
  outline: none;
  width: 100%;
  height: 100%;
  padding: .4em .3em;
  font-family: handwriting;
  font-size: clamp(1.6875rem, 1.1918rem + 2.4786vw, 5.3125rem);
  line-height: 1.5rem;
  display: flex;
  box-shadow: 0 0 10px 1px #000000da;
}

.text-area-div {
  flex-direction: column;
  height: 100%;
  padding: 0 1em 1em;
  display: flex;
  position: relative;
}

.blur {
  z-index: 10;
  backdrop-filter: blur();
  pointer-events: none;
  transition: all 1s;
  position: absolute;
  inset: 0;
}

.progress {
  background-color: #000;
  height: 8px;
  transition: all 1s;
  position: absolute;
  bottom: 0;
  left: 0;
}

.copy-btn {
  letter-spacing: 2px;
  background-color: #dcdcdc;
  border: 1px solid gray;
  border-radius: 50px;
  outline: none;
  padding: .2em .8em;
  font-size: clamp(.75rem, .4936rem + 1.2821vw, 2.625rem);
  font-weight: 700;
  transition: all .2s;
  position: absolute;
  bottom: 3%;
  right: 2%;
}

.copy-btn:hover {
  color: #d8d8d8;
  background-color: #252525;
}

.copy-btn:active {
  scale: .9;
}

.start-btn {
  color: #eee;
  background-image: linear-gradient(to top right, #230200, #020202, #230200);
  border: none;
  border-radius: 1em;
  outline: none;
  margin-top: .7em;
  padding: .5em 1em;
  font-size: clamp(1rem, .7778rem + 1.1111vw, 2.625rem);
  transition: all .1s;
  box-shadow: 0 0 10px 2px #d5c1a6a9;
}

.start-btn:hover {
  scale: 1.04;
  box-shadow: 0 0 10px 2px #230200a1;
}

.start-btn:active {
  scale: .95;
}

.intro-div {
  color: #ebd4cb;
  text-shadow: 2px 2px #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: handwriting-1;
  display: flex;
  position: relative;
}

.intro-info-div {
  background-image: url("scribble-10.f6305e2f.png");
  background-position: 50% 25%;
  background-repeat: no-repeat;
  background-size: contain;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .7em;
  width: max-content;
  height: max-content;
  padding: 2em;
  font-size: clamp(1.1875rem, .8371rem + 1.7521vw, 3.75rem);
  display: flex;
  position: relative;
}

.marquee {
  text-shadow: 1px 1px #000;
  background-color: #000;
  gap: 1em;
  width: 100%;
  padding: .1em;
  font-size: clamp(1.375rem, .8964rem + 2.3932vw, 4.875rem);
  transition: all .4s;
  display: flex;
  position: absolute;
  bottom: 2%;
  overflow: hidden;
}

.marquee > span {
  color: wheat;
  white-space: nowrap;
  padding: 0 .3em;
  animation: 20s linear infinite scroll;
  display: inline-block;
}

.marquee:hover {
  background-color: wheat;
}

.marquee:hover > span {
  color: #000;
}

.timer-div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.timer-div > p {
  font-size: clamp(1.375rem, 1.1528rem + 1.1111vw, 3rem);
}

.timer-modal {
  position: relative;
}

.timer-modal > div {
  color: #cecaca;
  background-color: #000;
  border-radius: 10px;
  gap: .6em;
  width: max-content;
  padding: .2em .4em;
  font-size: clamp(.8125rem, .5219rem + 1.453vw, 2.9375rem);
  text-decoration: underline;
  display: flex;
  position: absolute;
  top: 0%;
  left: 50%;
  translate: -50% calc(-100% - 1em);
}

.timer-modal > div:before {
  content: "";
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: #000 repeating-linear-gradient(#0000 0% 50%, #000 50% 100%);
  width: 1em;
  height: 1em;
  position: absolute;
  top: 99%;
  left: 50%;
  translate: -50%;
}

.timer-modal > div > span {
  cursor: pointer;
}

.timer-modal > p {
  cursor: pointer;
  text-decoration: underline;
  transition: all .4s;
}

.timer-modal:hover > p {
  animation: 1s infinite hop;
}

button {
  cursor: pointer;
  padding: 6px 16px;
  font-family: handwriting-2;
}

@keyframes scroll {
  from {
    translate: 0;
  }

  to {
    translate: calc(-100% - 1em);
  }
}

@keyframes hop {
  0% {
    translate: 0;
  }

  50% {
    translate: 0 -10%;
  }

  100% {
    translate: 0;
  }
}

@keyframes pulse {
  from {
    box-shadow: 0 0 10px 1px #c5b03b;
  }

  to {
    box-shadow: 0 0 1px 1px #c5b03b;
  }
}

@media (width <= 768px) {
  .banner-btns {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  .log-sign-btn {
    color: #262135;
    background-color: #f99172;
    border: 1px solid #000;
    border-radius: 20px;
    outline: none;
    width: 70%;
    margin: 0;
    padding: 1em;
    font-size: 20px;
    transition: all .2s;
  }

  .active {
    color: #fff;
    background-color: #000;
  }

  .log-sign-btn:hover {
    color: #fff;
    background-color: #000;
    width: 70%;
  }

  .idle-timer {
    display: none;
  }
}

@media (width <= 425px) {
  .banner {
    width: 100%;
  }

  .banner-btns {
    display: none;
  }

  .log-in-container {
    background-color: #000000f3;
    border-radius: 1em;
    width: 90%;
    height: auto;
    min-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  .sign-up-form {
    width: 75%;
  }

  .show-on-small {
    display: flex;
  }
}
/*# sourceMappingURL=index.3a01df49.css.map */