@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

body {
    background: #f7f1e3;
    background-image: radial-gradient(#e6dcc6 2px, transparent 0);
    font-family: 'Crimson Pro', serif;
    background-size: 40px 40px;
    background-position: -8px -8px;
    background-attachment: fixed; /* Makes the background stay still */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

h1 {
    font-family: 'Cinzel', 'EB Garamond', serif;
    text-align: center;
    font-size: 2.2rem;
    letter-spacing: 1px;
    color: #3e2f23;
    max-width: 400px;
    text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(0,0,0,0.2);
    margin-top:2rem;
    margin-bottom:0rem;
  }

h3 {
    margin:0rem auto;
    margin-bottom:2rem;
    font-size:1rem;
    color:#715e4b;
    font-family: 'Crimson Pro', serif;
}
  

.controls {
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background: linear-gradient(to bottom, #f7f3eb, #ede3d1);
    border-radius: 6px 6px 0 0;
    font-family: "EB Garamond", "Georgia", serif;
    color: #3e2f23;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-wrap: nowrap; /* prevent stacking */
    overflow-x: scroll;   /* enable horizontal scroll if needed */
    gap: 0.8rem;
    /* scrollbar-width: thin;       
    scrollbar-color: #b49b77 #f7f3eb; */
    position:sticky;
    top:0;
  }
  
  .controls label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #3e2f23;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  
  .controls input[type="color"],
  .controls select,
  .controls input[type="range"],
  .controls button {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #c7bca4;
    border-radius: 6px;
    outline: none;
    background: #fdfaf5;
    color: #3e2f23;
    transition: all 0.25s ease;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5),
                inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .controls input[type="color"] {
    height: 2.4rem;
    padding: 0.2rem;
    cursor: pointer;
    border-radius: 6px;
  }
  
  .controls input[type="range"] {
    appearance: none;
    height: 8px;
    background: #b49b77;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  .controls input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #7a3e2b;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  .controls input[type="range"]::-webkit-slider-thumb:hover {
    background: #5c2d1f;
  }
  
  .controls button {
    width: auto;
    background: linear-gradient(to bottom, #c3a47a, #a98658);
    color: #fffaf2;
    border: none;
    padding: 0.35rem 0.7rem;
    margin-right: 0.4rem;
    border-radius: 10px;
    border-top: 3px ridge #81581b;
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.2),
      0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-weight: 600;
    font-size:0.85rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
  .controls button:hover {
    background: linear-gradient(to bottom, #b59266, #946c3f);
    transform: translateY(-1px);
  }
  
  .controls h3,
  .controls span {
    font-size: 0.85rem;
    color: #4d3b2b;
    margin-top: 0.4rem;
    font-weight: normal;
    margin-bottom: 0;
  }
    
  .controls::-webkit-scrollbar {
    height: 8px;             
  }
  
  .controls::-webkit-scrollbar-thumb {
    background: #b49b77;
    border-radius: 2px;
  }
  
  .controls::-webkit-scrollbar-track {
    background: #f7f3eb;
  }
  
  html {
    scrollbar-gutter: stable both-edges; 
  }

  .controls div {
    flex: 0 0 auto; /* keep natural width */
    min-width: 140px; /* prevent shrinking too small */
  }
  
  
  #postCanvas {
    background: #fffdf9;
    box-sizing: border-box;
    color: #2e241b;
    white-space: pre-wrap;
    overflow:auto;
    z-index:1;
    outline: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s ease;
    margin:0;
  }
  
  #postCanvas:focus {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  }
  
  #downloadBtn {
    width: 100%;
    max-width: 500px;
    text-align: center;
    padding: 1rem 0;
    border: none;
    background: linear-gradient(180deg, #c3a67a 0%, #b49b77 100%);
    color: #fff;
    font-size: 1rem;
    border-top: 10px solid #81581b;
    border-radius: 0;
    box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, 0.3),
      inset 0 -2px 6px rgba(0, 0, 0, 0.2),
      0 3px 8px rgba(0, 0, 0, 0.3);
    font-family: 'EB Garamond', serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  #downloadBtn:hover {
    background: linear-gradient(180deg, #d0b48d 0%, #a78c68 100%);
    box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, 0.4),
      inset 0 -2px 6px rgba(0, 0, 0, 0.25),
      0 5px 10px rgba(0, 0, 0, 0.35);
  }
  
  #downloadBtn:active {
    background: linear-gradient(180deg, #a78c68 0%, #8f7354 100%);
    box-shadow:
      inset 0 2px 6px rgba(0, 0, 0, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.4);
    transform: translateY(1px);
  }


  .instructions p {
    width: 100%;
    max-width: 500px;
    padding: 1rem 1.2rem;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #8a4b32, #693423);
    margin: 0;
    color: #f5e8d3;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: "Garamond", "Georgia", serif;
    letter-spacing: 0.02em;
    border-radius: 0;
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.15),
      inset 0 -3px 5px rgba(0, 0, 0, 0.25),
      0 3px 8px rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  

#supportBtn {
    width: 100%;
    max-width: 500px;
    text-align: center;
    padding: 1rem 0;
    border: none;
    background: linear-gradient(to bottom, #9bb3ae, #7f958f);
    color: #f8f8f8;
    font-size: 1rem;
    position: sticky;
    bottom: 0;
    margin-bottom: 3rem;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.2),
                inset 0 -3px 5px rgba(0, 0, 0, 0.25),
                0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 0 0 6px 6px;
    font-family: "Garamond", "Georgia", serif;
    letter-spacing: 0.03em;
    text-decoration: underline;
    color: #f1f1f1;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    transition: color 0.3s ease;
  }
  
  
  #supportBtn:hover {
    color: #d7e8e2;
  }
  

  button:hover {
    cursor:pointer;
  }

  @media (max-width: 500px) {
    #supportBtn {
        margin-bottom:0;
        border-radius:0;
    }

    .controls {
        border-radius:0;
    }
    
  }