@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";:root{--primary-purple-600: hsl(238, 40%, 52%);--primary-pink-400: hsl(358, 79%, 66%);--primary-purple-200: hsl(239, 57%, 85%);--primary-pink-200: hsl(357, 100%, 86%);--neutral-grey-800: hsl(212, 24%, 26%);--neutral-grey-500: hsl(211, 10%, 45%);--neutral-grey-100: hsl(223, 19%, 93%);--neutral-grey-50: hsl(228, 33%, 97%);--neutral-white: hsl(0, 100%, 100%);--spacing: 1em;--rounded-corners: .5em}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.modal-container{position:fixed;left:50%;top:50%;background-color:var(--neutral-white);transform:translate(-50%,-50%);width:25em;padding:2em 1.5em 1.5em;border-radius:var(--rounded-corners);z-index:9999}.modal-container p{margin-block:1.5em}.modal-container button{padding:.8em 2em;border-radius:var(--rounded-corners);color:var(--neutral-white);text-transform:uppercase}.modal-container button.cancel{background-color:var(--neutral-grey-500);margin-right:1em}.modal-container button.confirm{background-color:var(--primary-pink-400)}body:has(.modal-container):before{content:"";display:block;position:fixed;background-color:#000;opacity:.5;top:0;right:0;bottom:0;left:0;z-index:999}body{background-color:var(--neutral-grey-50);display:grid;place-content:center;min-height:100vh;font-family:Rubik}button{background-color:transparent;border:none;display:inline-flex;gap:.5em;font:inherit;cursor:pointer}.App{width:100%;max-width:768px}.card{display:flex;align-items:flex-start;background-color:var(--neutral-white);padding:var(--spacing);padding-bottom:1.5em;margin-bottom:1em;border-radius:var(--rounded-corners)}.card .content{width:100%}.card p{padding-top:1em}h3.current-user{background-color:var(--primary-purple-600);padding:.2em .3em;line-height:1;color:var(--neutral-white);border-radius:2px}.actions{margin-left:auto}.actions button{color:var(--primary-purple-600);font-weight:700;margin-left:1em}.view-replies-btn{margin-bottom:1em;margin-left:1em}.user-img{width:3em;height:3em}.user-img img{display:block;object-fit:cover;max-width:100%}span.comment-date{color:var(--neutral-grey-500)}.score-component{background-color:var(--neutral-grey-50);margin-right:1em;padding:.5em;text-align:center;border-radius:.5em;font-weight:700;font-size:1em;color:var(--primary-purple-600);width:2.5em}.score-component span{display:block;margin:0}.profile-header,.user{display:flex;gap:1em;align-items:center}.replies-list{margin-left:1em}.score-component button{margin-block:.5em}.card .replying-to{color:var(--primary-purple-600);font-weight:700}.replies-list:has(.reply){position:relative}.form-component{background-color:var(--neutral-white);display:flex;padding:var(--spacing);border-radius:var(--rounded-corners);align-items:flex-start}.comment-wrapper .form-component{margin-top:-1.5em;margin-bottom:1em;border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid var(--neutral-grey-100)}.form-component form{display:flex;align-items:flex-start;justify-content:space-between;width:100%}.form-component textarea{outline:none;border:none;font:inherit;padding-top:1em;padding-inline:1em;padding-bottom:2em;margin-inline:1em;border:1px solid var(--neutral-grey-100);border-radius:.5em;width:100%}.form-component button{background-color:var(--primary-purple-600);color:#fff;padding:.5em 1em;border-radius:.5em;text-transform:uppercase}@media only screen and (max-width: 768px){.App{padding:1em}.content{position:relative}.content .actions{position:absolute;right:1em;bottom:-4em}.card{flex-direction:column-reverse}.score-component{display:flex;width:5em;gap:.8em;align-items:center;margin-top:1.5em;text-align:center;justify-content:center}.replies-list{margin-left:1em}}