:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}body{background:bisque;font-size:16px}#root{background-color:bisque;width:100%}header{position:fixed;top:0;left:0;width:100%;height:70px;background-color:#034003;color:bisque;display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:0 20px;z-index:100}header h1{font-size:1.5rem}.desktop-nav{display:none;position:static;width:auto;height:auto;background:transparent;padding:0}.desktop-nav ul{display:flex;gap:30px;list-style:none}.desktop-nav a{color:bisque;text-decoration:none;font-size:1rem;transition:opacity .2s}.desktop-nav a:hover{opacity:.8}.mobile-nav{position:fixed;left:0;bottom:0;width:100%;height:60px;background-color:#034003;display:flex;align-items:center;justify-content:center;padding:0 20px;z-index:100}.mobile-nav ul{width:100%;max-width:600px;display:flex;justify-content:space-between;list-style:none}.mobile-nav a{color:bisque;text-decoration:none}.userBox{border:1px solid bisque;border-radius:5px}.userBox>a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;background-color:#ffffff1a;border:1px solid bisque;padding:6px 10px;cursor:pointer;transition:background-color .2s ease}.userBox a:hover{background-color:#ffffff40}.userBox img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid bisque}.userBox p{color:bisque;font-size:11px}.column{width:100%;max-width:1100px;display:flex;flex-direction:column;align-items:stretch;height:auto;margin:90px auto 80px;padding:0 10px}.homeBody{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.articleList{display:flex;flex-direction:column;width:100%;gap:10px;min-width:0}.articleCard{width:100%;display:grid;grid-template-columns:1fr 1fr 100px;grid-template-rows:1fr 1fr;border-radius:8px;overflow:hidden;height:80px;background:#03400326;border:1px solid rgba(3,64,3,.3)}.articleCard img{height:120px;width:120px;object-fit:cover;flex-shrink:0}.slitherCard{width:100%;display:grid;grid-template-columns:1fr 1fr 100px;grid-template-rows:1fr 1fr;border-radius:8px;overflow:hidden;height:80px;background:#03400326;border:1px solid rgba(3,64,3,.3)}.slitherCard img{grid-column:3;grid-row:1 / 3;width:auto;height:100px;object-fit:cover}.slitherCardTitle{grid-column:1;grid-row:1;padding:8px 10px 2px;font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#222}.slitherCardInfo{grid-column:2;grid-row:1;padding:0 10px 8px;font-size:.72rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slitherCardBtn{grid-column:2;grid-row:2;display:flex;align-items:center;padding:0 12px}.slitherCardBtn button{background:#034003;color:bisque;border:none;border-radius:6px;padding:6px 12px;font-size:.8rem;cursor:pointer;white-space:nowrap}.profileContainer{width:100%;min-height:100vh;display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:20px;padding:20px}.userCard{border:2px solid rgb(3,64,3);border-radius:8px;height:200px;width:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}.userCard:hover{background-color:#03400340}.profileContainer img{width:auto;height:150px;object-fit:cover}.singleArticleCard img{width:100%;max-width:500px;height:auto;border-radius:8px}.commentCard{border:1px solid white;border-radius:8px}.commentCard p{padding:8px 20px}.commentTable{display:flex;flex-direction:column;width:100%;gap:8px;margin-bottom:80px}.commentTable li{width:100%;list-style:none;padding:5px}.likeBar{font-size:20px;display:flex;width:100%;max-width:500px;justify-content:space-around;align-items:center;height:60px;margin:15px 0;border:1px solid white;border-radius:25px}.commentBar{width:100%;max-width:500px}.likeBar button{background-color:#034003;border:2px solid white;color:bisque;border-radius:8px;padding:6px 14px;cursor:pointer}.commentBar button{background-color:#034003;border:2px solid white;color:bisque;min-width:100px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;cursor:pointer}.submitBtn{background-color:#034003;border:2px solid white;color:bisque;min-width:100px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;cursor:pointer;align-self:flex-end}.CommentBox{width:100%;max-width:500px;margin:10px 0}.commentFormBody{display:flex;flex-direction:column;width:100%;height:auto;margin:15px 0;gap:10px;background-color:bisque}textarea{width:100%;min-height:120px;background-color:#0340031a;border:1px solid white;border-radius:8px;padding:10px;font-size:14px;resize:vertical}.like-btn:hover{animation:glow .8s ease-in-out;color:#fff}.is-liked{animation:glow .8s ease-in-out;background-color:#ff383c!important;color:#fff!important}@keyframes glow{0%{box-shadow:0 4px 12px #ff383c66}50%{box-shadow:0 4px 24px #ff383ccc}to{box-shadow:0 4px 12px #ff383c66}}.inputError{color:red;font-size:18px}.commentDeleted{display:none}.pageHeader{top:0}.pageContainer{padding-top:100px;padding-bottom:60px;min-height:100vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.topicGrid{grid-template-columns:repeat(3,1fr);gap:2rem;display:flex;flex-direction:column;align-items:center;width:100%;margin-left:50px}.topicCard{border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #0000001a;transition:transform .2s ease,box-shadow .2s ease;background:#03400399;cursor:pointer}.topicCard:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.topic_Card img{width:100%;height:180px;object-fit:cover}.topic_Card{padding:1.2rem;color:bisque}.topic_Card h3{font-size:1.3rem;text-transform:capitalize;margin-bottom:.5rem}.topic_Card p{font-size:.95rem;line-height:1.5}@media(min-width:768px){.desktop-nav{display:flex!important}.mobile-nav{display:none!important}.column{margin:90px auto 20px}.commentTable{margin-bottom:20px}.pageContainer{padding-bottom:20px}}@media(max-width:767px){header{height:60px;font-size:11px;padding:0 10px}header h1{font-size:1.2rem}.column{margin-top:70px}.articleCard img{height:100px;width:100px}.likeBar{font-size:16px;height:50px}.userCard{width:150px;height:150px}.userBox p{display:none}.sortButtons{width:100%;justify-content:flex-end}.sortButtons select{font-size:.85rem;padding:6px 10px;min-width:100px}.sortButtons button{font-size:1rem;padding:6px 10px;min-width:40px}}.sortButtons{display:flex;gap:10px;align-items:center;margin-bottom:20px;align-self:flex-end}.sortButtons select{background-color:#034003;color:bisque;border:1px solid bisque;border-radius:6px;padding:8px 12px;font-size:.9rem;cursor:pointer;min-width:120px}.sortButtons select:hover{background-color:#034003cc}.sortButtons button{background-color:#034003;color:bisque;border:1px solid bisque;border-radius:6px;padding:8px 12px;font-size:1.2rem;cursor:pointer;min-width:45px;transition:background-color .2s ease}.sortButtons button:hover{background-color:#034003cc}.sortButtons button:active{transform:scale(.95)}.home{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:20px}.article-card{flex:1 1 300px;max-width:400px}