body, html { margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-size: 14px; color: #3f3f3f; background: #ffffff; }
img { max-width: 100%; height: auto; }
a { color: #035000; text-decoration: none; }
a:hover { text-decoration: underline; }
.nav-section { width: 100%; }
.top-section { background-color: #eefaee; border-bottom: 1px solid #009900; }
.top-content { width: 1008px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.lang-section a { text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor; }
.lang-section { padding: 10px; white-space: nowrap; }
.search-section { padding: 5px; }
.search-section form { display: flex; align-items: center; background: #fff; border: 1px solid #a9a9a9; border-radius: 4px; }
.search-section input[type="text"] { border: none; padding: 6px 8px; width: 180px; outline: none; }
.page-section { width: 1040px; margin: 0 auto; }
.tag-section { margin-top: 10px; }
.tag-box { border: 5px solid #009900; background-color: #eefaee; padding: 10px; }
.tag-link a, .letter-link a { display: inline-block; padding: 4px 6px; font-size: 13px; }
 .letter-section { display: flex; flex-wrap: wrap; gap: 6px; }
.font-title-list { width: 100%; }
.font-list { list-style: none; padding: 0; margin: 0; }
.font-section-each { margin-bottom: 16px; }
.font-info-in { background-color: #eefaee; border: 1px solid #009900; border-radius: 7px; padding: 8px; }
.font-img-lic-down { display: table; width: 100%; }
.font-preview-section { display: table-cell; width: 100%; }
.font-lic-down { display: table-cell; width: 180px; text-align: right; vertical-align: top; }
.font-download-down { background: #009641; color: #fff; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: 700; }
.pagination-section { display: flex; justify-content: flex-end; gap: 6px; margin: 10px 0; }
.page-button { border: 1px solid #b4b4b4; padding: 6px 10px; border-radius: 4px; font-weight: 700; }
.bottom-section { text-align: center; padding: 15px; font-size: 15px; }
@media (max-width: 1199px) {
 .lang-section { white-space: normal; text-align: center; }
 .lang-section a { display: inline-block; margin: 2px 2px; }
 .search-section { width: 100%; display: flex; justify-content: center; }
 .page-section { width: 100%; padding: 0 12px; }
 .font-img-lic-down { display: block; }
 .font-preview-section, .font-lic-down { display: block; width: 100%; }
 .font-lic-down { margin-top: 3px; }
 .tag-link { float: none; width: 100%; } }
@media (max-width: 840px) { 
.top-content { width: 100%;}
}
@media (max-width: 767px) {
 body { font-size: 15px; }
 .top-content { width: 100%; flex-wrap: wrap; }
 .lang-section { font-size: 14px; padding: 4px 4px; }
 .lang-section img { vertical-align: middle; }
 .search-section form { width: 100%; }
 .search-section input[type="text"] { width: 100%; }
 .tag-link a { padding: 6px 8px; font-size: 15px; }
 .letter-section { display: flex; flex-wrap: wrap; gap: 6px; }
 .font-info-in { font-size: 16px; }
 .font-tags { float: none; text-align: left; }
 .font-download-down { width: 100%; text-align: center; }
 .pagination-section { justify-content: center; flex-wrap: wrap; } }
.tag-box { padding: 5px; }
.tag-link { break-inside: avoid; margin: 0; }
.tag-link a { display: block; padding: 2px 4px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.letter-link { float: none; }
.letter-link a { display: block; padding: 3px 0; font-size: 13px; border-radius: 3px; }
@media (max-width: 1199px) {
 .tag-link { break-inside: avoid; } }
.settings-section { margin: 5px; font-family: sans-serif; }
.settings-section label { display: block; font-weight: 700; margin-bottom: 2px; font-size: 14px; }
.settings-section .settings-each { display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: top; flex-wrap: nowrap; min-width: 60px; }
.settings-section input[type=text], .settings-section select { padding: 4px 5px; height: 28px; box-sizing: border-box; font-size: 13px; min-width: 50px; }
#previewText { width: 125px; }
.settings-each.color-inputs { display: flex; flex-direction: row; align-items: center; }
.settings-each.color-inputs input[type=text] { margin-right: 4px; width: 60px; }
.settings-each.color-inputs input[type=color] { padding: 0; width: 28px; height: 28px; border: 0; cursor: pointer; }
.multiselection { position: relative; font-size: 13px; width: 100%; }
.multiselection-label { background-color: #fff; padding: 4px 5px; border-radius: 4px; border: 1px solid #a9a9a9; cursor: pointer; text-align: left; width: 100%; }
.multiselection-options { display: none; position: absolute; background-color: white; border: 1px solid #ccc; z-index: 1; width: 240px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.multiselection-options label { display: block; cursor: pointer; }
.multiselection.show .multiselection-options { display: block; }
.settings-section input[type=submit], .settings-section button { padding: 4px 10px; font-size: 13px; margin: 2px 4px 2px 0; display: inline-block; min-width: 60px; cursor: pointer; }
@media (max-width: 480px) { .settings-section .settings-each { max-width: 48%; } .settings-each.color-inputs { max-width: 100%; } }
@media (min-width: 481px) and (max-width: 768px) { .settings-section .settings-each { max-width: 32%; } }
@media (min-width: 769px) and (max-width: 1024px) { .settings-section .settings-each { max-width: 24%; } }
@media (max-width: 480px) { .multiselection-options { max-height: 180px; overflow-y: auto; } }
.color-row { display: flex; gap: 4px; }
.color-row input[type=text] { padding: 4px 5px; height: 28px; box-sizing: border-box; }
.color-row input[type=color] { width: 32px; height: 32px; padding: 0; border: 0; cursor: pointer; }
.settings-section input[type=submit], .settings-section button { margin-top: 18px; }
.tag-link { break-inside: avoid; margin: 0; }
.tag-link a { display: block; padding: 2px 4px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
* { box-sizing: border-box; }
.font-title-list { min-height: 500px; width: 100% }
.font-list { margin: 0; padding: 0; list-style-type: none }
.font-list li:last-child{ margin-bottom: 0 }
.font-info { width: 100%; clear: both }
.font-info-in { padding: 8px; background-color: #eefaee; border: 1px solid #009900; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px; border-radius: 7px; box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 15px }
.font-info a { color: #035000; font-weight: 700; text-decoration: none }
.font-tags { float: right; text-align: right; color: #3f3f3f }
.font-tags a { color: #3f3f3f; text-decoration: none }
.font-img-lic-down { padding: 0; display: table; width: 100%; }
.font-lic-down { display: table-cell; width: 174px; background-color: #fff; vertical-align: top; text-align: right; position: relative; height: auto; float: none; padding: 6px 0 0 0; }
.font-img-lic-down .font-lic-down .font-download-yes, .font-lic-down{ float: right }
.font-lic-down-details { float: right; padding-right: 0; color: #575739; text-align: right }
.font-img-lic-down .font-lic-down .font-download-yes .font-download-down { padding: 8px 11px; font-weight: 700; background-color: #009641; color: #fff; margin-right: 0; cursor: pointer; font-size: 15px; -webkit-font-smoothing: antialiased; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
.font-lic-down .font-download-no { width: 141px; text-align: center }
.font-img-lic-down .font-lic-down .font-download-yes .font-download-down a{ color: #fff; text-decoration: none }
.font-preview-section{ height: 100%; clear: both; cursor: pointer; display: table-cell; width: 100% }
@media (max-width: 1024px) {
 .font-info-in { font-size: 14px; padding: 6px; }
 .font-img-lic-down .font-lic-down { width: 170px; }
 .font-img-lic-down .font-lic-down .font-download-down { font-size: 14px; padding: 6px 9px; }
 .font-lic-down-details span { font-size: 13px; } }
@media (max-width: 768px) {
 .font-info-in { font-size: 13px; padding: 5px; }
 .font-tags { font-size: 12px; }
 .font-img-lic-down .font-lic-down { width: 150px; }
 .font-img-lic-down .font-lic-down .font-download-down { font-size: 13px; padding: 5px 8px; }
 .font-lic-down-details span { font-size: 12px; } }
@media (max-width: 480px) {
 .font-info-in { font-size: 12px; padding: 4px; }
 .font-tags { font-size: 11px; }
 .font-img-lic-down .font-lic-down { width: 140px; }
 .font-img-lic-down .font-lic-down .font-download-down { font-size: 12px; padding: 4px 6px; }
 .font-lic-down-details span { font-size: 11px; } }
.font-preview-section, .font-lic-down { vertical-align: top; }
.font-preview-section { height: auto; }
.font-preview-section img { display: block; }
.font-preview-section img { display: block; max-width: 100%; height: auto; min-height: 80px; max-height: 180px; object-fit: contain; }
@media (max-width: 768px) { .font-preview-section img { min-height: 70px; max-height: 150px; } }
@media (max-width: 480px) { .font-preview-section img { min-height: 60px; max-height: 120px; } }
.font-img-lic-down { display: flex; flex-direction: row; width: 100%; align-items: stretch; }
.font-preview-section { flex: 1; overflow: hidden; }
.font-preview-section img { width: auto; display: block; }
.font-lic-down { width: 174px; display: flex; flex-direction: column; justify-content: flex-start; text-align: right; background-color: #fff; padding-top: 6px; box-sizing: border-box; } @media (max-width: 768px) { .font-preview-section, .font-preview-section img { height: 90px; }
 .font-lic-down { width: 140px; } }
@media (max-width: 480px) { .font-preview-section, .font-preview-section img { height: 75px; }
 .font-lic-down { width: 120px; } } .font-img-lic-down { display: flex; align-items: flex-start; width: 100%; }
.font-preview-section { flex: 1 1 auto; overflow: hidden; }
.font-preview-section img { width: auto; max-width: none; display: block; }
.font-lic-down { width: 174px; flex-shrink: 0; text-align: right; }
.font-lic-down-details { flex-direction: column; align-items: flex-end; justify-content: flex-start; white-space: nowrap; }
.font-download-down { padding: 6px 10px; font-size: 14px; max-width: 100%; box-sizing: border-box; }
.font-download-down a { display: inline-block; text-align: center; width: 100%; }
.font-img-lic-down { position: relative; }
.font-lic-down-details { top: 0; padding-top: 3px; right: 0; text-align: right; white-space: nowrap; width: auto; }
.font-preview-section { display: block; width: 100%; height: auto; overflow: hidden; }
.top-fonts-title { margin-bottom: 0; font-size: 20px; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; font-weight: bold; color: #000000ff; text-align: left; }
@media (max-width: 768px) { .top-fonts-title { text-align: center; padding-left: 0; } }
.active { font-weight: bold; background-color:rgb(0, 217, 0); }
.clickable-page { cursor: pointer; }
.font-info-box { font-family: Arial, sans-serif; max-width: 750px; font-size: 18px; }
.font-info-box h2 { text-align: center; }
.font-info-box table { width: 100%; border-collapse: collapse; }
.font-info-box td { border: 1px solid #ccc; padding: 7px; }
.font-info-box td:first-child { font-weight: bold; width: 150px; background-color: #eefaee; }
.font-info-box tr:first-child td:first-child { border-top-left-radius: 12px; }
.font-info-box tr:first-child td:last-child { border-top-right-radius: 12px; }
.font-info-box tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.font-info-box tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.font-info-box .cat-btn { display: inline-block; margin: 5px; padding: 5px 11px; border: 1px solid #999; border-radius: 4px; background-color: #eefaee; color: black; text-decoration: none; font-family: inherit; transition: background 0.3s ease; }
.font-info-box .cat-btn:hover { background-color: #e0e0e0; }
.author-note { padding-left: 15px; }
.author-note-inner { padding-bottom: 6px; font-size: 16px; }
.search-section input[type="text"] { outline: none; }
.no-results { margin: 40px auto; padding: 30px 20px; max-width: 500px; text-align: center; font-family: "Inter", sans-serif; }
.no-results-icon { font-size: 48px; opacity: 0.7; margin-bottom: 10px; }
.no-results-text { font-size: 20px; font-weight: 600; color: #035000; }
.no-results-suggestions-title { font-size: 16px; font-weight: 600; color: #035000; margin-bottom: 10px; }
.no-results-suggestions { list-style: none; padding: 0; margin: 0; }
.no-results-suggestions li { font-size: 14px; color: #000000; margin: 4px 0; }
.scroll-x { overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.scroll-x img { display: inline-block; max-width: none; }
span.fontdown-right-align { display: inline-block; margin-left: auto; }
.font-license { display: block; margin-bottom: 4px; white-space: normal; }
.font-downloads-row { display: flex; justify-content: flex-end; width: 100%; margin-top: 2px; }
.fontdown-right-align { text-align: right; }
.font-img-lic-down { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.font-lic-down { display: flex; flex-direction: column; justify-content: center; } .font-img-lic-down { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.font-lic-down { display: flex; flex-direction: column; justify-content: center; }
.font-lic-down { flex-direction: column; justify-content: center; height: auto; overflow: visible; }
.font-lic-down::after { content: ""; display: block; clear: both; }
.font-img-lic-down { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.font-lic-down-details { display: flex; flex-direction: column; justify-content: center; }
.tag-link { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tag-grid { display: grid; grid-auto-flow: column; gap: 2px 2px; width: 100%; }

.wrapper > p, .wrapper > h1 { margin: 1.5rem 0; text-align: center; }
.wrapper > h1 { letter-spacing: 3px; }
.accordion { background-color: #88ff88; color: rgba(0, 0, 0, 0.8); cursor: pointer; font-size: 15px; width: 100%; border: none; outline: none; transition: 0.4s; display: flex; justify-content: space-between; align-items: center; border-radius: 0px; }
.accordion i { font-size: 1.6rem; }
.pannel { padding: 0 1rem 1rem 1rem; background-color: #f7fff7; overflow: hidden; display: block; }
.pannel p { color: rgba(0, 0, 0, 0.7); font-size: 1.2rem; line-height: 1.4; }
.faq-faq { border: 1px solid #009900; margin: 10px 0; }
.fa-chevron-down:before { content: "\f078"; }
.accordion i { font-size: 1.6rem; }
.fa-solid, .fas { font-weight: 900; }
.fa-classic, .fa-regular, .fa-solid, .far, .fas { font-family: "Font Awesome 6 Free"; }
.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; }
code { color: #d6336c; font-size: 0.9em; padding: 3px 5px; border-radius: 3px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.contact123 p { text-align: center; font-size: 16px; color: #666; }
.contact-info { display: flex; justify-content: space-between; margin: 30px 0; flex-wrap: wrap; }
.contact-box { flex: 1; min-width: 250px; padding: 20px; text-align: center; background: #f9f9f9; border-radius: 8px; margin: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out; }
.contact-box:hover { transform: translateY(-5px); }
.contact-box h2 { color:#009900; font-size: 18px; margin-bottom: 8px; }
.contact-box p { font-size: 14px; color: #555; }
.contact-form { margin-top: 20px; }
.contact123 form { margin-left: 20px; } .contact123 form { display: flex; flex-direction: column; }
.contact123 label { font-weight: bold; margin-top: 10px; font-size: 14px; color:rgb(3, 61, 3); }
.contact123 input:focus, .contact123 textarea:focus { border-color:#009900; outline: none; }
.contact123 textarea { resize: vertical; height: 150px; } .contact123 input, .contact123 textarea { padding: 12px; margin-top: 5px; border: 2px solid #ddd; border-radius: 6px; width: 97%; font-size: 14px; transition: 0.3s; }
.submit-button { margin-top: 15px; padding: 12px; border: none; color: white; font-size: 16px; cursor: pointer; border-radius: 6px; transition: background 0.3s, transform 0.2s; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 54px; width: auto; background: linear-gradient(45deg, rgb(98, 192, 98), #009641); color: white; font-weight: bold; font-size: 18px; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); transition: 0.3s; }
.submit-button :hover { background:#009900; transform: scale(1.05); }
.message { display: none; margin-top: 20px; padding: 15px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 6px; text-align: center; animation: fadeIn 0.5s; }
@media (max-width: 768px) { .contact-info { flex-direction: column; align-items: center; } .contact-info { width: 90%; } .contact-form { width: 90%; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.submit123 h1 { text-align: center; font-size: 32px; color: #1e3c72; margin-bottom: 10px; }
.submit123 p { text-align: center; font-size: 16px; color: #666; }
.submit123 form { display: flex; flex-direction: column; }
.submit123 label { font-weight: bolder; margin-top: 5px; font-size: 15px; color: #000000; }
.submit123 input, .submit123 select, .submit123 textarea { padding: 6px; margin-top: 5px; border: 2px solid #ddd; border-radius: 2px; width: 97%; font-size: 14px; transition: 0.3s; }
.submit123 input:focus, .submit123 select:focus, .submit123 textarea:focus { border-color:rgb(3, 61, 3); outline: none; }
.submit123 textarea { resize: vertical; height: 150px; }
.submit123 button:hover { background:rgb(3, 84, 3); transform: scale(1.05); }
.submit123 .message { display: none; margin-top: 20px; padding: 15px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 6px; text-align: center; animation: fadeIn 0.5s; }
.submit123 .tags-container { display: flex; flex-wrap: wrap; gap: 5px; border-radius: 2px; }
.submit123 .tag { background: #1e3c72; color: white; padding: 6px 10px; border-radius: 12px; display: flex; align-items: center; }
.submit123 .tag span { margin-left: 6px; cursor: pointer; font-weight: bold; } 
.submit123 .file-upload { padding: 12px; padding-top: 50px; padding-bottom: 50px; border: 2px dashed #aaa; text-align: center; cursor: pointer; border-radius: 6px; margin-top: 5px; transition: border-color 0.3s ease-in-out; }
.submit123 .file-upload:hover, .submit123 .file-upload.dragover { border-color: #1e3c72; background: #f4f4f4; }
.submit123 .file-upload p { margin: 0; font-size: 14px; color: #666; }
.submit123 .file-upload input { display: none; }
.submit123 .file-name { margin-top: 5px; font-size: 14px; color: #555; font-weight: bold; }
.submit123 .message { display: none; margin-top: 20px; padding: 15px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 6px; text-align: center; }
.submit123 .file-name { margin-top: 5px; font-size: 14px; color: #555; }
@media (max-width: 768px) { .submit123 .tags-container { min-height: 60px; } }
.file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; }