:root{--foreground: #1d181e;--background: #f6f0fa;--light: #ffffff;--subtle: #d7d7d7;--primary: var(--foreground);--primary-subtle: hsl(from var(--primary) h s calc(l/.4) );--secondary: #279e89;--secondary-subtle: hsl(from var(--secondary) h s calc(l*1.3) );--tertiary: #dc1830;--tertiary-subtle: hsl(from var(--tertiary) h s calc(l*1.9) );--highlight: #7373dd;--danger: #ac3737;--spacing-s: .5rem;--spacing: 1rem;--spacing-m: 2rem;--padding: 1rem;--radius: .5rem;--radius-m: 1rem;--shadow: 0 5px 10px #bebebebe;--border: solid 1px var(--subtle)}html{margin-left:calc(100vw - 100%);margin-right:0}body{background-color:var(--background);font-family:Outfit,sans-serif;font-weight:300;color:var(--foreground)}ul,li,menu,button{all:unset}a{text-decoration:none;color:inherit}hr{border-block-color:var(--subtle);border-width:0;border-bottom-width:1px;width:100%}input,textarea{border-radius:var(--radius);border:none;outline:solid 1px var(--subtle);padding:var(--padding);font-family:monospace;background-color:var(--light);transition:all .2s}input:focus,textarea:focus{scale:1.02;outline:solid 1px var(--highlight);box-shadow:var(--shadow)}input:disabled,textarea:disabled{background-color:var(--subtle)}.main-layout{min-width:300px;max-width:720px;margin:auto}.main-layout .page-wrapper{margin-top:var(--spacing-m);min-height:500px}.main-navbar{display:flex;justify-content:space-between;align-items:center}.main-navbar menu{display:flex;gap:1rem}.article-list{display:flex;flex-direction:column;gap:var(--spacing)}.hero-wrapper{height:300px;overflow:hidden;border-radius:var(--radius-m);background-color:var(--subtle)}.hero-wrapper img{object-fit:cover;width:100%;height:100%}.content-wrapper,.layout-wrapper{display:flex;flex-direction:column;gap:var(--spacing)}.layout-wrapper{gap:var(--spacing-m)}.spinner{width:48px;height:48px;border:3px solid var(--subtle);border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite;margin:auto}.spinner:after{content:"";box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:3px solid transparent;border-bottom-color:var(--tertiary)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.comment-card header{display:flex;justify-content:space-between;align-items:center}.comment-card header .author{font-weight:700}.comment-card header .date{color:var(--subtle)}.comment-card footer{display:flex;justify-content:end;align-items:center;gap:var(--spacing)}.card{background-color:var(--light);border:solid 1px var(--subtle);border-radius:var(--radius-m);padding:var(--padding)}.comment-form footer{display:flex;justify-content:end}.loader{--height: 2rem;display:grid;height:var(--height);width:calc(var(--height) * 2.5);place-content:center;overflow:hidden}.loader div{scale:.5;height:15px;aspect-ratio:4;--_g: no-repeat radial-gradient(farthest-side, var(--subtle) 90%, #0000);background:var(--_g) left,var(--_g) right;background-size:25% 100%;display:grid}.loader div:before,.loader div:after{content:"";height:inherit;aspect-ratio:1;grid-area:1/1;margin:auto;border-radius:50%;transform-origin:-100% 50%;background:var(--subtle);animation:l49 1s infinite linear}.loader div:after{transform-origin:200% 50%;--s: -1;animation-delay:-.5s}@keyframes l49{58%,to{transform:rotate(calc(var(--s, 1) * 1turn))}}.topics-wrapper{display:flex;flex-wrap:wrap;gap:var(--spacing)}.topics-wrapper li{flex-grow:1}.topics-wrapper li>a{min-width:300px;height:100px;position:relative;display:grid;place-content:center;overflow:hidden;border-radius:var(--radius-m);background-color:var(--secondary-subtle);border:solid 1px var(--subtle)}.topics-wrapper li>a,.topics-wrapper li>a span,.topics-wrapper li>a .overlay{transition:all .2s ease-in-out}.topics-wrapper li>a span{font-size:2rem;text-transform:uppercase;font-weight:700;letter-spacing:.1rem}.topics-wrapper li>a .overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;font-weight:700;opacity:0;background-color:var(--secondary);font-size:1.5rem;text-align:center}.topics-wrapper li>a:hover span{opacity:0}.topics-wrapper li>a:hover .overlay{opacity:1}.error-card{margin:auto;text-align:center}.error-card .message{font-size:1.2rem}.error-card .details{font-size:.8rem}.error-card footer{display:flex;gap:var(--spacing)}.login-form{margin:auto;width:300px}.login-form h1{text-align:center}.login-form .error{font-weight:700;color:var(--danger);margin:0}.login-form footer{display:flex;justify-content:end}.code-info{--deafult-color: var(--secondary);margin:auto;border:solid 3px var(--deafult-color);border-radius:var(--radius);padding:var(--padding);color:var(--deafult-color);background-color:hsl(from var(--deafult-color) h s l / .1);text-wrap:wrap;line-height:1.2rem}.code-info li{display:list-item;list-style-type:none}:root{--btn-default-bg: var(--primary);--btn-default-text: var(--light);--btn-default-weight: 500;--btn-hover-bg: var(--primary-subtle);--btn-hover-text: var(--light);--btn-hover-weight: 500;--btn-active-bg: var(--primary);--btn-active-text: var(--light);--btn-active-weight: 500;--btn-height: 2.5rem;--btn-width: auto;--btn-padding: var(--padding);--btn-radius: var(--radius);--btn-font-size: 1rem;--btn-scale: 1;--btn-border: none}.btn{height:calc(var(--btn-height) * var(--btn-scale));width:calc(var(--btn-width) * var(--btn-scale));display:grid;place-content:center;box-sizing:border-box;padding:calc(var(--btn-padding) / 2 * var(--btn-scale)) calc(var(--btn-padding) * var(--btn-scale));border:var(--btn-border);background-color:var(--btn-default-bg);color:var(--btn-default-text);font-weight:var(--btn-default-weight);font-size:calc(var(--btn-font-size) * var(--btn-scale));cursor:pointer;transition:all .2s}.btn:hover{background-color:var(--btn-hover-bg);color:var(--btn-hover-text);font-weight:var(--btn-hover-weight)}.btn.btn-active{background-color:var(--btn-active-bg);color:var(--btn-active-text);font-weight:var(--btn-active-weight)}.btn:disabled{background-color:var(--subtle);color:var(--light)}.btn-secondary{--btn-default-bg: var(--light);--btn-default-text: var(--foreground);--btn-hover-bg: var(--secondary-subtle);--btn-hover-text: var(--foreground);--btn-active-bg: var(--secondary);--btn-active-text: var(--light)}.btn-tertiary{--btn-default-bg: var(--tertiary-subtle);--btn-default-text: var(--foreground);--btn-hover-bg: var(--tertiary);--btn-hover-text: var(--light);--btn-active-bg: var(--tertiary);--btn-active-text: var(--light)}.btn-square{--btn-width: var(--btn-height)}.btn-rounded{border-radius:calc(var(--btn-radius) * var(--btn-scale))}.btn-pill{border-radius:999px}.btn-small{--btn-scale: .8}.btn-border{--btn-border: var(--border)}.btn-scale-on-click:active{scale:.95}.vote-wrapper{display:flex;align-items:center;border-radius:999px;padding:calc(var(--padding) / 2) var(--padding)}.vote-wrapper span{font-weight:500;width:2rem;text-align:center}.vote-wrapper button{cursor:pointer}.vote-wrapper.positive,.vote-wrapper.positive svg,.vote-wrapper.negative,.vote-wrapper.negative svg{color:var(--light)}.vote-wrapper.positive{background-color:var(--secondary)}.vote-wrapper.negative{background-color:var(--danger)}.icon-btn{display:flex;justify-content:center;align-items:center;background:none;border:none;color:var(--foreground)}.icon-btn:disabled{color:var(--subtle)}.vote-stat{height:1rem;display:flex;align-items:center;gap:calc(var(--spacing) / 2);padding:calc(var(--padding) / 2) var(--padding);border-radius:2rem;border:none;font-weight:700;color:var(--light);background-color:var(--secondary)}.vote-stat svg{width:100%;height:100%}.article-meta{display:flex;justify-content:space-between;align-items:center}.article-meta strong{color:var(--secondary)}.article-meta .details{font-size:.9rem}.article-card{height:500px;display:flex;flex-direction:column;gap:var(--spacing);transition:all .2s}.article-card .image-wrapper{height:66%;border-radius:var(--radius);overflow:hidden;background-color:var(--subtle)}.article-card .image-wrapper img{object-fit:cover;width:100%;height:100%}.article-card title{font-size:2rem;margin:var(--spacing) 0}.article-card:hover{scale:1.01;box-shadow:0 5px 10px #bebebebe}.pagination{display:flex;justify-content:center;gap:var(--spacing)}.pagination .pages{display:flex;border:var(--border);border-radius:var(--radius);overflow:hidden}.pagination .pages .btn:not(:last-child){border-right:var(--border)}.sort-bar{flex-direction:column}.sort-bar,.sort-bar header,.sort-bar ul{display:flex}.sort-bar header{background-color:var(--light);border-radius:999px;border:var(--border);overflow:hidden}.sort-bar header .btn{border-right:var(--border)}.sort-bar ul{margin-top:var(--spacing-s);gap:var(--spacing-s)}