@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";:root{font-family:Rubik,sans-serif;line-height:1.5;font-weight:400;font-size:16px;--color-grey-800: hsl(212, 24%, 26%);--color-grey-500: hsl(211, 10%, 45%);--color-grey-100: hsl(223, 19%, 93%);--color-grey-50: hsl(228, 33%, 97%);--color-purple-600: hsl(238, 40%, 52%);--color-purple-200: hsl(239, 57%, 85%);--color-pink-400: hsl(358, 79%, 66%);--color-pink-200: hsl(357, 100%, 86%);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--color-grey-50);display:flex;justify-content:center;width:100vw;min-height:100vh;position:relative}@media (max-width: 600px){body{padding:0}}#root{width:80%;height:auto;display:flex;flex-direction:column;gap:1rem}.replies{margin-left:2rem;border-left:1px solid hsl(223,19%,93%);padding-left:2rem;display:flex;flex-direction:column;gap:1rem}@media (max-width: 600px){#root{width:100%;padding:1.5rem 1rem}.replies{margin-left:0;padding-left:.5rem}}.comment-box,.reply-box,.update-box{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem 2rem;background-color:#fff;border-radius:10px;color:#67727e;position:relative}.score-box{background-color:#f5f6fa;display:flex;flex-direction:column;padding:.8rem .5rem;justify-content:space-between;align-items:center;color:#5457b6;border-radius:5px;min-width:20px;height:70px}.minus,.plus{cursor:pointer;color:#c5c6ef}.minus:hover,.plus:hover{color:#5457b6}.content-box{flex:1;display:flex;flex-direction:column;gap:1rem}.info-box,.user-info,.button-box,.user-info-left{display:flex;gap:1rem;align-items:center}.info-box>img,.reply-box>img{width:40px;height:40px;border-radius:50%;object-fit:cover}.button-box{font-weight:700}.delete-btn,.edit-btn,.reply-btn{display:flex;align-items:center;gap:.5rem;cursor:pointer}.comment-box>.reply-btn,.comment-box>.button-box{position:absolute;right:2rem;top:2rem}.delete-btn{color:#ed6468}.edit-btn,.reply-btn{color:#5457b6;font-weight:700}.delete-btn:hover,.edit-btn:hover,.reply-btn:hover,.update-btn:hover{opacity:.5}.reply-box>.reply-btn,.update-btn{max-width:100px;background-color:#5457b6;color:#fff;font-weight:700;padding:1rem;border:none;border-radius:5px}textarea{flex:1;padding:1rem;border:1px solid hsl(223,19%,93%);border-radius:5px;font-size:16px}@media (max-width: 600px){.comment-box,.update-box{flex-direction:column;padding:.8rem 1rem}.score-box{flex-direction:row;height:auto;width:100px;padding:.5rem;order:1}.comment-box>.reply-btn,.comment-box>.button-box{top:auto;bottom:1.2rem;right:.8rem;max-height:50px}.user-info{gap:.5rem}.reply-box{padding:.8rem 1rem;flex-direction:column}textarea{width:100%}.reply-box>img{order:1}.reply-box>.reply-btn,.update-btn{position:absolute;bottom:.8rem;right:1rem}.user-info{flex-direction:column;gap:.2rem;align-items:flex-start}.content-box{width:100%}}*{box-sizing:border-box}.addComment-box{display:flex;align-items:flex-start;justify-content:space-between;padding:1rem 2rem;background-color:#fff;border-radius:10px;gap:1rem}.addComment-box>img{width:40px;height:40px;border-radius:50%;object-fit:cover}.addComment-box>textarea{flex:1;padding:1rem;border:1px solid hsl(223,19%,93%);border-radius:5px;font-size:16px;color:#67727e}.addComment-box>button{background-color:#5457b6;color:#fff;font-weight:700;border:none;border-radius:5px;padding:1rem;cursor:pointer}.addComment-box>button:hover{opacity:.5}@media (max-width: 600px){.addComment-box{flex-direction:column;position:relative;padding:.8rem 1rem}.addComment-box>textarea{width:100%}.addComment-box>button{position:absolute;bottom:.8rem;right:1rem}.addComment-box>img{order:1}}*{margin:0;font-family:Rubik,sans-serif;box-sizing:border-box}.delete-modal-overplay{width:100vw;height:100vh;background-color:#00000080;position:fixed;left:0;top:0;display:flex;align-items:center;justify-content:center;z-index:1000}.delete-modal-content{width:25rem;background-color:#fff;display:flex;flex-direction:column;padding:2rem;border-radius:10px;gap:1rem;color:#67727e}.comfirm-buttons{display:flex;justify-content:space-between;align-items:center}.cancel-btn,.yes-btn{color:#fff;background-color:#67727e;border:none;font-weight:700;padding:1rem;width:45%;border-radius:10px;cursor:pointer}.yes-btn{background-color:#ed6468}.cancel-btn:hover,.yes-btn:hover{opacity:.5}@media (max-width: 600px){.delete-modal-content{width:20rem}.cancel-btn,.yes-btn{padding:.7rem}}