@import"/css/base.css";@import"/css/components/navbar.css";@import"/css/components/footer.css";section#articles{color:var(--c-foreground);text-align:center;padding:40px 20px}section#articles h1{font-size:2.5em;margin-bottom:30px}section#articles .articles-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(500px, 1fr));gap:20px;justify-content:center;padding:20px}section#articles .article-card{background-color:var(--c-background-dark);border-radius:10px;padding:20px;text-align:left;box-shadow:0px 5px 15px rgba(0,0,0,.1);transition:transform .3s ease-in-out}section#articles .article-card a{text-decoration:none;color:inherit;display:block}section#articles .article-card h2{font-size:1.8em;margin-bottom:10px;margin-top:0px}section#articles .article-card p{font-size:1.2em;color:var(--c-secondary-2);margin-bottom:1rem;margin-top:0}section#articles .article-card .tags{display:flex;flex-wrap:wrap;gap:5px}section#articles .article-card .tags .tag{background:var(--c-primary-1);color:var(--c-foreground);padding:5px 10px;border-radius:5px;font-size:.9em}section#articles .article-card:hover{transform:scale(1.05)}section#articles .filter-section{display:flex;flex-direction:column;margin-bottom:30px}section#articles .filter-section .search-and-sort{display:flex;flex-direction:row;gap:20px;align-items:center;justify-content:center}section#articles .filter-section .search-and-sort .search-btn{padding:12px 28px;font-size:1.1em;border-radius:8px;border:none;background:var(--c-primary-1);color:var(--c-foreground);font-weight:500;cursor:pointer;transition:background .2s,box-shadow .2s;box-shadow:0 2px 8px rgba(0,0,0,.06)}section#articles .filter-section .search-and-sort .search-btn:hover,section#articles .filter-section .search-and-sort .search-btn:focus{background:var(--c-primary-1-hover);outline:none}section#articles .filter-section .search-and-sort input[type=text]{flex:1;max-width:max(90%,400px);padding:15px 20px;font-size:1.2em;border-radius:8px;border:1.5px solid var(--c-primary-1);background:var(--c-background);color:var(--c-foreground);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:border-color .2s,box-shadow .2s}section#articles .filter-section .search-and-sort input[type=text]::placeholder{color:var(--c-secondary-2);opacity:1}section#articles .filter-section .search-and-sort input[type=text]:focus{outline:none;border-color:var(--c-primary-1-hover);box-shadow:0 4px 16px rgba(0,0,0,.1)}section#articles .filter-section .search-and-sort select.sort-dropdown{padding:12px 16px;font-size:1.1em;border-radius:8px;border:1.5px solid var(--c-secondary-1);background:var(--c-background-dark);color:var(--c-foreground);transition:border-color .2s}section#articles .filter-section .search-and-sort select.sort-dropdown:focus{outline:none;border-color:var(--c-secondary-1-hover)}section#articles .pagination{display:flex;justify-content:center;align-items:center;gap:24px;margin:40px 0 60px 0;font-size:1.2em}section#articles .pagination a{padding:10px 22px;border-radius:8px;background:var(--c-primary-1);color:var(--c-foreground);text-decoration:none;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:background .2s,box-shadow .2s}section#articles .pagination a:hover,section#articles .pagination a:focus{background:var(--c-primary-1-hover);outline:none}section#articles .pagination span{font-weight:600;color:var(--c-secondary-2);padding:0 10px}@media(max-width: 600px){section#articles .filter-section .search-and-sort{flex-direction:column;gap:12px}section#articles .filter-section .search-and-sort input[type=text],section#articles .filter-section .search-and-sort select.sort-dropdown{width:90%;max-width:90%}section#articles .filter-section .search-and-sort .search-btn{width:100%}section#articles .pagination{flex-direction:column;gap:12px;font-size:1em;margin-left:20px;margin-right:20px}section#articles .pagination a{width:100%;text-align:center}}section{display:flex;flex-direction:column;min-height:60vh;width:100%;margin-right:auto;margin-left:auto}@media(max-width: 576px){section{width:calc(100% - 40px);padding:0 20px}}@media(min-width: 576px){section{max-width:540px}}@media(min-width: 768px){section{max-width:720px}}@media(min-width: 992px){section{max-width:960px}}@media(min-width: 1200px){section{max-width:1140px}}@media(min-width: 1400px){section{max-width:1320px}}@media(min-width: 1700px){section{max-width:1500px}}/*# sourceMappingURL=index.css.map */