@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";*{padding:0;margin:0;box-sizing:border-box}:root{--fontFamily: "Rubik", sans-serif;--fontSize:1.1rem;--buttonBg:hsl(238, 40%, 52%);--userColor:hsl(212, 24%, 26%);--userComment:hsl(211, 10%, 45%);--buttonColor:hsl(0, 100%, 100%);--commentBg:hsl(228, 33%, 97%);--bodyBg:hsl(223, 19%, 93%);--deleteBg:hsl(358, 79%, 66%);--deleteHover:hsl(357, 100%, 86%);--buttonHover:hsl(239, 57%, 85%)}body{font-family:var(--fontFamily);color:var(--userComment);font-size:var(--fontSize);background-color:var(--bodyBg)}img{display:block;max-inline-size:100%}svg{width:30px;height:20px}.wrapper{max-inline-size:1000px;margin:0 auto;line-height:30px;display:grid;gap:20px}button{border:none;font-family:var(--fontFamily);font-size:var(--fontSize);display:flex;align-items:center;justify-content:center;background-color:inherit;cursor:pointer}.form{display:flex;align-items:start;gap:20px}label{display:none}textarea{resize:none;width:100%;height:150px;border:2px var(--commentBg) solid;padding:20px;font-family:var(--fontFamily);font-size:var(--fontSize);color:var(--userComments);font-weight:550;cursor:pointer}textarea:focus{border:1px var(--buttonBg) solid}.userActions button{background-color:var(--buttonBg);color:var(--buttonColor);display:flex;align-items:center;justify-content:center;padding:15px;border-radius:20px;cursor:pointer}.userActions button:hover{background-color:var(--buttonHover)}.userActions img{max-inline-size:40px}.commentSec{background-color:var(--buttonColor);border-radius:20px;position:relative}.firstLevel section{padding:20px;display:flex;align-items:center}aside{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;color:var(--buttonBg);font-weight:600;background-color:var(--commentBg);padding:20px;border-radius:20px}aside button{fill:var(--buttonHover);border:none;width:100%;display:flex;align-items:center;justify-content:center;background-color:inherit;cursor:pointer;transition:all .3s ease-in}aside button:hover{fill:var(--buttonBg)}.firstLevel section section{display:block}.firstLevel section section img{max-inline-size:40px}.firstLevel section section section{display:flex;align-items:center;justify-content:space-between}.firstLevel section section .content{display:block}.profile{display:flex;align-items:center;gap:20px}.you{background-color:var(--buttonBg);color:var(--buttonColor);padding:3px;border-radius:10px}.username{color:var(--userColor);font-weight:600}.actions{display:flex;align-items:center;gap:20px}.reply button{display:flex;align-items:center;color:var(--buttonBg);font-weight:600;cursor:pointer;fill:var(--buttonBg)}.reply button:hover{color:var(--buttonHover);fill:var(--buttonHover)}.delete button{display:flex;align-items:center;color:var(--deleteBg);font-weight:600;cursor:pointer;fill:var(--deleteBg)}.delete button:hover{color:var(--deleteHover);fill:var(--deleteHover)}.edit button{display:flex;align-items:center;color:var(--buttonBg);fill:var(--buttonBg);font-weight:600;cursor:pointer}.edit button:hover{color:var(--buttonHover);fill:var(--buttonHover)}.replyTo{color:var(--buttonBg);margin-right:10px;font-weight:600}.replies{transform:translate(20%);max-inline-size:750px;background-color:var(--commentBg);margin-bottom:20px;border-radius:20px;position:relative}.replies:before{position:absolute;content:"";background-color:var(--commentBg);height:100%;width:5px;left:-50px;border-radius:10px}.replies aside{background-color:var(--buttonColor)}.replies img{max-inline-size:40px}.deleteWindow{transform:translate(50%);display:block;position:fixed;z-index:3;padding:20px;max-inline-size:400px;background-color:var(--buttonColor);border-radius:20px;transition:all .5s ease-in-out;opacity:0}.deleteWindow.shown{opacity:1}.deleteWindow div{display:flex;justify-content:space-between;margin-block:15px}.deleteWindow div button:nth-child(1){color:var(--buttonColor);background-color:var(--userColor);padding:15px;border-radius:10px;font-weight:600}.deleteWindow div button:nth-child(2){color:var(--buttonColor);background-color:var(--deleteBg);padding:15px;border-radius:10px;font-weight:600}.deleteWindow div button:hover:nth-child(1){background-color:var(--userComment)}.deleteWindow div button:hover:nth-child(2){background-color:var(--deleteHover)}.overlay{position:fixed;z-index:-2;inset:0;transition:opacity .5s ease-in-out;filter:brightness(.6);opacity:0;background-color:#00000083}.overlay.shown{opacity:1;z-index:2}.userActions{margin-block:20px;background-color:var(--buttonColor);padding:20px;border-radius:20px;width:100%}