#root{max-width:1024px;margin:0 auto;padding:6rem 2rem;text-align:center}.nav-bar{list-style:none;display:inline-flex;text-align:center;padding:20px 5%;background-color:#ffea4d4b}.nav-bar:hover{color:#368996}.trending-topics{list-style:none;display:inline-flex}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;text-decoration:none}body{margin:0}.articles-container{display:flex;flex-direction:column;max-width:800px;margin:0 auto;padding:20px;text-align:center;gap:2rem}.articles-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}@media (max-width: 768px){.articles-header{flex-direction:column;gap:1rem;align-items:flex-start}}.controls{display:flex;justify-content:space-between;align-items:center;gap:10px}@media (max-width: 768px){.controls{flex-direction:column;gap:1rem;align-items:flex-start}}.sort-options{display:flex;justify-content:center;align-items:center;gap:10px;margin:20px 0}.sort-options label{font-weight:700}.sort-options select{padding:5px;border:1px solid #ccc;border-radius:5px;cursor:pointer}.articles-list{list-style:none;padding:0}.search-container{position:relative;display:flex;justify-content:center}.search-button{background:transparent;color:#fff;border:none;padding:10px 15px;border-radius:50%;cursor:pointer;font-size:20px;color:#38a169}.search-button:hover{background:#d0f4e1}.search-bar-container{display:flex;align-items:center;border:1px solid #ccc;padding:8px;border-radius:10px;width:250px;background:#fff;z-index:10}.search-icon{margin-right:8px;font-size:1.2em}.search-bar{border:none;outline:none;flex:1}.clear-search{background:none;border:none;cursor:pointer;font-size:1.2em;color:gray}.sort-dropdown{display:flex;align-items:center;gap:10px}.sort-dropdown select{border-radius:10px;border:1px solid #ccc;background:#fff;cursor:pointer;padding:11px}.article-card{display:flex;flex-direction:column;border-bottom:1px solid #ddd;padding:20px 0}.article-content{display:flex;flex-direction:row;align-items:center;gap:20px}.article-image img{width:300px;height:200px;border-radius:8px;object-fit:cover}.article-details{flex:1;text-align:left}.articleListTitle{color:#000}.articleListTitle:hover{color:#38a169}.article-details h2{font-size:1.5rem;margin-bottom:10px}.article-tag{color:#38a169;text-transform:uppercase;font-weight:800;font-size:.875rem;letter-spacing:1.1px;margin-bottom:.5rem}.article-meta{font-size:.9rem;color:#666}.article-actions{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px}.comment-button,.vote-button{background-color:#38a169;color:#fff;padding:8px 12px;border:none;border-radius:5px;cursor:pointer}.comment-button:hover,.vote-button:hover{background-color:#2f855a}@media (max-width: 768px){.article-content{flex-direction:column;align-items:flex-start}.article-image img{width:100%;height:auto}}.votes{display:flex;align-items:center;gap:10px;margin-top:10px;justify-content:flex-end;color:#38a169;font-weight:700}.vote-button{background-color:#38a169;border:none;padding:5px 10px;cursor:pointer;border-radius:50%}.vote-button:hover{background-color:#d0ecc7;color:#38a169}.no-articles{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2rem;box-shadow:0 0 10px #0000001a;line-height:1.5rem;padding:1rem}.no-article-button{background-color:#38a169;color:#fff;padding:8px 12px;border:none;border-radius:5px;cursor:pointer}.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem 0;gap:1.5rem}.inner{max-width:600px;width:100%;background:#fff;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.375rem;padding:1.5rem;overflow:hidden}.iagContainer{width:85%;margin-left:6%;object-fit:contain}.iagContainer img{max-width:100%;height:auto}.divider{opacity:.3;border:0;border-style:solid;border-bottom-width:2px;width:100%;height:10px;margin-bottom:1rem}.articleContent{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1.5rem;line-height:1.5rem}.tagText{color:#38a169;text-transform:uppercase;font-weight:800;font-size:.875rem;letter-spacing:1.1px}.articleCommentsAndVotes{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:2rem}.comments{text-decoration:none;display:inline-block;color:#38a169;font-weight:700;padding:0}.comments:hover{text-decoration:underline;color:#38a169;background-color:transparent}.comment-form{display:flex;align-items:center;background:#f7fcf9;padding:10px;border-radius:20px;max-width:100%;border:1px solid #ccc;gap:1rem}.comment-input{width:100%;padding:.75rem;border:1px solid #38a169;border-radius:5px;font-size:1rem;box-sizing:border-box}.comment-input:hover{border:2px solid #1e623e}.submit-button{align-self:flex-start;font-size:2.5rem;background-color:transparent;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.submit-button:hover{color:#38a169}.card-container{display:flex;flex-direction:column;justify-content:space-between;border:1px solid #ddd;border-radius:8px;overflow:hidden;box-shadow:0 2px 5px;cursor:pointer;max-width:700px;min-height:150px;height:100%;transition:transform .3s ease}.content{display:flex;flex-direction:column;gap:12px;text-align:left;justify-content:space-between;flex-grow:1}.comment-details{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.delete-button{background-color:#d0f6c4;color:#36872d;border:none;border-radius:10px;padding:8px 16px;cursor:pointer;transition:background-color .3s ease;border:1 solid red}.comments-page{display:flex;flex-direction:column;max-width:700px;margin:0 auto;align-items:center;padding:2rem 0;line-height:1.5rem;text-align:left}.article-wrapper{display:flex;flex-direction:column;margin-bottom:24px;gap:12px;align-items:flex-start}.article-wrapper a{text-decoration:none;display:inline-block;color:#000;font-size:1.2rem;font-weight:700;line-height:2.5rem;padding:0}.article-wrapper a:hover{text-decoration:underline;color:#38a169;background-color:transparent}.comments-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%}.comment-title{margin-bottom:1rem}.comments-list{display:flex;flex-direction:column;gap:1rem}.profile-card{background-color:#b3ffee;display:inline-block;border-radius:20px;margin:10px;padding:15px}.other-users-card{background-color:#b3ffee;list-style:none;display:inline-block;margin:10px;padding:10px}.user-profile-pic{width:110px;height:110px}.navbar{position:fixed;top:0;left:0;width:100%;background-color:#f0fdf4;display:flex;padding:15px 20px;justify-content:center;align-items:center;box-shadow:0 4px 6px #0000001a;z-index:1000}.nav-container{display:flex;align-items:center;width:100%;max-width:1024px;justify-content:space-between}.menu-icon{background:none;border:none;font-size:24px;cursor:pointer;display:none}.nav-links{display:flex;gap:15px}.nav-button{background:none;border:none;font-size:16px;cursor:pointer;padding:5px 10px;transition:.3s}.nav-button:hover{background-color:#d1fae5;border-radius:5px}@media (max-width: 768px){.menu-icon{display:block}.nav-links{display:none;flex-direction:column;gap:10px;width:100%;text-align:center;padding:10px 0}.nav-links.active{display:flex}}.profile-icon{position:relative;cursor:pointer;transition:transform .2s ease-in-out}.profile-icon:hover{transform:scale(1.1)}