/* Notepad look: cream lined paper, red margin, handwriting font. */
:root {
  --paper: #fdfaf0;
  --line: #c9dcef;
  --margin: #e8a0a0;
  --ink: #2a2a3a;
  --ink-soft: #6b6b7b;
  --desk: #e9e4d8;
  --lh: 2rem;               /* one ruled line */
}

* { box-sizing: border-box; }

html { background: var(--desk); }

body {
  margin: 0;
  min-height: 100vh;
  padding: 24px 16px 48px;
  background: var(--desk);
  color: var(--ink);
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 1.35rem;
  line-height: var(--lh);
}

.page {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  min-height: calc(100vh - 72px);
  padding: var(--lh) 24px calc(var(--lh) * 2) 64px;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent 47px, var(--margin) 47px, var(--margin) 49px, transparent 49px),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--lh) - 1px), var(--line) calc(var(--lh) - 1px), var(--line) var(--lh));
  background-position: 0 0, 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);
  border-radius: 2px;
}

/* Torn-off top edge, like it came off a pad. */
.page::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -6px;
  height: 12px;
  background: radial-gradient(circle at 6px 6px, var(--desk) 4px, transparent 4.5px) repeat-x;
  background-size: 18px 12px;
}

h1, h2, h3 {
  font-family: "Caveat", "Patrick Hand", cursive;
  font-weight: 700;
  line-height: var(--lh);
  margin: 0 0 var(--lh);
}
h1 { font-size: 2.4rem; line-height: calc(var(--lh) * 2); margin: 0; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.6rem; }

p, ul, ol, blockquote { margin: 0 0 var(--lh); }
ul, ol { padding-left: 1.4em; }
li { margin: 0; }

blockquote {
  padding-left: 16px;
  border-left: 3px solid var(--margin);
  color: var(--ink-soft);
}

a { color: #2f5da8; }
video { width: 100%; display: block; margin: 0 0 var(--lh); border: 6px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); background: #000; }
img { max-width: 100%; height: auto; display: block; margin: 0 auto var(--lh); border-radius: 2px; }
hr { border: 0; height: var(--lh); margin: 0; background: center / 40% 2px no-repeat linear-gradient(var(--ink-soft), var(--ink-soft)); opacity: .4; }
strong { font-weight: normal; text-decoration: underline wavy var(--margin); text-underline-offset: 4px; }

/* Login form */
.login { max-width: 340px; }
.login > * { display: block; margin: 0 0 var(--lh); }
.login > [type="hidden"] { display: none; }
.login input {
  font: inherit;
  width: 100%;
  height: var(--lh);
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  outline: none;
}
.login input:focus { border-bottom-color: #2f5da8; }
.login button, .cover button {
  font: inherit;
  height: var(--lh);
  line-height: calc(var(--lh) - 4px);
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.login button:hover, .cover button:hover { background: var(--ink); color: var(--paper); }
.error { color: #b33; }

/* "Tap to open" cover for notes with music. Phones only allow sound after a tap. */
.cover {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--desk);
  z-index: 10;
  transition: opacity .6s ease;
}
.cover .envelope {
  text-align: center;
  padding: 32px 40px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-radius: 2px;
}
.cover.gone { opacity: 0; pointer-events: none; }

.music-toggle {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 480px) {
  body { font-size: 1.2rem; padding: 16px 8px 32px; }
  .page { padding-left: 52px; padding-right: 16px; }
}

code { font-family: inherit; }

/* Massage booking form */
.booking label { display: block; margin: 0; }
.booking > label { margin-bottom: var(--lh); }
.booking input[type="date"], .booking input[type="time"], .booking input[type="text"] {
  display: block;
  width: 100%;
  max-width: 340px;
  height: var(--lh);
  font: inherit;
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  outline: none;
}
.booking fieldset { border: 0; padding: 0; margin: 0 0 var(--lh); }
.booking legend { padding: 0; }
.booking fieldset label { display: inline-block; margin-right: 18px; white-space: nowrap; cursor: pointer; }
.booking input[type="radio"], .booking input[type="checkbox"] { accent-color: #c0565b; width: 1.05em; height: 1.05em; vertical-align: -0.1em; }
.booking button {
  font: inherit;
  height: var(--lh);
  line-height: calc(var(--lh) - 4px);
  padding: 0 24px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: var(--lh);
}
.booking button:hover { background: var(--ink); color: var(--paper); }
.booked { color: #c0565b; }

/* Anagram puzzle: letter tiles like a word game */
.anagram { margin-bottom: var(--lh); }
.anagram .slots { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: var(--lh); }
.anagram .word { display: flex; gap: 4px; }
.anagram .pool { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--lh); }
.anagram .slot, .anagram .tile {
  width: 2.1rem; height: 2.4rem;
  padding: 0;
  font: 1.5rem/1 "Caveat", "Patrick Hand", cursive;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.anagram .slot { border: 0; border-bottom: 3px solid var(--ink); background: transparent; }
.anagram .slot.filled { background: #fff8dc; border-radius: 4px 4px 0 0; }
.anagram .slot.locked { color: #2f5da8; cursor: default; }
.anagram .tile {
  border: 1px solid #d8c9a3;
  border-radius: 5px;
  background: #f3e4bd;
  box-shadow: 0 2px 0 #c9b383;
  transition: transform .1s, opacity .2s;
}
.anagram .tile:active { transform: translateY(2px); box-shadow: none; }
.anagram .tile:disabled { opacity: .2; cursor: default; box-shadow: none; }
.anagram-buttons { display: flex; gap: 12px; }
.anagram-buttons button {
  font: inherit; height: var(--lh); line-height: calc(var(--lh) - 4px); padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
}
.anagram-msg { min-height: var(--lh); color: #c0565b; }
.anagram.solved .slot { color: #c0565b; background: transparent; animation: pop .5s ease both; }
.anagram.solved .pool, .anagram.solved .anagram-buttons { display: none; }
@keyframes pop { 50% { transform: scale(1.25); } }

.heart {
  position: fixed; top: -40px; z-index: 20; color: #e0607e; pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(40deg); opacity: .7; } }