@import url("https://fonts.googleapis.com/css2?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");
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100dvw;
  height: 100dvh;
}
img, picture, video, canvas, svg {
  max-width: 100%;
}
img, button, textarea, select {
  font: inherit;
}
:root {
  --patchwork-internal-space-xsmall: 0.25rem;
  --patchwork-internal-space-small: 0.5rem;
  --patchwork-internal-space-medium: 1rem;
  --patchwork-internal-space-large: 1.25rem;
  --patchwork-internal-space-xlarge: 1.5rem;
  --patchwork-internal-space-huge: 2rem;
  --patchwork-internal-font-xsmall: 1rem;
  --patchwork-internal-font-small: 1.13rem;
  --patchwork-internal-font-medium: 1.3rem;
  --patchwork-internal-font-large: 1.625rem;
  --patchwork-internal-font-xlarge: 2rem;
  --patchwork-internal-font-huge: 4rem;
}
@media (max-width: 620px) {
  :root {
    --patchwork-internal-space-xsmall: 0.2083333333rem;
    --patchwork-internal-space-small: 0.4166666667rem;
    --patchwork-internal-space-medium: 0.8333333333rem;
    --patchwork-internal-space-large: 1.0416666667rem;
    --patchwork-internal-space-xlarge: 1.25rem;
    --patchwork-internal-space-huge: 1.6666666667rem;
    --patchwork-internal-font-xsmall: 0.8333333333rem;
    --patchwork-internal-font-small: 0.9416666667rem;
    --patchwork-internal-font-medium: 1.0833333333rem;
    --patchwork-internal-font-large: 1.3541666667rem;
    --patchwork-internal-font-xlarge: 1.6666666667rem;
    --patchwork-internal-font-huge: 3.3333333333rem;
  }
}
body {
  background-color: #FCF1EC;
  font-family: "Poppins";
}
body {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
div.wrap {
  background-color: white;
  border-radius: var(--patchwork-internal-space-large);
  padding: var(--patchwork-internal-space-large);
  display: grid;
  grid-template-areas: "head" "cnt" "foot";
  position: relative;
  width: 50ch;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  overflow: auto;
  grid-template-rows: auto min-content auto;
}
@media (width < 600px) or (height < 600px) {
  div.wrap {
    height: 100%;
    width: 100%;
  }
  div.wrap > header {
    align-self: end;
  }
  div.wrap > footer {
    align-self: start;
  }
}
@media ((width < 600px) or (height < 600px)) and (orientation: landscape) {
  div.wrap {
    height: 100%;
    width: 100%;
    align-items: stretch;
    justify-content: stretch;
    justify-items: center;
    grid-template-areas: "head cnt" "foot cnt";
    grid-template-rows: 1fr 1fr;
  }
  div.wrap > header {
    align-self: center;
  }
  div.wrap > footer {
    align-self: center;
  }
}
div.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@keyframes nearback-animation {
  0% {
    transform: translate(-50%, -50%) scale(1.2) rotate(-5deg);
  }
  10% {
    transform: translate(-51%, -53%) scale(1.25) rotate(-41deg);
  }
  20% {
    transform: translate(-49%, -51%) scale(1.3) rotate(-77deg);
  }
  30% {
    transform: translate(-51%, -48%) scale(1.35) rotate(-113deg);
  }
  40% {
    transform: translate(-52%, -51%) scale(1.4) rotate(-149deg);
  }
  50% {
    transform: translate(-51%, -52%) scale(1.45) rotate(-185deg);
  }
  60% {
    transform: translate(-49%, -47%) scale(1.4) rotate(-221deg);
  }
  70% {
    transform: translate(-51%, -49%) scale(1.35) rotate(-257deg);
  }
  80% {
    transform: translate(-50%, -51%) scale(1.3) rotate(-293deg);
  }
  90% {
    transform: translate(-52%, -49%) scale(1.25) rotate(-329deg);
  }
  100% {
    transform: translate(-51%, -48%) scale(1.22) rotate(-365deg);
  }
}
@keyframes farback-animation {
  0% {
    transform: translate(-50%, -50%) scale(2) rotate(5deg);
  }
  10% {
    transform: translate(-52%, -49%) scale(1.95) rotate(41deg);
  }
  20% {
    transform: translate(-51%, -50%) scale(1.9) rotate(77deg);
  }
  30% {
    transform: translate(-49%, -51%) scale(1.85) rotate(113deg);
  }
  40% {
    transform: translate(-47%, -48%) scale(1.8) rotate(149deg);
  }
  50% {
    transform: translate(-49%, -51%) scale(1.75) rotate(185deg);
  }
  60% {
    transform: translate(-48%, -52%) scale(1.8) rotate(221deg);
  }
  70% {
    transform: translate(-50%, -49%) scale(1.85) rotate(257deg);
  }
  80% {
    transform: translate(-51%, -47%) scale(1.9) rotate(293deg);
  }
  90% {
    transform: translate(-52%, -48%) scale(1.95) rotate(329deg);
  }
  100% {
    transform: translate(-51%, -50%) scale(1.98) rotate(365deg);
  }
}
div.bg::before {
  content: "";
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%) scale(2) rotate(5deg);
  transform-origin: center center;
  background-color: hsl(from #FCF1EC h calc(s + 10) calc(l - 30));
  z-index: -1;
  border-radius: var(--patchwork-internal-space-large);
  height: min(50vw, 50vh);
  width: min(50vw, 50vh);
  max-height: min(50vw, 50vh);
  max-width: min(50vw, 50vh);
  animation: farback-animation 360s linear forwards infinite;
}
div.bg::after {
  content: "";
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%) scale(1.5) rotate(-5deg);
  transform-origin: center center;
  z-index: -1;
  background-color: #FCF1EC;
  z-index: -1;
  border-radius: var(--patchwork-internal-space-large);
  height: min(50vw, 50vh);
  width: min(50vw, 50vh);
  max-height: min(50vw, 50vh);
  max-width: min(50vw, 50vh);
  animation: nearback-animation 360s linear forwards infinite;
}
div.wrap > header {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: end;
  margin-block-end: calc(var(--patchwork-internal-space-huge));
  height: fit-content;
  max-height: 100%;
}
div.wrap > header > h1 {
  font-size: calc(var(--patchwork-internal-font-huge) * 0.7);
}
div.wrap > header > img {
  height: calc(2 * var(--patchwork-internal-font-huge));
  max-height: calc(2 * var(--patchwork-internal-font-huge));
  object-fit: contain;
}
div.wrap > main {
  grid-area: cnt;
  margin-block-end: calc(var(--patchwork-internal-space-huge));
  display: flex;
  flex-direction: column;
  height: fit-content;
}
div.wrap > main > section > h2 {
  color: hsl(from #FCF1EC h calc(s + 10) calc(l - 30));
}
div.wrap > main > section[hidden] {
  display: none;
}
div.wrap > main > section > p {
  font-size: var(--patchwork-internal-font-small);
}
div.wrap > main > section > p:first-child {
  margin-block-start: var(--patchwork-internal-space-large);
}
div.wrap > main > section > input {
  margin-block-end: var(--patchwork-internal-space-large);
  width: 100%;
  box-sizing: border-box;
  font-family: "Poppins";
  font-size: var(--patchwork-internal-font-small);
  border: solid 2px #FCF1EC;
  border-radius: var(--patchwork-internal-space-xsmall);
  padding: var(--patchwork-internal-space-small);
}
div.wrap > main > section > button {
  display: block;
  margin-block-end: var(--patchwork-internal-space-large);
  box-sizing: border-box;
  background-color: #FCF1EC;
  border: none;
  padding: var(--patchwork-internal-space-small);
  border-radius: var(--patchwork-internal-space-xsmall);
  align-self: end;
  color: hsl(from #FCF1EC h calc(s + 10) calc(l - 30));
  border: solid 1px transparent;
}
div.wrap > main > section > button:hover {
  border: solid 1px hsl(from #FCF1EC h calc(s + 10) calc(l - 30));
}
div.wrap > main > section > p.login-error-hint {
  color: hsl(from #FCF1EC h calc(s + 10) calc(l - 30));
  font-size: calc(var(--patchwork-internal-font-xsmall) * 0.7);
  text-align: center;
  margin-block-end: var(--patchwork-internal-space-medium);
}
div.wrap > main > section > p[hidden].login-error-hint {
  display: none;
}
div.wrap > footer {
  flex: 1;
  grid-area: foot;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  gap: var(--patchwork-internal-font-huge);
}
div.wrap > footer > a:link {
  all: unset;
  color: hsl(from #FCF1EC h calc(s + 10) calc(l - 30));
}
div.wrap > footer > a:visited {
  color: hsl(from #FCF1EC h s calc(l - 60));
}
div.wrap > footer > a:hover {
  color: hsl(from #FCF1EC h s calc(l - 60));
}
div.wrap > footer > a[hidden] {
  display: none;
}