:root {
      --red:#791014;
      --red-dark:#4f070b;
      --cream:#fff8f0;
      --paper:#fffdf8;
      --pink:#ffd9dc;
      --text:#4b3026;
      --yellow:#fff0a8;
    }

    body {
      margin:0;
      background:
        radial-gradient(#ffd7dc 2px, transparent 2px),
        var(--red);
      background-size:22px 22px;
      font-family:"Gaegu", cursive;
      color:var(--text);
      font-size:19px;
      line-height:1.35;
    }

    a {
      color:var(--red);
      font-weight:700;
      text-decoration:underline dotted;
    }

    .wrapper {
    max-width:900px;
    margin:24px auto;
    padding:16px;
    position:relative;
}

    .hero {
      background:var(--cream);
      border:4px double #ffd3d8;
      border-radius:18px;
      padding:18px;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:stretch;
      box-shadow:8px 8px 0 var(--red-dark);
    }

    .banner {
      height:400px;
      border:3px solid #ffc6cc;
      border-radius:8px;
      overflow:hidden;
      background:#fff;
      padding:8px;
    }

    .banner img {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border-radius:4px;
    }

    .intro {
      background:
        linear-gradient(rgba(255,253,248,.88),rgba(255,253,248,.88)),
        url("images/paper-texture.jpg");
      background-size:260px;
      border:2px dashed #efb7bd;
      border-radius:12px;
      padding:24px;
      position:relative;
    }

    .intro:before {
      content:"♡";
      position:absolute;
      right:18px;
      top:10px;
      color:#ff9ca8;
      font-size:38px;
    }

    h1 {
      font-family:"Yomogi", cursive;
      color:var(--red);
      font-size:48px;
      line-height:.95;
      margin:0 0 12px;
      text-shadow:2px 2px #ffd5da;
    }

    .subtitle {
      display:inline-block;
      background:#ffe1e5;
      padding:3px 8px;
      border-radius:4px;
      font-weight:700;
      color:var(--red-dark);
      margin-bottom:12px;
    }

    nav {
      margin-top:18px;
      text-align:center;
    }

    nav a, .button {
      display:inline-block;
      background:var(--red);
      color:#fff8f0;
      padding:6px 13px;
      border-radius:8px;
      margin:4px;
      font-weight:700;
      text-decoration:none;
      border:2px solid var(--red-dark);
      box-shadow:3px 3px 0 #ffc6cc;
    }

    nav a:hover, .button:hover {
      transform:rotate(-2deg);
      background:#9b1820;
    }

    .grid {
    margin-top:24px;
    display:grid;
    grid-template-columns:250px 1fr 270px;
    gap:20px;
    align-items:start;
}

    .card {
      background:
        linear-gradient(rgba(255,253,248,.9),rgba(255,253,248,.9)),
        url("images/paper-texture.jpg");
      background-size:240px;
      border:3px double #efb7bd;
      border-radius:12px;
      padding:18px;
      margin-bottom:20px;
      box-shadow:5px 5px 0 rgba(79,7,11,.7);
    }

    .card:nth-child(even) {
      transform:rotate(.6deg);
    }

    .card h2 {
      margin:-6px 0 12px;
      color:var(--red);
      font-size:27px;
      font-family:"Yomogi", cursive;
      border-bottom:2px dotted #efb7bd;
    }

    .pfp {
      width:140px;
      height:140px;
      object-fit:cover;
      border-radius:10px;
      display:block;
      margin:0 auto 14px;
      background:white;
      padding:7px;
      border:2px solid #ffc6cc;
      transform:rotate(-3deg);
      box-shadow:4px 4px 0 #e9b7bc;
    }

    ul {
      padding-left:24px;
    }

    li::marker {
      content:"♡ ";
      color:var(--red);
    }

    .note {
      background:#fff1b8;
      border:2px dashed #d5a24f;
      border-radius:8px;
      padding:12px;
      margin:14px 0;
      transform:rotate(-.4deg);
    }

    .polaroid {
      background:white;
      padding:10px 10px 30px;
      border-radius:6px;
      border:1px solid #e7c6c6;
      box-shadow:5px 5px 0 #e8bfc4;
      transform:rotate(-2deg);
      margin-bottom:20px;
    }

    .polaroid:nth-child(even) {
      transform:rotate(2deg);
    }

    .polaroid img {
      width:100%;
      height:170px;
      object-fit:cover;
      border-radius:3px;
      image-rendering:auto;
    }

    .caption {
      text-align:center;
      font-size:17px;
      margin-top:8px;
      color:#6b4444;
      font-weight:700;
    }

    .spotify-text {
      color:#6b4444;
      font-size:17px;
      margin:0;
    }

    footer {
      text-align:center;
      color:var(--cream);
      margin-top:30px;
      font-weight:700;
      font-size:18px;
      text-shadow:2px 2px var(--red-dark);
    }

    @media (max-width:900px) {
      .hero, .grid {
        grid-template-columns:1fr;
      }

      h1 {
        font-size:38px;
      }

      .banner {
        height:240px;
      }
    }
    
    .media-entry{
    background:#fffaf8;
    border:2px dashed #efb7bd;
    border-radius:10px;
    padding:14px;
    margin:18px 0;
    position:relative;
}

.media-entry:nth-child(even){
    transform:rotate(.4deg);
}

.media-entry:nth-child(odd){
    transform:rotate(-.3deg);
}

.media-title{
    font-family:"Yomogi", cursive;
    font-size:23px;
    color:var(--red);
    margin-bottom:2px;
}

.stars{
    color:#d9b100;
    letter-spacing:2px;
    font-size:16px;
    margin-bottom:10px;
}

.media-entry p{
    margin:0;
    line-height:1.45;
}

.interest-box{
    background:#fff9f7;
    border:2px dashed #efb7bd;
    border-radius:10px;
    padding:16px;
    margin:18px 0;
}

.interest-header{
    font-family:"Yomogi", cursive;
    font-size:24px;
    color:var(--red);
    margin-bottom:10px;
}

.interest-tags{
    margin-top:12px;
    font-size:16px;
    color:#7b5b5b;
    font-style:italic;
    border-top:2px dotted #efb7bd;
    padding-top:8px;
}

.under-construction-pages{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.construction-card{
  background:
    linear-gradient(rgba(255,253,248,.92),rgba(255,253,248,.92)),
    url("images/paper-texture.jpg");
  background-size:240px;
  border:3px double #efb7bd;
  border-radius:12px;
  padding:18px;
  box-shadow:5px 5px 0 rgba(79,7,11,.7);
}

.construction-card h2{
  margin:0 0 10px;
  color:var(--red);
  font-family:"Yomogi", cursive;
  font-size:28px;
  border-bottom:2px dotted #efb7bd;
}

.construction-card p{
  margin:8px 0;
}

@media(max-width:900px){
  .under-construction-pages{
    grid-template-columns:1fr;
  }
}
  
.construction-card button{
  background:var(--red);
  color:var(--cream);
  border:2px solid var(--red-dark);
  border-radius:8px;
  padding:7px 14px;
  font-family:"Gaegu", cursive;
  font-size:18px;
  font-weight:700;
  box-shadow:3px 3px 0 #ffc6cc;
  cursor:pointer;
}
.construction-card button:hover{
  transform:rotate(-2deg);
  background:#9b1820;
}


body{
  font-size:16px;
  line-height:1.45;
  background-size:18px 18px;
}

.wrapper{
  max-width:760px;
  margin:18px auto;
  padding:14px;
  position:relative;
}

.hero{
  padding:12px;
  gap:12px;
  align-items:stretch;
}

.banner{
  height:270px;
}

.intro{
  padding:16px;
}

h1{
  font-size:36px;
}

.subtitle{
  font-size:15px;
}

.grid{
  margin-top:16px;
  grid-template-columns:180px 1fr 200px;
  gap:14px;
}

.card{
  padding:13px;
  margin-bottom:14px;
}

.card h2{
  font-size:20px;
}

.pfp{
  width:95px;
  height:95px;
}

nav a,
.button{
  padding:5px 10px;
  font-size:15px;
}

.polaroid img{
  height:115px;
}

.caption{
  font-size:14px;
}

.media-title,
.interest-header{
  font-size:18px;
}

.spotify-text,
.interest-tags,
.stars{
  font-size:14px;
}

.construction-card{
  padding:15px;
}

footer{
  font-size:16px;
}

.page{
  display:none;
  margin-top:22px;
}

.active-page{
  display:block;
}

@media(max-width:900px){
  .hero,
  .grid{
    grid-template-columns:1fr;
  }
}

.music-card{
  padding:15px;
}

.itunes-player{
  background:#9b3a3e;
  color:#fff8f0;
  border:3px solid #ffc6cc;
  border-radius:14px;
  padding:12px;
  box-shadow:4px 4px 0 var(--red-dark);
}

.itunes-top{
  display:flex;
  gap:10px;
  align-items:center;
}

.album-art{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid #ffd7dc;
}

.now{
  font-size:13px;
  opacity:.9;
}

.song{
  font-size:19px;
  font-weight:700;
  line-height:1;
}

.artist{
  font-size:14px;
  opacity:.85;
}

.progress{
  display:flex;
  align-items:center;
  gap:6px;
  margin:12px 0 8px;
  font-size:12px;
}

.bar{
  flex:1;
  height:8px;
  background:#6e1519;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #ffc6cc;
}

.fill{
  width:42%;
  height:100%;
  background:#ffd7dc;
}

.controls{
  text-align:center;
  font-size:22px;
  letter-spacing:8px;
  margin:8px 0;
}

.play{
  color:#fff;
}

.music-note{
  background:rgba(255,255,255,.14);
  border-radius:8px;
  padding:8px;
  font-size:14px;
  margin:10px 0;
}

.spotify-link{
  display:block;
  background:#fff8f0;
  color:var(--red);
  text-align:center;
  padding:7px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
}

.bag-item{
    background:#fff8f6;
    border:2px dashed #efb7bd;
    border-radius:8px;
    padding:8px 10px;
    margin:8px 0;
    font-size:15px;
}

.random-button{
    width:100%;
    margin-top:10px;
    background:var(--red);
    color:var(--cream);
    border:2px solid var(--red-dark);
    border-radius:8px;
    padding:8px;
    cursor:pointer;
    font-family:"Gaegu", cursive;
    font-size:18px;
    font-weight:700;
    box-shadow:3px 3px 0 #ffc6cc;
}

.random-button:hover{
    transform:rotate(-2deg);
}

.random-output{
    margin-top:12px;
    background:#fff7f3;
    border:2px dashed #efb7bd;
    border-radius:8px;
    padding:10px;
    min-height:60px;
    font-size:15px;
}


/* align the bottom edges of the banner and intro cards */


/* final layout overrides */
.hero{align-items:stretch;}
.banner,.intro{height:100%;box-sizing:border-box;}
.intro{display:flex;flex-direction:column;}
.intro nav{margin-top:auto;padding-top:18px;}

.page{display:none;margin-top:22px;}
.active-page{display:block;}

.polaroid{
  height:auto;
  padding:10px 10px 22px;
  display:block;
  box-sizing:border-box;
}
.polaroid img{
  display:block;
  width:100%;
  height:145px;
  object-fit:cover;
}

.page-content{
    padding-top:16px;
}



.writing-page .card h2{
    margin-bottom:18px;
}

/* writing page spacing fix */
.writing-block{
    background:#fffaf8;
    border:2px dashed #efb7bd;
    border-radius:10px;
    padding:22px;
    margin:18px 0;
}

.writing-block h3{
    margin:0 0 18px;
    font-family:"Yomogi", cursive;
    color:var(--red);
    font-size:18px;
    border-bottom:2px dotted #efb7bd;
    padding-bottom:8px;
}

.writing-block pre{
    white-space:pre-wrap;
    font-family:inherit;
    font-size:16px;
    line-height:1.7;
    color:#4b3026;
    margin:0;
    padding:0;
}
html,
body{
  scrollbar-width:auto;
  scrollbar-color:#d9aeb2 #fff8f0;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:16px;
  height:16px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:#fff8f0;
  border-left:1px solid #791014;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background:#ffd9dc;

  border-top:2px solid #fff8f0;
  border-left:2px solid #fff8f0;

  border-right:2px solid #791014;
  border-bottom:2px solid #791014;

  border-radius:0;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:#efb7bd;
}
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button{
  width:16px;
  height:16px;
  background:#ffd9dc;

  border-top:2px solid #fff8f0;
  border-left:2px solid #fff8f0;

  border-right:2px solid #791014;
  border-bottom:2px solid #791014;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:#fff8f0;
}