body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin:0;background:#f4f6f9;color:#333;}
    .header{background:#fff;border-bottom:2px solid #cfd6ce;padding:10px 0;}
    .main-menu{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 15px;}
    .logo{font-size:22px;color:#2a80b9;font-weight:bold;text-decoration:none;}
    .menu-icon{font-size:28px;cursor:pointer;color:#2a80b9;}
    .sidenav{height:100%;width:0;position:fixed;z-index:99999;top:0;left:0;background:#fafafa;overflow-x:hidden;transition:.4s;padding-top:60px;box-shadow:2px 0 10px rgba(0,0,0,.1);}
    .sidenav a,h2{padding:10px 15px 10px 32px;font-size:19px;color:#222;display:block;transition:.3s;text-decoration:none;}
    .sidenav a:hover{color:#2A80B9;}
    .sidenav .closebtn{position:absolute;top:15px;right:25px;font-size:36px;color:#888;cursor:pointer;}
    .container{max-width:1000px;margin:30px auto;padding:25px;background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.08);}
    h1{color:#222;text-align:left;margin-bottom:20px;font-size:20px;}
    textarea{width:98%;height:90px;padding:12px;font-size:1.1em;border:1px solid #ccc;border-radius:6px;margin-bottom:15px;resize:vertical;}
    .controls{margin-bottom:25px;text-align:center;}
    .controls label{display:inline-block;margin:8px 12px;font-weight:600;}
    .controls input[type="range"]{width:120px;}
    .preview-box{border:1px solid #ddd;margin:10px 0;padding:35px;text-align:center;white-space:pre-wrap;border-radius:8px;background:#fff;position:relative;}
    .font-label{font-weight:bold;margin:75px 0 8px;color:#222;font-size:1.1em;}
    .download-buttons{float:right;margin-top:8px;}
    .download-buttons button{margin-left:6px;padding:6px 12px;font-size:13px;}
    button{padding:7px 14px;background:#f0f0f0;border:1px solid #ccc;border-radius:5px;cursor:pointer;font-size:14px;}
    button:hover{background:#e0e0e0;}
    .pagination{text-align:center;margin:65px 0;width:100%; gap: 8px; display: flex; display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
    .pagination a{display:inline-block;padding:9px 16px;margin:0 5px;text-decoration:none;color:#222;border:1px solid #222;border-radius:5px;font-size:15px;}
    
    .pagination a.active{background:#2A80B9;color:#fff;pointer-events:none;border:1px solid #2A80B9;}
    .site-footer {
  background-color: #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: 0.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: #302f31;
  text-decoration: none;
  font-size: 0.95em;
}

.footer-social a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  font-size: 0.85em;
  color:  #302f31;
  border-top: 1px solid #333;
  padding-top: 15px;
}

@media (max-width:768px) {
  /* tighten pagination spacing */
  .pagination {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:8px 0;
    margin:10px 0;       /* reduced */
    box-sizing:border-box;
    overflow:visible;
  }

  /* reduce stacked container spacing */
  .container { margin-bottom:16px; }
  .container + .container { margin-top:10px; }

  /* make hero mobile-friendly */
  .hero {
    padding:28px 16px;
    margin-top:12px;
  }

  /* make headings compact */
  .hero h1, .container h2 { margin-top:8px; margin-bottom:10px; }
}

.note {display: block; margin-top: 20px; font-size: 24px; color: #2A80B9; font-weight: 600;}