@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Open Sans,sans-serif}html,body{width:100%;height:100%}.main{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}.container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px;background-color:#f5f6fa}.container.inactive{filter:brightness(50%);cursor:default}.comments-list{width:100%;max-width:730px;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;scroll-behavior:smooth;padding:0 1rem;box-sizing:border-box}@media (min-width: 1200px){.comments-list{max-width:800px}}@media (max-width: 768px){.comments-list{max-width:100%;padding:0 1rem}}@media (max-width: 480px){.comments-list{padding:0 .75rem}}.comment-container,.reply-container{display:flex;flex-direction:column;align-items:flex-start;width:100%}.reply-container{width:100%;padding-left:32px;border-left:2px solid hsl(223,19%,93%)}.comment,.reply{width:100%;display:flex;align-items:flex-start;margin-block:10px;gap:20px;background-color:#fff;padding:20px 30px;border-radius:10px}.score-container{display:flex;flex-direction:column;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;background-color:#f5f6fa}.score-container>span{color:#5457b6;font-weight:700;cursor:default}.score-button{outline:0;border:0;font-size:20px;font-weight:500;color:#67727e;background-color:transparent;cursor:pointer}.score-button:active{color:#5457b6}.score-button.up-voted{color:#ed6468}.score-button.down-voted{color:#5457b6}.comment-details{width:100%}.comment-details>p{font-size:16px;line-height:24px;color:#67727e;margin-top:10px;overflow-wrap:break-word}.commenter-details{width:100%;display:flex;align-items:center;justify-content:space-between}.details{display:flex;align-items:center}.details>img{width:30px;cursor:pointer}.details>h4{color:#324152;font-size:16px;font-weight:700;margin-inline:15px;cursor:pointer}.details>h4:hover{text-decoration:underline}.details>span{background:#5457b6;color:#fff;margin-left:-5px;margin-right:15px;padding:1px 6px;border-radius:2px;font-size:15px}.details>p{color:#67727e}.delete-edit-container{display:flex;align-items:center}.delete-comment-button,.edit-comment-button{background-color:transparent;outline:0;border:0;font-size:16px;font-weight:500;cursor:pointer}.delete-comment-button{margin-right:20px;color:#ed6468}.delete-comment-button:active{color:#ffb8bb}.edit-comment-button{color:#5457b6}.edit-comment-button:active{color:#c3c4ef}.reply-button{color:#5457b6;background:transparent;display:flex;align-items:center;gap:5px;font-size:16px;font-weight:500;outline:0;border:0;cursor:pointer}.reply-button:active{color:#c3c4ef}.replied-to{color:#5457b6;font-weight:500;cursor:pointer}.replied-to:hover{text-decoration:underline}.edit-container{width:100%;display:flex;flex-direction:column;align-items:flex-end}.edit-container>.text-area{min-height:150px;margin-block:20px}.update-button{outline:0;border:0;border-radius:10px;background-color:#5457b6;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;cursor:pointer}.update-button:active{background-color:#c3c4ef}@media (max-width: 600px){.comment,.reply{flex-direction:row;gap:12px;padding:16px;align-items:flex-start}.score-container{flex-direction:column;justify-content:flex-start;width:auto;padding:8px 12px}.commenter-details{flex-direction:column;align-items:flex-start;gap:8px;flex-grow:1}.details{flex-wrap:wrap;gap:6px}.delete-edit-container,.reply-button{align-self:flex-end}.reply-container{padding-left:16px}.edit-container>.text-area{min-height:120px}.update-button{width:100%}}@media (max-width: 900px){.comment,.reply{padding:18px 20px;gap:16px}.reply-container{padding-left:30px}}@media (min-width: 1200px){.comment,.reply{padding:24px 32px}.reply-container{padding-left:48px}}button{-webkit-tap-highlight-color:transparent}.comment-form{width:100%;max-width:750px;background:#fff;margin-top:20px;padding:10px 20px;border-radius:10px;display:flex;align-items:flex-start;gap:15px}.reply-form{width:100%}.comment-form>img{width:40px;flex-shrink:0;border-radius:50%}.text-area{width:100%;min-height:100px;outline:0;border:2px solid hsl(223,19%,93%);border-radius:10px;padding:10px 15px;line-height:24px;font-size:16px;color:#324152;resize:none;flex-grow:1;overflow-wrap:break-word}.send-button{outline:0;border:0;border-radius:10px;background-color:#5457b6;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;cursor:pointer;flex-shrink:0}.send-button:active{background-color:#c3c4ef}@media (max-width: 600px){.comment-form{flex-direction:column;align-items:stretch;gap:12px;padding:12px 15px}.comment-form>img{width:35px}.text-area{min-height:80px;padding:8px 12px;font-size:14px}.send-button{width:100%;padding:12px;font-size:14px}}@media (max-width: 900px){.comment-form{gap:12px;padding:12px 20px}.text-area{font-size:15px;min-height:90px}.send-button{padding:12px 24px}}@media (min-width: 1200px){.comment-form{padding:14px 24px}.text-area{font-size:16px;min-height:100px}.send-button{padding:14px 28px}}.delete-modal-container{width:25em;position:absolute;display:none;flex-direction:column;justify-content:center;align-items:start;border-radius:10px;background-color:#fff;padding:20px}.delete-modal-container.active{display:flex}.delete-modal-container h2{font-size:22px;font-weight:600;line-height:22px;color:#324152;margin-block:10px}.delete-modal-container p{font-size:16px;line-height:22px;color:#67727e;margin-block:10px}.delete-modal-buttons{width:100%;display:flex;justify-content:center;align-items:center;gap:10px}.cancel-button,.yes-button{width:100%;padding:10px 20px;margin-top:10px;font-size:16px;color:#fff;background-color:#324152;outline:0;border:0;border-radius:5px;cursor:pointer}.yes-button{background-color:#ed6468}.cancel-button:active{background-color:#67727e}.yes-button:active{background-color:#ffb8bb}.post{width:100%;max-width:800px;background-color:#fff;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;padding:0 1rem;padding:20px 30px;border-radius:10px;margin-bottom:1rem}.post-header{display:flex;align-items:center}.post-header>i{font-size:30px}.heading{color:#324152;font-size:16px;font-weight:700;margin-inline:15px}.description{font-size:16px;line-height:24px;color:#67727e;margin-top:10px;overflow-wrap:break-word}.post-score-and-comment{display:flex;justify-content:start;align-items:center;gap:10px;margin-top:.5rem}.post-score-container{display:flex;flex-direction:row;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;background-color:#f5f6fa}.post-score-button{outline:0;border:0;font-size:20px;color:#67727e;background-color:transparent;cursor:pointer}.post-score-button:active{color:#5457b6}.post-score-button.up-voted{color:#ed6468}.post-score-button.down-voted{color:#5457b6}.post-score-container span{font-weight:700;color:#5457b6}.post-score-container i,.comment-length i{outline:0;border:0;font-size:20px}.post-score-and-comment>.comment-length{display:flex;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;background-color:#f5f6fa}.comment-length>span{color:#5457b6;font-weight:700;cursor:default}