@font-face {
  font-family: 'Cookie Monster';
  src: url('fonts/Cookiemonster-gv11.ttf') format('truetype');
}

@font-face {
  font-family: 'Cutie Patootie';
  src: url('fonts/CutiePatootie-Rgjv.ttf') format('truetype');
}

@font-face {
  font-family: 'Joseph Sophia';
  src: url('fonts/josephsophia.ttf') format('truetype');
}

html {
  background-color: #D8D2E1;
  font-family: 'Cutie Patootie', serif;
  font-size: xx-large;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html.locked, html.locked body {
  overflow: hidden;
}

* {
  color: #32213A;
  fill: #32213A;
  box-sizing: border-box;
}

#header * {
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  height: max(450vh, 150vw);
  margin: 0;
}

main {
  text-align: center;
  margin-top: 2rem;
  width: min(80%, 800px);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: inherit;
  pointer-events: none;
  z-index: -1;
}

.decoration.top-left.active {
  position: absolute;
  top: 0;
  left: 0;
  width: 66%;
  height: 50%;

  background-color: currentColor;
  mask: url('images/top_left_draw.svg') no-repeat top left / contain;
}

.decoration.bottom-right.active {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 66%;
  height: 50%;

  background-color: currentColor;
  mask: url('images/bottom_right_draw.svg') no-repeat bottom right / contain;
}

.signature {
  background-color: currentColor;
  mask: url('images/signature_mask.png') no-repeat center / contain;
  height: 1em;
  aspect-ratio: 4 / 1;
}

.caption {
  font-size: medium;
}

.text-image {
  width: 100%;
  aspect-ratio: 1 / 1;
}