@import"https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Cambo&family=Chivo:ital,wght@0,100..900;1,100..900&display=swap";:root{--font-family: Chivo;--line-height: 1.5;--font-weight: 400;--bg-color: #e1e7f0;--text-color: #111111;--button-bg: #c0c8e0;--button-text-color: #1a1a1a;--button-hover-border: #005fc4;--card-bg: #fbfcfdfa;--header-bg: #dae3f5;font-family:var(--font-family);line-height:var(--line-height);font-weight:var(--font-weight);color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.dark-theme{--bg-color: #081329;--text-color: rgb(255, 255, 255);--button-bg: #060e1f;--button-text-color: rgba(255, 255, 255, .87);--button-hover-border: #646cff;--card-bg: #03060ef3;--header-bg: #060e1f;color-scheme:dark}body{background-color:var(--bg-color);color:var(--text-color)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--button-bg);color:var(--button-text-color);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--button-hover-border)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.article-card,.comment-card,.new-comment-form{background-color:var(--card-bg);color:var(--text-color)}.font-body{font-family:Cambo}*{margin:0;padding:0;box-sizing:border-box}html,body{display:flex;margin:0;box-sizing:border-box;overflow-x:hidden;justify-content:center;align-items:center;padding-top:30px;background-color:var(--bg-color);color:var(--text-color)}button{background-color:var(--button-bg)}.article-card,.comment-card,.new-comment-form,.detailed-article-card{background-color:var(--card-bg);color:var(--text-color)}@media (max-width: 400px){html,body{padding-top:35px}}ul{list-style:none}header{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;width:100%;height:60px;padding:10px;z-index:1000;background-color:var(--header-bg)}h1{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;white-space:nowrap;color:var(--text-color);text-shadow:3px 3px 0 #007bff;font-size:2rem}#toggle-sidebar{display:none}.toggle{position:relative;width:40px;height:40px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition-duration:.5s}.bars{width:100%;height:4px;background-color:#007bff;border-radius:4px}#bar2{transition-duration:.8s}#bar1,#bar3{width:70%}#toggle-sidebar:checked+.toggle .bars{position:absolute;transition-duration:.5s}#toggle-sidebar:checked+.toggle #bar2{transform:scaleX(0);transition-duration:.5s}#toggle-sidebar:checked+.toggle #bar1{width:100%;transform:rotate(45deg);transition-duration:.5s}#toggle-sidebar:checked+.toggle #bar3{width:100%;transform:rotate(-45deg);transition-duration:.5s}#toggle-sidebar:checked+.toggle{transition-duration:.5s;transform:rotate(180deg)}#toggle-theme{position:relative;width:100px;height:50px;--light: #dae3f5;--dark: #060e1f;--link: rgb(27, 129, 112);--link-hover: rgb(24, 94, 82)}.switch-label{position:absolute;width:100%;height:50px;border-radius:25px;cursor:pointer;border:3px solid #007bff}.checkbox{position:absolute;display:none}.slider{position:absolute;width:100%;height:100%;border-radius:25px;-webkit-transition:.3s;transition:.3s}.checkbox:checked~.slider{background-color:var(--light)}.slider:before{content:"";position:absolute;top:10px;left:10px;width:25px;height:25px;border-radius:50%;-webkit-box-shadow:inset 12px -4px 0px 0px var(--light);box-shadow:inset 12px -4px 0 0 var(--light);background-color:var(--dark);-webkit-transition:.3s;transition:.3s}.checkbox:checked~.slider:before{-webkit-transform:translateX(50px);-ms-transform:translateX(50px);transform:translate(50px);background-color:var(--dark);-webkit-box-shadow:none;box-shadow:none}@media (max-width: 400px){h1{font-size:1.4rem;white-space:normal;text-align:center;width:100%;position:static;transform:none;margin-top:10px}header{flex-wrap:wrap;height:auto}}.sidebar{position:fixed;left:0;top:0;width:250px;height:100vh;background:var(--header-bg);transition:transform .3s ease-in-out;padding-top:100px;padding-left:2%;z-index:100}.sidebar.closed{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar button{width:70%;padding:10px;margin:10px 0;background-color:#007bff;color:#fff;font-size:16px;border:none;border-radius:5px;text-align:center;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.sidebar button:hover{background-color:#005fc4;transform:scale(1.05)}@media (max-width: 768px){.sidebar{width:200px;padding:150px 15px}.sidebar button{font-size:14px}}.skeleton{background:linear-gradient(90deg,#e0e0e0 25%,#f0f0f0 37%,#e0e0e0 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.skeleton-title{height:1.2rem;width:80%;margin:.2rem auto}.skeleton-title.short{height:1.2rem;width:50%;margin:.2rem auto}.skeleton-author{height:1rem;width:40%;margin:.3rem auto}.skeleton-text{height:1rem;width:50%;margin:.2rem auto}.skeleton-image{width:100%;height:180px;margin-bottom:.5rem;border-radius:8px}@media (min-width: 768px){.skeleton-image{height:120px}}.wheel-and-hamster{--dur: 1s;position:relative;width:12em;height:12em;font-size:14px}.wheel,.hamster,.hamster div,.spoke{position:absolute}.wheel,.spoke{border-radius:50%;top:0;left:0;width:100%;height:100%}.wheel{background:radial-gradient(100% 100% at center,#9990 47.8%,#999 48%);z-index:2}.hamster{animation:hamster var(--dur) ease-in-out infinite;top:50%;left:calc(50% - 3.5em);width:7em;height:3.75em;transform:rotate(4deg) translate(-.8em,1.85em);transform-origin:50% 0;z-index:1}.hamster__head{animation:hamsterHead var(--dur) ease-in-out infinite;background:#f48c25;border-radius:70% 30% 0 100%/40% 25% 25% 60%;box-shadow:0 -.25em #facc9e inset,.75em -1.55em #fce6cf inset;top:0;left:-2em;width:2.75em;height:2.5em;transform-origin:100% 50%}.hamster__ear{animation:hamsterEar var(--dur) ease-in-out infinite;background:#fbb6b6;border-radius:50%;box-shadow:-.25em 0 #f48c25 inset;top:-.25em;right:-.25em;width:.75em;height:.75em;transform-origin:50% 75%}.hamster__eye{animation:hamsterEye var(--dur) linear infinite;background-color:#000;border-radius:50%;top:.375em;left:1.25em;width:.5em;height:.5em}.hamster__nose{background:#f98686;border-radius:35% 65% 85% 15%/70% 50% 50% 30%;top:.75em;left:0;width:.2em;height:.25em}.hamster__body{animation:hamsterBody var(--dur) ease-in-out infinite;background:#fce6cf;border-radius:50% 30%/15% 60% 40% 40%;box-shadow:.1em .75em #f48c25 inset,.15em -.5em #facc9e inset;top:.25em;left:2em;width:4.5em;height:3em;transform-origin:17% 50%;transform-style:preserve-3d}.hamster__limb--fr,.hamster__limb--fl{clip-path:polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);top:2em;left:.5em;width:1em;height:1.5em;transform-origin:50% 0}.hamster__limb--fr{animation:hamsterFRLimb var(--dur) linear infinite;background:linear-gradient(#facc9e 80%,#f98686 80%);transform:rotate(15deg) translateZ(-1px)}.hamster__limb--fl{animation:hamsterFLLimb var(--dur) linear infinite;background:linear-gradient(#fce6cf 80%,#fbb6b6 80%);transform:rotate(15deg)}.hamster__limb--br,.hamster__limb--bl{border-radius:.75em .75em 0 0;clip-path:polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);top:1em;left:2.8em;width:1.5em;height:2.5em;transform-origin:50% 30%}.hamster__limb--br{animation:hamsterBRLimb var(--dur) linear infinite;background:linear-gradient(#facc9e 90%,#f98686 90%);transform:rotate(-25deg) translateZ(-1px)}.hamster__limb--bl{animation:hamsterBLLimb var(--dur) linear infinite;background:linear-gradient(#fce6cf 90%,#fbb6b6 90%);transform:rotate(-25deg)}.hamster__tail{animation:hamsterTail var(--dur) linear infinite;background:#fbb6b6;border-radius:.25em 50% 50% .25em;box-shadow:0 -.2em #f98686 inset;top:1.5em;right:-.5em;width:1em;height:.5em;transform:rotate(30deg) translateZ(-1px);transform-origin:.25em .25em}.spoke{animation:spoke var(--dur) linear infinite;background:radial-gradient(100% 100% at center,#999 4.8%,#9990 5%),linear-gradient(#8c8c8c00 46.9%,#a6a6a6 47%,#a6a6a6 52.9%,#a6a6a600 53%) 50% 50% / 99% 99% no-repeat}@keyframes hamster{0%,to{transform:rotate(4deg) translate(-.8em,1.85em)}50%{transform:rotate(0) translate(-.8em,1.85em)}}@keyframes hamsterHead{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(8deg)}}@keyframes hamsterEye{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(0)}}@keyframes hamsterEar{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(12deg)}}@keyframes hamsterBody{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-2deg)}}@keyframes hamsterFRLimb{0%,25%,50%,75%,to{transform:rotate(50deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-30deg) translateZ(-1px)}}@keyframes hamsterFLLimb{0%,25%,50%,75%,to{transform:rotate(-30deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(50deg)}}@keyframes hamsterBRLimb{0%,25%,50%,75%,to{transform:rotate(-60deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(20deg) translateZ(-1px)}}@keyframes hamsterBLLimb{0%,25%,50%,75%,to{transform:rotate(20deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-60deg)}}@keyframes hamsterTail{0%,25%,50%,75%,to{transform:rotate(30deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(10deg) translateZ(-1px)}}@keyframes spoke{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}#article-list{width:100%;max-width:100vw;margin:0 auto;padding:0 15px;box-sizing:border-box}#article-list ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;padding:0;margin:0 auto;width:100%;max-width:100vw}.article-card{display:flex;flex-direction:column;padding:16px;width:100%;min-width:0;text-align:center}.article-card img{max-width:100%;height:auto;border-radius:8px;padding:2% 0}.article-card p{padding:.3%}.article-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #00000026}.article-header{display:flex;position:relative;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:0 1rem;margin-bottom:1rem}.article-header h2{margin:0;position:absolute;left:50%;transform:translate(-50%)}.filter-bar{display:flex;justify-content:flex-end;gap:1rem;margin-bottom:1rem;width:100%;align-items:center}.filter-bar label{font-weight:700}.filter-bar select{margin-left:.5rem;padding:5px}@media (max-width: 768px){.article-header{flex-direction:column;align-items:center;text-align:center}.article-header h2{position:static;transform:none;margin-bottom:.5rem}.filter-bar{justify-content:center;text-align:center}}.detailed-article-card{display:block;margin:0 auto;padding:1%;width:100vw;text-align:center}.detailed-article-card img{width:98vw;max-width:1200px}.detailed-article-card p{width:95vw;margin:0 auto;padding:0 10px;text-align:left}.detailed-article-card .article-right{text-align:right}#comments-list{display:grid;gap:5px}.comment-card{width:95vw;max-width:1200px;margin:0 auto;padding:5px;text-align:right}.comment-left{text-align:left;font-size:1.2rem;padding-bottom:1.5px}.comment-center{text-align:center}.comment-right{text-align:right;font-style:italic}.comment-delete-button{color:var(--text-color);background-color:var(--button-bg);border:2px solid red;padding:5px 10px;border-radius:5px;transition:background-color .3s;margin-left:auto}.comment-delete-button:hover{background-color:#8b0000;color:#fff;border:2px solid red}.voting{text-align:right;margin:0;padding-right:1%}.upvote-button{color:var(--text-color);background-color:var(--button-bg);border:2px solid green}.upvote-button:hover{color:green}.downvote-button{color:var(--text-color);background-color:var(--button-bg);border:2px solid red;margin-left:5px}.downvote-button:hover{color:red}.new-comment-form{height:auto;margin:1% auto;padding:2%;max-width:98%}.new-comment-form form{display:flex;flex-direction:column;gap:10px}.new-comment-form label{display:block;font-size:18px;font-weight:700}.new-comment-form textarea{width:100%;height:60px;padding:10px;font-size:.9rem;resize:vertical}.new-comment-form button{width:50%;max-width:160px;padding:10px 20px;font-size:16px;align-self:flex-end}.not-found{width:100vw;display:flex;justify-content:center;align-items:center;text-align:center;overflow:hidden;height:calc(100vh - 60px)}.error{text-align:center;font-size:2rem;font-weight:700}.comment-avatar{width:50px;height:50px;border-radius:25%;object-fit:cover}.loading-container{height:100vh;width:100vw;background-color:var(--bg-color);display:flex;align-items:center;justify-content:center;z-index:99;position:relative}.modal-overlay{position:fixed;top:0;left:0;height:100vh;width:100vw;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:999}.modal{background-color:var(--card-bg);color:var(--text-color);padding:2rem;border-radius:12px;width:90%;max-width:500px;box-shadow:0 10px 30px #0003;animation:fadeInScale .3s ease}@keyframes fadeInScale{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.modal h2{margin-bottom:1rem;text-align:center;font-size:1.8rem}.modal form{display:flex;flex-direction:column;gap:1rem}.modal form label{font-weight:700}.modal form input,.modal form textarea{padding:10px;border-radius:6px;border:1px solid #ccc;background-color:var(--bg-color);color:var(--text-color)}.modal form textarea{resize:vertical;min-height:100px}.modal form button[type=submit]{background-color:var(--button-bg);color:var(--text-color);padding:.7rem;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:background-color .3s ease}.modal form button[type=submit]:hover{background-color:#3f96f3}.pagination{display:flex;justify-content:center;gap:1rem;margin:1rem}.pagination button{padding:.5rem 1rem;background-color:var(--button-bg)}.article-delete-button{color:var(--text-color);background-color:var(--button-bg);border:2px solid red;padding:5px 10px;border-radius:5px;transition:background-color .3s;margin-left:auto}.article-delete-button:hover{background-color:#8b0000;color:#fff;border:2px solid red}select{background-color:var(--button-bg)}
