@import"https://fonts.googleapis.com/css2?family=Rubik&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}: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%)}body{background-color:var(--neutral-grey-100);font-family:Rubik;display:grid;place-content:center;min-height:100vh}body:has(.delete-modal):after{content:"";display:block;position:fixed;inset:0;background-color:#000;opacity:.5}img{object-fit:cover;max-width:100%}button{font:inherit;background:none;outline:none;border:none;cursor:pointer}.App{padding:1em;max-width:768px;width:100%;margin-inline:auto}.card-header{display:flex;align-items:center;margin-bottom:.5em}.comment-date,.delete-modal span{color:var(--neutral-grey-500)}.actions{display:flex;gap:1em}.actions button{color:var(--primary-purple-600);font-weight:700}.delete-label{color:var(--primary-pink-400)}.actions span{margin-left:.5em}.content{width:100%}.replying-to{color:var(--primary-purple-600);font-weight:700}.actions{margin-left:auto}.comment{background-color:var(--neutral-white);padding:1em;margin-bottom:1em;display:flex;border-radius:10px;gap:1em;align-items:flex-start}.score-component{display:flex;flex-direction:column;align-items:center;background-color:var(--neutral-grey-100);width:2.5em;padding-block:.5em;border-radius:5px}.score-component span{margin-top:.5em;margin-bottom:.2em;color:var(--primary-purple-600);font-weight:700}.user{display:flex;align-items:center;gap:.5em}.user-img{width:3em;height:3em}.username{font-weight:700}.replies-list{padding-left:1em}.form-component{display:flex;align-items:flex-start;gap:1em;background-color:var(--neutral-white);padding:1em;border-radius:10px;margin-bottom:1em}.wrapper .form-component{margin-top:calc(-1em - 5px);padding-top:1em;border-top:1px solid var(--neutral-grey-100);border-top-left-radius:0;border-top-right-radius:0}.form-component form{display:flex;align-items:flex-start;width:100%}.form-component textarea{border:1px solid var(--neutral-grey-100);padding:1em 1em 5em;width:100%;border-radius:5px;font:inherit;outline:none}.form-component .cta{background-color:var(--primary-purple-600);padding:.5em 1em;border-radius:5px;vertical-align:top;margin-left:1em;color:var(--neutral-white);text-transform:uppercase}.delete-modal{background-color:#fff;position:fixed;z-index:999;left:50%;top:50%;width:25rem;transform:translate(-50%,-50%);padding:1.5em;border-radius:20px}.delete-modal p{margin-bottom:1em;font-weight:700;font-size:larger}.action-buttons{margin-top:1.5em;display:flex}.action-buttons button{text-transform:uppercase;padding:1em 2em;color:var(--neutral-white);border-radius:5px;width:100%}button.cancel-action{background-color:var(--neutral-grey-500);margin-right:.5em}button.delete-action{background-color:var(--primary-pink-400)}@media only screen and (max-width:768px){.comment{flex-direction:column-reverse;position:relative}.actions{position:absolute;right:1em;bottom:2em}.score-component{flex-direction:row;padding:.5em;gap:1em;width:inherit}}