@import "https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--purple-600:#5457b6;--pink-400:#ed6468;--purple-200:#c3c4ef;--pink-200:#ffb8bb;--grey-800:#324152;--grey-500:#67727e;--grey-100:#eaecf1;--grey-50:#f5f6fa;--white:#fff;--semi-bold:500;--bold:700}body{background-color:var(--grey-50);font-family:Rubik,sans-serif;font-size:clamp(.75rem,.6786rem + .357143vw,1rem);line-height:1.5em}main{flex-direction:column;gap:1rem;padding:2rem 1rem;display:flex}button{cursor:pointer;background-color:#0000;border:none;justify-content:center;align-items:center;display:flex}textarea{font-family:inherit;font-size:inherit}textarea:focus{border:1px solid var(--purple-600);outline:none}.comment-list{grid-template-columns:1fr;gap:1rem;display:grid}.comment{background-color:var(--white);border-radius:8px;flex-direction:column;gap:12px;padding:1rem;display:flex}.header{align-items:center;gap:12px;display:flex}.header>img{width:32px}.username{font-weight:var(--semi-bold);color:var(--grey-800)}.created-at{color:var(--grey-500)}.you-badge{color:var(--white);background-color:var(--purple-600);border-radius:2px;padding:.1rem .5rem}.content{color:var(--grey-500)}.actions{justify-content:space-between;align-items:center;display:flex}.actions>button:hover{filter:brightness(200%)}.vote{background-color:var(--grey-50);border-radius:8px;justify-content:center;align-items:center;display:flex}.vote>button,.vote>span{font-weight:var(--semi-bold);color:var(--purple-200);padding:8px}.vote>button>svg:hover,.vote>button>svg:active,.vote>button:hover,.vote>button:active{color:var(--purple-600);transition:color .2s}.vote>span{text-align:center;width:2rem;font-weight:var(--semi-bold);color:var(--purple-600)}.action-btns{align-items:center;gap:1rem;display:flex}.action-btn{cursor:pointer;align-items:center;gap:8px;display:flex}.action-btn:hover{filter:brightness(200%)}.action-btn>button{color:var(--purple-600);font-weight:var(--bold)}.delete-btn{color:var(--pink-400)}.replies-container{gap:1rem;display:flex}.replies-line{background:var(--grey-100);width:2px}.replies{flex-direction:column;flex:1;gap:1rem;display:flex}.replying-to{color:var(--purple-600);font-weight:var(--semi-bold)}.comment-input{background-color:var(--white);border-radius:8px;flex-direction:column;gap:1rem;padding:1rem;display:flex}.input{resize:vertical;height:8em;color:var(--grey-800);border:1px solid var(--grey-100);border-radius:8px;padding:1rem}.input::placeholder{color:var(--grey-500)}.current-user{width:32px}.submit-btn{background-color:var(--purple-600);color:var(--grey-50);font-weight:var(--bold);border-radius:.5rem;padding:.75rem 1.5rem}.modal-overlay{background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal{background:#fff;border-radius:10px;flex-direction:column;gap:1rem;max-width:18.75rem;padding:20px;display:flex}.modal>h3{font-size:1.2rem;font-weight:var(--semi-bold);color:var(--grey-800)}.modal>p{color:var(--grey-500)}.modal-actions{justify-content:space-between;display:flex}.modal-actions>button{color:var(--white);font-weight:var(--bold);border-radius:8px;padding:10px 12px}.modal-cancel-btn{background-color:var(--grey-500)}.modal-delete-btn{background-color:var(--pink-400)}@media screen and (width>=48rem){main{max-width:48rem;margin-inline:auto}.comment{min-height:150px;padding-inline:80px;position:relative}.vote{flex-direction:column;padding:.5rem 0;position:absolute;top:20px;left:20px}.action-btns{position:absolute;top:25px;right:20px}.replies-container{gap:40px;margin-left:40px}.comment-input{padding-inline:80px 120px;position:relative}.actions>img{width:40px;position:absolute;top:20px;left:20px}.actions>button{position:absolute;top:20px;right:20px}.modal-overlay{z-index:2}.modal{max-width:375px;padding:24px}}