body{font-family:Arial,sans-serif;background:#f4f4f9;margin:0;padding:0;}
    .container{max-width:1050px;margin:20px auto;background:#fff;padding:20px;border-radius:0px;box-shadow:0 4px 20px rgba(0,0,0,.1);width:100%;}
    h1{text-align:center;color:#2c3e50;}
    textarea{width:100%;height:110px;padding:12px;font-size:1.1em;border:1px solid #ddd;border-radius:0px;box-sizing:border-box;margin:15px 0;}
    .controls{display:flex;gap:15px;flex-wrap:wrap;margin:20px 0;align-items:center;justify-content:center;width:100%;}
    .controls label{font-weight:600;color:#2c3e50;}
    
    #fontSize {
  -webkit-appearance: none;
  width:160px;
  height: 6px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  margin: 10px 0;
}

/* Track */
#fontSize::-webkit-slider-runnable-track {
  height: 6px;
  background: #ddd;
  border-radius: 5px;
}
#fontSize::-moz-range-track {
  height: 6px;
  background: #ddd;
  border-radius: 5px;
}

/* Thumb */
#fontSize::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: #4a90e2;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
  margin-top: -6px; /* Centers the thumb */
}

#fontSize::-moz-range-thumb {
  height: 18px;
  width: 18px;
  background: #4a90e2;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
}

    .preview-box{outline: 1px solid #ddd;
    margin: 10px 0;
    padding: 35px;
    text-align: center;
    white-space: pre-wrap;
    border-radius: 0px;
    background: #fff;
    position: relative;}
    .font-label{font-weight: bold;
    margin: 75px 0 8px;
    color: #222;
    font-size: 1.1em;}
    
  .download-buttons{
    display:flex;
    justify-content: right;
    gap:7px;
    
   }
    
    .download-buttons button,button{text-align:right;margin:8px 0;
    padding: 7px 14px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-align: right;
  
}
   
    .status{font-size:0.9em;color:#27ae60;text-align:center;margin:10px 0;display:none;}
    .reset-btn{margin:20px auto;display:block;}

    /* ---- Header / Sidebar / Footer (unchanged) ---- */
    .header{background-color:#fff;width:100%;margin:0;border-bottom:2px solid #cfd6ce;}
    h1{text-align: left;font-size:20px;}
    .main-menu{background-color:#fff;overflow:hidden;margin:0 auto;width:100%;max-width:1200px;color:#555;}
    .sidenav{height:100%;width:0;position:fixed;z-index:99999;top:0;left:0;background-color:#fafafa;overflow-x:hidden;transition:0.5s;padding-top:60px;}
    .sidenav a,.sidenav h3{padding:3px 32px;text-decoration:none;font-size:18px;color:#222;display:block;transition:0.3s;text-align:left;}
    .sidenav a:hover{color:#2A80B9;}
    .sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px;}
    .pagination{text-align:center;margin:30px auto;font-family:sans-serif;}
    .pagination a{display:inline-block;padding:8px 14px;margin:0 4px;text-decoration:none;color:#2AA1A9;border:1px solid #2AA1A9;border-radius:4px;transition:all .3s;}
    .pagination a:hover{background:#2AA1A9;color:#fff;}
    .pagination a.active{background:#2AA1A9;color:#fff;pointer-events:none;}
    .site-footer{background:#fff;color:#080000;padding:40px 20px 20px;font-family:'Segoe UI',sans-serif;}
    .footer-content{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;max-width:1100px;margin:auto;}
    .footer-content h3,.footer-content h4{color:#222;}
    .footer-left p{max-width:300px;font-size:.95em;line-height:1.6;}
    .footer-links ul{list-style:none;padding:0;}
    .footer-links ul li{margin-bottom:8px;}
    .footer-links ul li a{color:#302f31;text-decoration:none;}
    .footer-links ul li a:hover{text-decoration:underline;}
    .footer-social a{color:#555;text-decoration:none;font-size:.95em;}
    .footer-social a:hover{text-decoration:underline;}
    .footer-bottom{text-align:center;margin-top:30px;font-size:.85em;color:#999;border-top:1px solid #333;padding-top:15px;}
    
     .fixed{
     position: fixed;
     top:0; left:0;
     width: 100%; 
     z-index:999999; 
     background-color:#fff;
     display: flex;
     justify-content: center;
     align-items:center;
     margin:0;
     padding:10px 0;
     max-height:80px;
     border-bottom:1px solid #eee;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  }
  
    @media(min-width:400px){
       .controls{display:flex;justify-content: center;gap:15px;align-items:center;margin:5px auto;}
         .fixed {padding:0;}
         
  }