:root {
  --font-s:clamp(0.5rem, 0.012rem + 4.878vw, 1.1rem);
  interpolate-size: allow-keywords;
}
@font-face {
        font-family: "cute";
        src: url("../fonts/CuteFont-Regular.ttf");
      }
      @font-face {
        font-family: "sansy";
        src: url("../fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf");
      }
      body {
        background-color: #ffedf0;
        color: brown;
        font-family: Times, "Times New Roman", serif;
        
      }
      p {
        z-index: 2;
        position: relative;
      }

      .body-bg {
        background-image: url("../images/cherryblossom.png");
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: 500px;
        width: 100%;
        height: 100%;
        position: fixed;
        filter: saturate(0.7);
        pointer-events: none;
      }
      html {
        scroll-behavior: smooth;
      }
      main {
        background: white;
        border-image: url("../images/stampred.png") 4.2 /  4px round;
        padding: 2rem;
        max-width: 60%;
        font-size: var(--font-s);
        margin: 1rem 1rem;
        line-height: 1.5;
        h1, h2 {
          font-size: 1.5rem;
          display:block;
          border-bottom: 1px solid;
        }
        h3 {
       
          text-decoration-line: underline;
          text-underline-offset: 6px;
  }
        
      }
      .doll-stats {
        padding: 0;
        list-style-type: none;
        display: grid;
        z-index: 2;
        position: relative;
        grid-template-columns: repeat(3, 1fr);
      }
      .custom-emoji > img{
        height: var(--font-s);
        width: var(--font-s);
        scale: 1.4;
        margin: 0px 0.3rem;
      }
      .inline-spoiler {
        filter: blur(2px);
        box-shadow: -1rem 0px 2rem rgb(198, 131, 131) inset, 2rem 10px 10px 2rem rgb(255, 141, 10) inset;
        transition: box-shadow 0.3s ease, filter 0.6s ease;
        &:hover {
          filter: blur(0px);
          box-shadow:0px 0px transparent inset;
        }
      }
      .doll-goals {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(173px, 200px));
        gap: 3rem;
        list-style: none;
        
        padding: 0px;
        justify-content: center;
        li {
          text-align: center;
          font-family: Sans-serif;
          font-weight:bold;
          padding-block: 2rem;
          transform:scale(0.9);
          box-shadow: 0px 10px 0px -5px rgb(72, 38, 38);
          background: #ffefdb;
          color:rgb(72, 38, 38);
          border-radius:20px; 
          border: 2px solid rgba(255, 192, 203, 0);
          transition: box-shadow 0.2s ease-out, transform 0.2s ease-out, border 0.2s ease;
          &:hover {
            transform: scale(1);
            box-shadow: 0px 0px 0px 0px rgb(72, 38, 38);
            border: 2px solid rgb(255, 221, 192);
          }
        }
        
      }


/* ~~~~~ diary ~~~~~~ */
.diary-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  li::before {
    
  }
}
.diary-year {
  float: right;
}
.diary-entry {
  overflow: hidden;
  summary {
    border-bottom: 1px solid;
    transition: all 0.4s ease;
    &:hover {
      filter: brightness(2);
    }
  }

  &::details-content {
    block-size: 0;
    transition: block-size 0.4s ease, content-visibility 0.4s ease;
    transition-behavior: allow-discrete;
    /* content visibility is binary transition and necessary for closing,
    and seeint allow discrete allows it to be transitioned smoothly */
  }
  
}
.diary-entry[open] {
  > summary {
    filter: brightness(2);
  }
  &::details-content {
    block-size: auto;
  }
  
}