*{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:#caf0f8;padding:0 20px;max-width:1750px;margin:0 auto}h1{background-color:#03045e;border-radius:5px;max-width:195px;padding:20px;font-size:42px;color:#fff;margin:45px 0 0}.content-section{background-image:linear-gradient(#90e0ef,#f000);display:flex;flex-direction:column;align-items:center;border-radius:5px;padding:10px 0 0}h3{background-color:#0077b6;border-radius:5px;width:fit-content;padding:10px;border:#212529 1px ridge;color:#fff}ul{display:flex;flex-direction:column;align-items:center;list-style:none;padding:0;margin:0 auto}.article-li{margin:20px;align-items:center;max-width:784px}.article-card-img{grid-area:img;justify-self:center;max-width:100%;height:auto;border-radius:5px}.article-card-title{grid-column:1 / 3;grid-row:2 / 4;display:flex;justify-content:center;align-items:center;text-align:center;width:100%;margin:0;background-image:linear-gradient(#f000,#fff)}.article-card-comments{grid-area:comments;justify-self:center;margin:0;border:2px outset #adb5bd;border-radius:0 0 5px;padding:10px;width:100%;box-sizing:border-box}.article-card-comments:hover{background-color:#fff;text-decoration:underline;cursor:pointer}.article-card-votes{grid-area:votes;justify-self:center;margin:0;border:2px outset #adb5bd;border-radius:0 0 0 5px;padding:10px;width:100%;box-sizing:border-box}.article-card-votes:hover{background-color:#fff;text-decoration:underline;cursor:pointer}.article-card-topic{position:absolute;top:5px;right:20px;padding:10px;background-color:#edf4f599;border-radius:5px;z-index:2}#article-card-topic-id{display:inline-block;padding:10px;border:#0077b6 1px solid;border-radius:5px;background-color:#00b4d8;text-decoration:none;color:inherit}#article-card-topic-id:hover{display:inline-block;padding:10px;background-color:#fff;border-radius:5px;text-decoration:none;cursor:pointer}.article-card-author{grid-area:author;margin-left:10px}.article-card-date{grid-area:date;justify-self:right;opacity:.5;margin-right:10px}.article-card{position:relative;padding:40px 40px 0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:3fr 1fr 10px;grid-template-areas:"img img" "img img" "img img" "votes comments" "author date";background-color:#00b4d899;border-radius:5px}@media(max-width:888px){.article-card{grid-template-columns:1fr;grid-template-areas:"img" "img" "img" "votes" "comments" "author" "date"}.article-card-title{font-size:15px}.article-card-votes,.article-card-comments{text-align:center}}.spotlight-post-comment-card{width:100%;background-color:#90e0ef;padding:10px 5px;border-radius:10px}textarea{margin:10px 0;width:99%}li.spotlight-comment-card{padding:0 0 10px 10px}.spotlight-comments-card{padding:15px 25px;border-radius:10px;margin:40px 0;width:100%}.spotlight-comment-card{background-color:#90e0ef;border-radius:10px;padding:15px 25px;margin:5px;width:100%}.thumbs{margin:0 2px;border-radius:5px}.thumbs:hover{cursor:pointer;background-color:#caf0f8}.thumbs-pressed{background-color:#0077b6}.spotlight-vote-count-pos{background-color:#00ff0080;width:fit-content;padding:5px;border-radius:8px;margin:0 2px}.spotlight-vote-count-neg{background-color:#ff000080;width:fit-content;padding:5px;border-radius:8px;margin:0 2px}.spotlight-vote-count-neu{background-color:#ff800080;width:fit-content;padding:5px;border-radius:8px;margin:0 2px}.react-container{display:flex;justify-content:flex-start;background-color:#caf0f8;padding:5px;width:fit-content;border-radius:10px}.reply-box{display:flex;justify-content:flex-start;width:fit-content}.reply-box-p-tag{margin:5px}.reply-box-input{margin:5px;border-radius:5px}.fade-out-delete{animation:fadeOut 3s forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-moz-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-o-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-ms-keyframes fadeOut{0%{opacity:1}to{opacity:0}}#content{grid-area:content}#header{grid-area:header;align-self:center}#sidebar{grid-area:sidebar;padding:20px;background-image:linear-gradient(#00b4d8,#f000);border-radius:5px}#app{display:grid;grid-template-columns:1fr 5fr 1fr;grid-template-rows:100px 1fr;grid-template-areas:"header header header" "sidebar content .";gap:3em}@media(max-width:652px){#app{display:grid;grid-template-columns:1fr;grid-template-rows:100px 100px 1fr;grid-template-areas:"header" "sidebar" "content";gap:3em}.nav-bar,.filter-section{display:flex;justify-content:space-evenly}}#logo{grid-area:logo}#searchbar{grid-area:searchbar}#user{grid-area:user}#header{display:grid;grid-template-columns:1fr 1fr 3fr 1fr;grid-template-rows:1fr;grid-template-areas:"logo searchbar . user"}#article-title{grid-area:title;font-size:44px}#article-author-date{grid-area:author-date}#article-img{grid-area:img;justify-self:center;align-self:center}#article-topic{grid-area:topic}#article-votes-comments{grid-area:votes-comments}#article-like{grid-area:like}#article-dislike{grid-area:dislike}#article-body{grid-area:body}.spotlight-comments-card{grid-area:comments}#article-container{display:grid;grid-template-columns:100px 100px 8fr 100px 100px;grid-template-rows:.5fr 50px .5fr 3fr .25fr .25fr 1fr 200px;grid-template-areas:"title title title title title" "author-date author-date author-date author-date author-date" "topic . . . ." ". img img img ." "votes-comments votes-comments votes-comments . ." "like dislike . . ." "body body body body body" "comments comments comments comments comments"}#all-articles-title{grid-area:title;justify-self:center;font-size:36px}#all-articles-content{grid-area:content}#content{display:grid;grid-template-columns:1fr 200px 1fr;grid-template-rows:100px 1fr;grid-template-areas:". title ." "content content content"}#topics-title{grid-area:title;justify-self:center;align-self:center}#topics-topics{grid-area:topics;justify-self:center;align-self:center}#topics-container{display:grid;grid-template-columns:1fr 200px 1fr;grid-template-rows:100px 1fr;grid-template-areas:". title ." "topics topics topics"}.topic-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:50px;margin:20px;border:#00b4d8 solid 2px;border-radius:80px;background-color:#90e0ef}.topic-item:hover{background-color:#00b4d8;color:#caf0f8}.topic-item a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit}#topic-container{display:flex;justify-content:center}a{text-decoration:none;color:inherit}.nav-link:hover{background-color:#90e0ef;color:#03045e}