@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap";*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;font:inherit;font-family:Rubik,sans-serif;transition:all .5s}:root{--fw-normal: 400;--fw-semi-bold: 500;--fw-bold: 700;--moderate-blue: hsl(238, 40%, 52%);--soft-red: hsl(358, 79%, 66%);--light-grayish-blue: hsl(239, 57%, 85%);--pale-red: hsl(357, 100%, 86%);--dark-blue: hsl(212, 24%, 26%);--grayish-blue: hsl(211, 10%, 45%);--light-gray: hsl(223, 19%, 93%);--very-light-gray: hsl(228, 33%, 97%);--white: hsl(0, 0%, 100%);--radius: .4rem;--shadow: 0 0 .1rem rgba(0, 0, 0, .05);--hover: .5}main{position:relative;background-color:var(--light-gray);padding:1.5rem 4%;width:100vw;height:100vh}main .fixedModal{background-color:#00000080;position:fixed;top:0;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;align-items:center;padding:0 5%}main .fixedModal .container{background-color:var(--light-gray);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2.5vh;padding:8%;color:var(--dark-blue)}main .fixedModal .container h2{font-weight:var(--fw-semi-bold);font-size:120%}main .fixedModal .container .btnDiv{display:flex;justify-content:space-between;align-items:center}main .fixedModal .container .btnDiv button{padding:4% 6%;border:none;outline:none;box-shadow:var(--shadow);border-radius:var(--radius);font-weight:var(--fw-semi-bold);color:var(--light-gray);cursor:pointer}main .fixedModal .container .btnDiv button:first-child{background-color:var(--grayish-blue)}main .fixedModal .container .btnDiv button:last-child{background-color:var(--soft-red)}main .fixedModal .container .btnDiv button:hover,main .fixedModal .container .btnDiv button:focus{opacity:.5}main .mainComments{height:70%;overflow-y:scroll;display:flex;flex-direction:column;gap:4%}main .mainComments .commentCard{background-color:var(--very-light-gray);border-radius:var(--radius);box-shadow:var(--shadow);padding:5% 5% 15%;position:relative}main .mainComments .commentCard .container{display:flex;flex-direction:column;gap:2vh}main .mainComments .commentCard .container .header{display:flex;gap:4%;align-items:center;color:var(--dark-blue)}main .mainComments .commentCard .container .header img{width:13%}main .mainComments .commentCard .container .header .name{font-weight:var(--fw-bold)}main .mainComments .commentCard .container .header .time{font-size:90%}main .mainComments .commentCard .container .header .currUser{background-color:var(--moderate-blue);color:var(--white);padding:.5% 2%}main .mainComments .commentCard .container .contentEdit{background-color:var(--very-light-gray);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.8rem}main .mainComments .commentCard .container .contentEdit textarea{resize:none;outline:none;padding:.5rem 1rem;border-radius:var(--radius);border:1px solid rgba(0,0,0,.2);height:5rem;background-color:var(--very-light-gray)}main .mainComments .commentCard .container .contentEdit textarea:focus{border-color:var(--moderate-blue)}main .mainComments .commentCard .container .contentEdit button{align-self:flex-end;padding:3.5% 6%;border:none;outline:none;color:var(--very-light-gray);background-color:var(--moderate-blue);font-weight:var(--fw-semi-bold);border-radius:var(--radius);cursor:pointer}main .mainComments .commentCard .container .contentEdit button:hover,main .mainComments .commentCard .container .contentEdit button:focus{opacity:var(--hover)}main .mainComments .commentCard .container .content{line-height:140%;color:var(--dark-blue)}main .mainComments .commentCard .container .content span{font-weight:var(--fw-semi-bold);color:var(--moderate-blue)}main .mainComments .commentCard .btnActions{position:absolute;right:7%;bottom:7%;display:flex;align-items:center;gap:5vw}main .mainComments .commentCard .btnActions .btn{display:flex;align-items:center;gap:12%;cursor:pointer}main .mainComments .commentCard .votes{position:absolute;left:5%;bottom:5%;display:flex;align-items:center;background-color:var(--light-gray);padding:2% 4%;border-radius:var(--radius);gap:4vw}main .mainComments .commentCard .votes img{cursor:pointer}main .mainComments .commentCard .votes .negative{font-weight:var(--fw-bold);color:var(--soft-red)}main .mainComments .commentCard .votes .positive{font-weight:var(--fw-bold);color:var(--moderate-blue)}main .mainComments .nestedCommentCard{display:flex;flex-direction:column;gap:2.4vh;padding-top:4%;padding-left:6%;position:relative}main .mainComments .nestedCommentCard:before{position:absolute;content:"";width:1%;background-color:#0000000d;top:3%;bottom:0;left:0}main .mainComments .commentReplyDiv.mainReplyDiv{padding-top:4%}main .mainComments .commentReplyDiv form{background-color:var(--very-light-gray);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-areas:"i i i" "p . b";gap:.8rem}main .mainComments .commentReplyDiv form textarea{grid-area:i;resize:none;outline:none;padding:.5rem 1rem;border-radius:var(--radius);border:1px solid rgba(0,0,0,.2);height:5rem;background-color:var(--very-light-gray)}main .mainComments .commentReplyDiv form textarea:focus{border-color:var(--moderate-blue)}main .mainComments .commentReplyDiv form img{grid-area:p;width:30%;align-self:center}main .mainComments .commentReplyDiv form button{grid-area:b;padding:.8rem .2rem;border:none;outline:none;color:var(--very-light-gray);background-color:var(--moderate-blue);font-weight:var(--fw-semi-bold);border-radius:var(--radius);cursor:pointer}main .mainComments .commentReplyDiv form button:hover{opacity:var(--hover)}main .mainComments::-webkit-scrollbar{width:.4rem}main .mainComments::-webkit-scrollbar-thumb{background-color:var(--grayish-blue);border-radius:var(--radius)}main .mainInput{position:absolute;bottom:3%;left:4%;right:4%}main .mainInput form{background-color:var(--very-light-gray);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-areas:"i i i" "p . b";gap:.8rem}main .mainInput form textarea{grid-area:i;resize:none;outline:none;padding:.5rem 1rem;border-radius:var(--radius);border:1px solid rgba(0,0,0,.2);height:5rem;background-color:var(--very-light-gray)}main .mainInput form textarea:focus{border-color:var(--moderate-blue)}main .mainInput form img{grid-area:p;width:30%;align-self:center}main .mainInput form button{grid-area:b;padding:.8rem .2rem;border:none;outline:none;color:var(--very-light-gray);background-color:var(--moderate-blue);font-weight:var(--fw-semi-bold);border-radius:var(--radius);cursor:pointer}main .mainInput form button:hover{opacity:var(--hover)}@media screen and (min-width: 390px){main .mainComments{height:76%}}@media screen and (min-width: 1000px){main{padding:2rem 25%}main .fixedModal{padding:0 35%}main .fixedModal .container .btnDiv button{padding:3% 6%}main .mainComments::-webkit-scrollbar{width:.3rem}main .mainComments{height:73%;gap:3%}main .mainComments .commentCard{position:relative;padding:3% 3% 3% 10%}main .mainComments .commentCard .container{gap:1.5vh}main .mainComments .commentCard .container .header{gap:2.5%}main .mainComments .commentCard .container .header img{width:4%}main .mainComments .commentCard .container .header .currUser{padding:.1% .8%}main .mainComments .commentCard .container .contentEdit{gap:1rem}main .mainComments .commentCard .container .contentEdit textarea{padding:.7rem 1.4rem}main .mainComments .commentCard .container .contentEdit button{align-self:flex-end;padding:2.5% 4.5%}main .mainComments .commentCard .btnActions{right:6%;bottom:unset;top:1.4rem;gap:2vw}main .mainComments .commentCard .votes{left:2.5%;bottom:unset;top:10%;flex-direction:column;padding:1.5%;gap:1.5vh}main .mainComments .nestedCommentCard{padding-top:3%;padding-left:10%}main .mainComments .nestedCommentCard:before{width:.5%;top:8%;left:4.5%}main .mainComments .commentReplyDiv.mainReplyDiv{padding-top:2.5%}main .mainComments .commentReplyDiv form{padding:1.5rem 2rem;column-gap:1.2rem;row-gap:0;grid-template-columns:1fr 8fr 1fr}main .mainComments .commentReplyDiv form textarea{grid-area:unset;padding:.7rem 1.4rem;height:6rem;margin-left:-5%}main .mainComments .commentReplyDiv form img{grid-area:unset;width:60%;align-self:flex-start}main .mainComments .commentReplyDiv form button{grid-area:unset;padding:.8rem 1.8rem;font-size:110%;align-self:flex-start}main .mainInput{bottom:5%;left:25%;right:25%}main .mainInput form{padding:1.5rem 2rem;column-gap:1.2rem;row-gap:0;grid-template-columns:1fr 8fr 1fr}main .mainInput form textarea{grid-area:unset;padding:.7rem 1.4rem;height:6rem;margin-left:-5%}main .mainInput form img{grid-area:unset;width:60%;align-self:flex-start}main .mainInput form button{grid-area:unset;padding:.8rem 1.8rem;font-size:110%;align-self:flex-start}}@media screen and (min-width: 1400px){main .mainComments{height:79%}}@media (hover: none){main .mainComments::-webkit-scrollbar{width:.3rem}}