/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
  --bg: #aeb8ff;
  --paper: #f6f4ff;
  --paper-2: #efeaff;
  --periwinkle: #8f9cff;
  --lavender: #cbb8ff;
  --pink: #ffc6e6;
  --yellow: #ffe89a;
  --mint: #d8ffe8;
  --blue: #cfd9ff;
  --ink: #3f3b66;
  --shadow: #6f6ab3;
}

* {
  box-sizing: border-box;
}

a {
  color: #6c74d8;
  text-decoration: none;
  border-bottom: 1px dotted #6c74d8;
}

a:hover {
  color: #3f3b66;
  border-bottom: 1px solid #3f3b66;
}

body {
  margin: 0;
  padding: 30px 14px;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: url("bg.jpg");
  background-repeat: repeat;
  background-size: 900px;
  color: var(--ink);
  font-family: 'VT323', monospace;
  font-size: 20px;
}

.page {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 28px;
  background: rgba(246, 244, 255, 0.92);
  border: 2px solid #dcd6ff;
  box-shadow: 8px 8px 0 var(--shadow);
}

.site-header {
position: relative;
text-align: center;
  margin-bottom: 28px;
  min-height: 100px;
  padding: 22px 22px 22px;
  background: var(--periwinkle);
  border: 2px solid white;
  box-shadow: 5px 5px 0 var(--shadow);
}

h1,
h2,
.label {
  font-family: 'Patrick Hand', cursive;
}

h1 {
  margin: 0;
  font-size: 46px;
  letter-spacing: 3px;
  color: #f6f4ff;
}

h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.note {
  position: relative;
  max-width: 680px;
  margin: 0 auto 28px;
  padding: 34px 22px 22px;
  background: var(--mint);
  border: 2px solid white;
  box-shadow: 5px 5px 0 var(--shadow);
  transform: rotate(-1deg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

.card {
  position: relative;
  min-height: 190px;
  padding: 34px 22px 22px;
  background: var(--paper);
  border: 2px solid white;
  box-shadow: 5px 5px 0 var(--shadow);
}

.card.about {
  background: var(--yellow);
}

.card.journal {
  background: var(--blue);
  transform: rotate(1deg);
}

.card.fic {
  background: var(--pink);
  transform: rotate(-1deg);
}

.card.nikki {
  background: var(--lavender);
  transform: rotate(1deg);
}

.label {
  position: absolute;
  top: -15px;
  left: 20px;
  padding: 8px 22px;
  background: rgba(255, 255, 255, 0.58);
  border: 2px dashed rgba(255, 255, 255, 0.9);  color: var(--ink);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  transform: rotate(-2deg);
  z-index: 2;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.label::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.05)
  );
  pointer-events: none;
}

.intro-note .label {
  background: rgba(216, 255, 232, 0.65);
}

.card.about .label {
  background: rgba(255, 241, 168, 0.65);
}

.card.journal .label {
  background: rgba(220, 232, 255, 0.65);
}

.card.fic .label {
  background: rgba(255, 214, 234, 0.65);
}

.card.nikki .label {
  background: rgba(216, 199, 255, 0.65);
}

.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 120px;
  height: 28px;
  background: rgba(216, 199, 255, 0.75);
  border: 2px dashed rgba(255, 255, 255, 0.9);
  transform: translateX(-50%) rotate(-2deg);
}

.tape-top {
  top: -18px;
  background: rgba(255, 214, 234, 0.8);
}

.intro-note .tape {
  display: none;
}

footer {
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  opacity: 0.8;
}

@media (max-width: 700px) {
  body {
    padding: 18px 10px;
    background-size: 650px;
  }

  .page {
    padding: 18px;
    box-shadow: 5px 5px 0 var(--shadow);
  }

  h1 {
    font-size: 32px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .note,
  .card,
  .card.journal,
  .card.fic,
  .card.nikki {
    transform: none;
  }
}