*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;line-height:1.5}img{max-width:100%;display:block}#root{max-width:800px;margin:0 auto;padding:1rem}h1{font-size:1.8rem;margin:.5rem 0;line-height:1.2}header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}.logo{width:60px}#login-info{font-size:.8rem;text-align:right;padding:0;width:100%}#login-info p{margin:0}.nav-list ul{display:flex;gap:1.5rem;list-style:none;padding:.75rem 0;margin:0 0 1rem;border-bottom:1px solid rgb(220,220,220)}.nav-link{text-decoration:none;font-size:1.1rem;color:#000}.nav-link:hover{text-decoration:underline}.articles-main{max-width:800px;margin:0 auto}.articles-main a{text-decoration:none;color:#000}.sort-controls{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.sort-controls select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.9rem;color:#000;padding:.5rem 2.25rem .5rem 1rem;border:1px solid rgb(210,210,210);border-radius:999px;background-color:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb(64,100,165)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;background-size:.9rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}.sort-controls select:hover{border-color:#4064a5}.sort-controls select:focus-visible{outline:none;border-color:#4064a5;box-shadow:0 0 0 3px #4064a540}.art-card{display:grid;grid-template-columns:1fr;gap:1rem;padding:1rem;margin-bottom:1rem;background-color:#f3f3f3;border-radius:.7rem}.art-image img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:.5rem}.art-info{display:flex;flex-direction:column;align-items:stretch;min-width:0}.art-topic,.topic-card,.topic-coding{--topic-bg: rgb(223, 232, 247);--topic-fg: rgb(64, 100, 165)}.topic-football{--topic-bg: rgb(220, 243, 227);--topic-fg: rgb(31, 122, 68)}.topic-cooking{--topic-bg: rgb(251, 225, 225);--topic-fg: rgb(180, 43, 43)}.art-topic{align-self:flex-start;padding:.15rem .6rem;border-radius:999px;background-color:var(--topic-bg);color:var(--topic-fg);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.art-released{text-align:right;font-size:.8rem}.art-title{text-align:left;font-family:Georgia,Times New Roman,Times,serif;font-style:italic;font-size:1.1rem;overflow-wrap:break-word}.art-author{text-align:left;margin-bottom:.5rem;font-size:.8rem;color:#555}.art-body{margin:.75rem 0}.art-comment-count,.art-votes{text-align:right;font-size:.8rem}.art-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem}.art-stats{display:flex;flex-direction:column}.thumb-up,.thumb-down{border:0;font-size:1.4rem;padding:.4rem .6rem;margin-right:.5rem;border-radius:.5rem;background-color:#4064a5;color:#fff;cursor:pointer}.thumb-up:hover,.thumb-down:hover{background-color:#2c4b82}.comments{display:flex;flex-direction:column}.add-comment{align-self:flex-end;font-size:.9rem;background-color:#4064a5;border:0;border-radius:.7rem;padding:.5rem 1rem;margin-bottom:1rem;color:#fff;cursor:pointer}.comment-form{display:flex;flex-direction:column;gap:.75rem;width:100%;align-self:flex-end;padding:1rem;margin-bottom:1rem;background-color:#f3f3f3;border-radius:.7rem;font-size:.9rem}.comment-form p{margin:0;font-size:.8rem;color:#4064a5}.comment-form h3{margin:0}.comment-form label{display:flex;flex-direction:column;gap:.25rem}.comment-form input{width:100%;padding:.5rem .75rem;font:inherit;font-size:1rem;border:1px solid rgb(210,210,210);border-radius:.5rem;background-color:#fff}.comment-form input:focus-visible{outline:none;border-color:#4064a5;box-shadow:0 0 0 3px #4064a540}.form-actions{display:flex;justify-content:flex-end;gap:.5rem}.submit-button,.cancel-button{font:inherit;font-size:.9rem;padding:.5rem 1rem;border-radius:.7rem;cursor:pointer}.submit-button{background-color:#4064a5;border:1px solid rgb(64,100,165);color:#fff}.submit-button:hover{background-color:#2c4b82}.cancel-button{background-color:#fff;border:1px solid rgb(210,210,210);color:#000}.cancel-button:hover{border-color:#4064a5}.comment-card{font-size:.85rem;width:100%;align-self:flex-end;display:grid;gap:.6rem;padding:1rem;margin-bottom:1rem;background-color:#f3f3f3;border-radius:.7rem;overflow-wrap:break-word}.comment-author{display:flex;align-items:center;gap:.5rem;font-weight:700}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background-color:#fff;border:1px solid rgb(210,210,210)}.comment-avatar-fallback{display:flex;align-items:center;justify-content:center;background-color:#dfe8f7;color:#4064a5;text-transform:uppercase}.comment-votes,.comment-released{text-align:right;font-size:.8rem}.delete-button{font:inherit;font-size:.8rem;padding:.3rem .9rem;border:1px solid rgb(180,43,43);border-radius:.7rem;background-color:#fff;color:#b42b2b;cursor:pointer}.delete-button:hover{background-color:#b42b2b;color:#fff}.delete-button:focus-visible{outline:none;box-shadow:0 0 0 3px #b42b2b40}.topic-card-link,.topic-card a,.topic-card{text-decoration:none;color:inherit}.topic-card{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;margin-bottom:1rem;background-color:#f3f3f3;border-left:6px solid var(--topic-bg);border-radius:.7rem;cursor:pointer}.topic-card-link:hover .topics-slug{text-decoration:underline}.topics-slug{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--topic-fg)}.topic-description{font-size:.9rem;color:#666}@media(min-width:600px){#root{padding:2rem}h1{font-size:3rem}.logo{width:100px}.nav-list ul{gap:2rem}.nav-link{font-size:1.2rem}.art-card{grid-template-columns:150px 1fr}.art-image img{aspect-ratio:1 / 1}.single-article .art-card{grid-template-columns:1fr}.single-article .art-image img{aspect-ratio:16 / 9}.comment-card,.comment-form{width:75%}}