@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap";.App{display:flex;flex-direction:column;justify-content:left;align-items:center;gap:15px;padding:2rem 0}@media (min-width: 47em){.App{gap:20px}}.comment-container{display:flex;flex-direction:column;width:90%}.comment-container .comment{display:flex;flex-direction:column;background:hsl(0,0%,100%);padding:15px;border-radius:10px;gap:15px;animation:come-in 1s ease-in}.comment-container .comment--votes{display:none;flex-direction:column;align-items:center;justify-content:center;height:-moz-max-content;height:max-content;padding:8px 12px 10px;background:hsl(228,33%,97%);border-radius:10px}.comment-container .comment--votes .plus-btn,.comment-container .comment--votes .minus-btn{display:grid;place-items:center;width:20px;height:20px;background:transparent;border:0;cursor:pointer}.comment-container .comment--votes .plus-btn:hover svg path,.comment-container .comment--votes .minus-btn:hover svg path{fill:#5457b6}.comment-container .comment--votes .votes-counter{font-size:1.1rem;margin-block:8px;color:#5457b6;font-weight:500}.comment-container .comment--body{display:flex;flex-direction:column;gap:10px;width:100%}.comment-container .comment--body .comment--header{display:flex;align-items:center}.comment-container .comment--body .comment--header .profile-pic{width:30px;height:30px;background-size:cover;border-radius:50%;margin-right:10px}.comment-container .comment--body .comment--header .username{color:#324152;font-weight:500}.comment-container .comment--body .comment--header .you-tag{color:#fff;font-weight:400;font-size:.9rem;padding:2px 10px 3px;background:hsl(238,40%,52%);border-radius:3px;margin-left:10px}.comment-container .comment--body .comment--header .comment-posted-time{margin-left:15px;color:#67727e}.comment-container .comment--body .comment--header .comment--btn{display:none}.comment-container .comment--body .comment-content{width:100%;color:#67727e;line-height:1.5;word-wrap:break-word;word-break:break}.comment-container .comment--body .comment-content .replyingTo{color:#5457b6;font-weight:700;display:inline-block;margin-right:10px}.comment-container .comment--body .content-edit-box{height:150px;color:#67727e;line-height:1.5;padding:10px 15px;border:2px solid hsl(223,19%,93%);border-radius:10px;resize:none;scrollbar-width:none}.comment-container .comment--body .content-edit-box::-webkit-scrollbar{width:0}.comment-container .comment--body .content-edit-box:focus{outline:1.5px solid hsl(211,10%,45%)}.comment-container .comment--body .update-btn{align-self:flex-end;width:-moz-max-content;width:max-content;color:#fff;font-weight:700;text-transform:uppercase;padding:15px 30px;background:hsl(238,40%,52%);border:0;border-radius:10px;transition:.3s;cursor:pointer}.comment-container .comment--body .update-btn:hover,.comment-container .comment--body .update-btn:focus{opacity:.65}.comment-container .comment--footer{display:flex;align-items:center;justify-content:space-between}.comment-container .comment--footer .comment--votes{padding:8px 15px;display:flex;flex-direction:row}.comment-container .comment--footer .comment--votes .votes-counter{margin-block:0;margin-inline:15px}.comment-container .comment--footer .comment--votes .plus-btn,.comment-container .comment--footer .comment--votes .minus-btn{width:30px;height:30px}.comment-container .comment--btn{display:flex;align-items:center;gap:7px;margin-left:auto}.comment-container .comment--btn button{display:flex;align-items:center;gap:5px;color:#5457b6;font-weight:700;padding:5px;background:transparent;border:none;border-radius:5px;transition:.3s;cursor:pointer}.comment-container .comment--btn button:hover,.comment-container .comment--btn button:focus{opacity:.5}.comment-container .comment--btn .delete-btn{color:#ed6468}.comment-container .reply-container{display:flex;align-items:center;flex-direction:column;padding-left:15px;border-left:2px solid hsl(223,19%,93%);margin-left:15px;gap:15px}.comment-container .reply-container .comment-container{width:100%}.comment-container .reply-container .comment-container .comment{animation:come-in 1.5s ease-in-out}.comment-container .add-comment{width:100%;margin-top:5px;animation-duration:.5s}@media (min-width: 47em){.comment-container{width:735px}.comment-container .comment{flex-direction:row;padding:25px;gap:25px}.comment-container .comment--votes{display:flex}.comment-container .comment--header .comment--btn{display:flex!important}.comment-container .comment-content{width:97%}.comment-container .comment .content-edit-box{height:100px}.comment-container .comment--footer{display:none}.comment-container .add-comment{margin-top:10px}.comment-container .reply-container{padding-left:35px;margin-left:35px;gap:20px}}.reply-container-gap .reply-container{margin-top:15px}@media (min-width: 47em){.reply-container-gap .reply-container{margin-top:20px}}.amyrobson{background:url(../../Assets/avatars/image-amyrobson.png)}.maxblagun{background:url(../../Assets/avatars/image-maxblagun.png)}.ramsesmiron{background:url(../../Assets/avatars/image-ramsesmiron.png)}.juliusomo{background:url(../../Assets/avatars/image-juliusomo.png)}.add-comment{display:flex;flex-direction:column;gap:20px;width:90%;padding:20px;background:hsl(0,0%,100%);border-radius:10px;animation:come-in 1.5s ease-in-out}.add-comment .profile-pic{width:30px;height:30px;background:url(/images/avatars/noavatar.jpg);background-size:cover;border-radius:50%;margin-right:10px}.add-comment>.profile-pic{display:none}.add-comment .comment-input{position:relative;height:100px;border:2px solid hsl(223,19%,93%);color:#324152;border-radius:10px;padding:15px 25px;resize:none;scrollbar-width:none}.add-comment .comment-input::-moz-placeholder{color:#324152}.add-comment .comment-input::placeholder{color:#324152}.add-comment .comment-input::-webkit-scrollbar{width:0}.add-comment .comment-input:focus{outline:1.5px solid hsl(211,10%,45%)}.add-comment .send-btn-container{display:flex;justify-content:space-between;align-items:center}.add-comment .add-btn{color:#fff;font-weight:700;text-transform:uppercase;padding:15px 30px;background:hsl(238,40%,52%);border:0;border-radius:10px;transition:.3s;cursor:pointer}.add-comment .add-btn:hover,.add-comment .add-btn:focus{opacity:.65}@media (min-width: 47em){.add-comment{width:735px;flex-direction:row;padding:25px;gap:25px}.add-comment>.profile-pic{width:50px;height:36px;display:block;margin:0}.add-comment .comment-input{width:100%}.add-comment .send-btn-container{align-items:flex-start}.add-comment .send-btn-container .profile-pic{display:none}}@keyframes come-in{0%{opacity:0;transform:translateY(-100%)}75%{opacity:0;transform:translateY(-50%)}to{opacity:1;transform:translateY(0)}}.delete-confirmation-wrapper{position:fixed;z-index:100;top:0;left:0;height:100vh;width:100%;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.3)}.delete-confirmation-wrapper .delete-container{display:flex;flex-direction:column;gap:15px;width:90%;background:hsl(0,0%,100%);padding:20px;border-radius:10px}.delete-confirmation-wrapper .delete-container .title{color:#324152;font-weight:700;font-size:1.2rem}.delete-confirmation-wrapper .delete-container .confirmation-message{line-height:1.5;color:#67727e}.delete-confirmation-wrapper .delete-container .btn-container{display:flex;justify-content:space-between}.delete-confirmation-wrapper .delete-container .btn-container button{color:#fff;text-transform:uppercase;font-weight:500;padding:15px 20px;border:none;border-radius:10px;transition:.3s;cursor:pointer}.delete-confirmation-wrapper .delete-container .btn-container button:hover{opacity:.65}.delete-confirmation-wrapper .delete-container .btn-container .cancel-btn{background:hsl(211,10%,45%)}.delete-confirmation-wrapper .delete-container .btn-container .delete-btn{background:hsl(358,79%,66%);color:#fff}@media (min-width: 26.25em){.delete-confirmation-wrapper .delete-container{width:400px;padding:30px}.delete-confirmation-wrapper .delete-container .btn-container button{padding:15px 30px}}