*{margin:0;padding:0;box-sizing:border-box}body{font-family:Rubik,sans-serif;background-color:#f5f6fa}.container{width:40%;margin:0 auto;padding-bottom:5rem;padding-top:3rem}.container .text-area-btn{flex:1;text-transform:uppercase;padding:1rem 1.5rem;cursor:pointer;font-family:inherit;font-weight:500;color:#fff;background-color:#5457b6;border:none;border-radius:10px}.container .text-area-btn:hover{background-color:#c3c4ef}.container .comments-container{margin:0 auto;display:flex}.container .replies{width:100%}.container .line{margin:0 3rem 1.5rem;border-left:2px solid hsl(223deg,19%,93%)}.container .section-container{margin:0 auto;display:flex;margin-bottom:1.5rem;background-color:#fff;border-radius:10px}.container .section-container .score{display:flex;flex-direction:column;margin-top:1.5rem;margin-left:1.5rem}.container .section-container .score div{background-color:#f5f6fa;display:flex;flex-direction:column;align-items:center;border-radius:10px;min-width:2rem;padding:.5rem .7rem}.container .section-container .score button{font-weight:500;color:#c3c4ef;border:none;background-color:inherit;font-size:1.2rem}.container .section-container .score button:hover{cursor:pointer;color:#5457b6}.container .section-container .score span{font-weight:500;color:#5457b6;font-size:1rem;display:inline-block;margin:.5rem 0}.container .comment-section{display:flex;flex-direction:column;width:100%;overflow:hidden;padding:1.5rem;min-height:10rem}.container .comment-section .update-container{display:flex;flex-direction:column}.container .comment-section .update-container .textarea-container{padding:0}.container .comment-section .update-container button{width:min-content;margin-left:auto}.container .comment-section .icons-container{display:flex;gap:1rem}.container .comment-section .icons-container div:last-child{display:flex;gap:.5rem}.container .comment-section .icons-container div:last-child:hover span{color:#c3c4ef}.container .comment-section .icons-container div:last-child:hover svg path{fill:#c3c4ef}.container .comment-section .icons-container div:first-child{display:flex;gap:.5rem}.container .comment-section .icons-container div:first-child:hover span{color:#ffb8bb}.container .comment-section .icons-container div:first-child:hover svg path{fill:#ffb8bb}.text-content{line-height:1.5}.user-info{display:flex;justify-content:space-between;padding-bottom:1rem}.user-info .you{color:#fff;background-color:#5457b6;padding:.2rem .3rem}.user-info span{color:#5457b6;font-weight:500}.user-info div:first-child{display:flex;align-items:center;gap:1rem}.user-info div:first-child img{width:32px}.user-info div:nth-child(2){display:flex;margin-left:auto;gap:.5rem;align-items:center}.user-info div:nth-child(2):hover{cursor:pointer}.textarea-container{display:flex;align-items:start;background-color:#fff;border-radius:10px;padding:2rem;gap:1rem;margin-bottom:1.5rem}.textarea-container img{width:32px;flex:1}.textarea-container button{flex:1;text-transform:uppercase;padding:1rem 1.5rem;cursor:pointer;font-family:inherit;font-weight:500;color:#fff;background-color:#5457b6;border:none;border-radius:10px}.textarea-container button:hover{background-color:#c3c4ef}textarea{flex:auto;width:100%;font-family:inherit;font-size:1rem;display:block;border:1px solid hsl(223deg,19%,93%);border-radius:10px;height:6rem;overflow:hidden;resize:none;padding:.5rem 1rem}textarea:focus{outline:1px solid hsl(212deg,24%,26%)}.replying-to{color:#5457b6;font-weight:600}.container-modal{width:100%;height:100%;background-color:#00000043;position:fixed;top:0;display:grid;place-content:center}.container-modal .modal{width:20rem;color:#67727e;background-color:#fff;border-radius:10px;padding:2rem}.container-modal .modal h2{color:#3d3d3d;padding-bottom:1.5rem}.container-modal .modal p{padding-bottom:1rem}.container-modal .modal div{display:flex;justify-content:center;gap:1rem}.container-modal .modal div button{color:#fff;width:10rem;height:3rem;border-radius:10px;text-transform:uppercase;font-family:inherit;font-weight:500;border:none}.container-modal .modal div button:hover{cursor:pointer}.container-modal .modal div button:first-child{background-color:#67727e}.container-modal .modal div button:first-child:hover{background-color:#c3c4ef}.container-modal .modal div button:last-child{background-color:#ed6468}.container-modal .modal div button:last-child:hover{background-color:#ffb8bb}@media (max-width: 1200px){.container{width:80%;padding-top:1rem}}@media (max-width: 675px){.container{width:95%}.container .comment-section{min-height:0}.container .section-container{display:flex;flex-direction:column}.container .section-container .score{flex-direction:row;margin-top:0;align-items:center}.container .section-container .score div{display:flex;flex-direction:row;gap:1.5rem;margin:0}.container .section-container .score div span{margin:0}.icons-container{display:flex;justify-content:space-between;margin-bottom:1.5rem}.icons-container .icons{display:flex;align-items:center;margin-right:1.5rem;margin-bottom:0;padding:.5rem .7rem}.icons-container .icons div{display:flex;gap:.5rem;margin-left:1rem}.icons-container .icons div span{font-family:inherit;font-weight:500;color:#5457b6}.icons-container .icons div .red{color:#ed6468}}@media (max-width: 480px){.line{display:none}.textarea-container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;column-gap:0;margin-bottom:0}.textarea-container textarea{grid-column:span 3;grid-row:1/2}}