:root{--dark-green: #77a8a8;--light-green: #d9ecd0;--pink: #e4d1d1;--blue: #c2d4dd;--purple: #b0aac0;--grey: #f0efef}*{font-family:Courier New,Courier,monospace;margin:0}body{background-color:var(--light-green)}h2{text-align:center;margin:30px 0 0}h4{margin:35px 0 0}.header{position:fixed;display:flex;width:100vw;flex-wrap:wrap;justify-content:center;align-content:center;background-color:var(--dark-green);margin:0;height:60px;top:0;z-index:1}.topics{position:fixed;display:flex;width:100vw;flex-wrap:wrap;justify-content:flex-start;gap:10px;align-content:center;background-color:var(--grey);margin:0;height:40px;top:60px;z-index:1;padding:0 0 0 10px}.filters{color:var(--purple);position:fixed;display:flex;width:100vw;flex-wrap:wrap;justify-content:flex-start;gap:20px;align-content:center;background-color:var(--grey);margin:0;height:30px;top:95px;z-index:1;padding:0 0 0 10px}.sort select{margin:0 0 0 5px;border:1px solid var(--purple);border-radius:10px;position:relative;bottom:1px;color:var(--purple)}.sort select:hover{text-decoration:underline;background-color:var(--pink);color:#fff}.order{position:relative;bottom:2px}.order input{position:relative;top:2px;margin:0 2px 0 5px}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--purple);width:15px;height:15px;border:1px solid var(--purple);border-radius:10px}input[type=radio]:hover{background-color:var(--pink)}input[type=radio]:checked{background-color:var(--purple)}.filter-submit{border:1px solid var(--purple);border-radius:10px;position:relative;bottom:2px;color:var(--purple)}.filter-submit:hover{text-decoration:underline;background-color:var(--pink);color:#fff}.topic-card{border:2px solid var(--purple);border-radius:10px;padding:2px 5px;text-decoration:none}.topic-card:visited{color:var(--purple)}.topic-card:hover{text-decoration:underline;background-color:var(--purple);color:#fff}.page{margin-top:145px}ul{display:block;border:2px solid var(--dark-green);border-radius:10px;padding:0;list-style-type:none}li{border-radius:10px;background-color:var(--purple);padding:20px;margin:20px 25px}.article-list{margin:5vh 10vw 5vh 10vw}.article-card:hover{background-color:var(--pink)}.comment-list{margin:1vh 0vw 5vh 0vw}.comment-deleted h4{margin:0}.comments{margin:5vh 5vw 5vh 5vw}.comment-header{text-decoration:underline;margin:0 0 10px}.comments form{margin:0 0 25px 5vw}.comments textarea{display:flex;text-wrap:wrap;border-radius:10px;border:2px solid var(--purple);margin:0 0 10px;padding:10px 15px;width:400px;height:130px}.comment-form button{background-color:var(--purple)}.comment-body{margin:15px 0 15px 15px}.votes{display:flex;gap:10px}.votes button{padding:3px;font-weight:700;position:relative;bottom:3px;z-index:0}.votes-delete{display:flex;justify-content:space-between}.plus:hover,.plus.clicked{background-color:var(--light-green);border:.5px solid black}.minus:hover,.minus.clicked{background-color:var(--pink);border:.5px solid black}.centered{display:flex;justify-content:center}.article-author{display:flex;justify-content:space-between;margin:0 15px}button{border:none;border-radius:10px;padding:2px 15px;background-color:var(--grey)}button:hover{border:2px solid white}.article-content{margin:5vh 5vw 5vh 5vw;border:2px solid var(--dark-green);border-radius:10px;padding:0}.article-content h2{margin:15px}.article-content img{margin:15px;width:75vw;max-width:600px}.article-body{margin:15px;border-radius:10px;background-color:var(--dark-green);padding:20px}.article-content button{margin:0 0 15px}
