html{width:100%}body{width:100%;margin:0;box-sizing:border-box;font-family:Rubik,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;background-color:#f5f6fa;position:relative}main{width:100%;padding:20px;box-sizing:border-box}p,h1,h2{margin:0}p{line-height:1.5;color:#67727e}.upvote-container{display:none}.upvote-button{width:25%;padding:17.5px;box-sizing:border-box;border-radius:12.5px;display:flex;justify-content:space-between;align-items:center;background-color:#f5f6fa}.upvote-score{font-weight:500;color:#5457b6}.comments-section,.comments-list{display:flex;flex-direction:column;gap:20px}.comment{padding:20px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;border-radius:10px;background-color:#fff;width:100%}.comment-container{display:flex;gap:20px}.comment-content{display:flex;flex-direction:column;flex:1;gap:20px}.comment__header{display:flex;flex-wrap:wrap;align-items:center;gap:15px}.header__username{color:#324152}img[alt=user-image]{width:40px}.comment__header,.comment__text,.comment__footer{font-size:clamp(16px,1rem,28px)}.replying-to{color:#5457b6}.comment__footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}.comment__footer .upvote-button{min-width:100px}.header__reply-button{display:none}.footer__reply-button{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:500}.header__reply-button p,.footer__reply-button p{color:#5457b6}.reply-comment{max-width:95%}.user-identifier{width:10%;min-width:50px;padding:5px;border-radius:5px;text-align:center;color:#fff;background-color:#5457b6}.modify-container{display:flex;gap:10px;margin-left:auto}.modify-desktop{display:none}.delete-container,.edit-container{display:flex;align-items:center;gap:10px}img[alt=edit-icon],img[alt=delete-icon]{width:clamp(12px,3vw,24px)}.reply-container{width:100%;border-left:2px solid hsl(223,19%,93%);display:flex;flex-direction:column;align-items:flex-end;gap:20px}.comment-form{width:100%;padding:20px;box-sizing:border-box;border-radius:10px;display:flex;flex-direction:column;gap:20px;background-color:#fff}textarea{width:100%;max-width:100%;padding:20px 30px;border-radius:10px;box-sizing:border-box;font-family:Rubik,sans-serif;font-size:16px;color:#324152;border:2px solid hsl(223,19%,93%)}textarea:hover{cursor:pointer}.error-text{color:#ff6257}.comment-form__footer{display:flex;justify-content:space-between;align-items:center}button{width:35%;padding:15px;border:none;border-radius:7.5px;font-family:Rubik,sans-serif;font-size:16px;font-weight:500;color:#fff;background-color:#5457b6}.reply-form{width:100%;max-width:95%}.modal-background{width:100%;height:100%;position:absolute;top:0;left:0;opacity:.5;background-color:#c3c4ef}.modal{height:fit-content;max-width:90%;padding:25px;box-sizing:border-box;border-radius:10px;display:flex;flex-direction:column;gap:20px;position:absolute;top:250px;left:0;right:0;margin:0 auto;font-size:clamp(16px,1rem,28px);background-color:#fff}.modal__heading{color:#324152}.modal__buttons{display:flex;justify-content:space-between;gap:20px}.modal__buttons button{width:50%;max-width:350px;font-size:clamp(16px,1rem,28px)}.cancel-button{padding:15px;background-color:#67727e}.delete-button{padding:15px;background-color:#ed6468}.edit-form{width:100%}.edit-form textarea{margin-bottom:20px;color:#324152}.update-button-container{display:flex;justify-content:flex-end}.loading-screen,.error-screen{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.loading-text{color:#5457b6;text-align:center}.error-text{color:#c73a0f;text-align:center}@media screen and (min-width: 1050px){.comments-section{max-width:60%;margin:0 auto}.modal{width:30vw;min-height:200px;justify-content:center}.upvote-container{display:block;min-height:120px;min-width:6%;max-width:6%}.upvote-button{width:auto;height:100%;max-height:120px;flex-direction:column}.header__reply-button{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-left:auto;font-weight:500}.comment__footer{display:none}.modify-desktop{display:flex}img[alt=edit-icon],img[alt=delete-icon]{width:clamp(12px,1vw,24px)}.header__reply-button:hover *,button[type=submit]:hover,.modify-container .delete-container:hover,.modify-container .edit-container:hover{opacity:.5}}