@import"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap";:root{--share-click-background:hsl(217, 19%, 35%);--button-click-background:hsl(214, 17%, 51%);--grayish-blue: hsl(212, 23%, 69%);--light-grayish-blue:hsl(210, 46%, 95%);--card-background:white}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{display:grid;place-items:center;height:100vh;background-color:var(--light-grayish-blue)}button:hover{cursor:pointer}img{display:block}#root{width:85%;max-width:320px}.imageSection{width:100%;height:215px;background-image:url(/assets/drawers-Dp_c42v-.jpg);background-size:cover;background-repeat:no-repeat;border-radius:10px 10px 0 0}.shareNonClicked{display:flex;justify-content:center;align-items:center;padding:.9em 2em}.avatarImage{width:50px;height:50px;border-radius:100%}.shareButton{width:40px;height:40px;margin-left:auto;border-radius:100%;border:0;display:grid;place-items:center}.textSection{font-family:Manrope,sans-serif;background-color:var(--card-background);border-radius:0 0 10px 10px}.textSection h4{font-weight:700;font-size:1rem;color:var(--share-click-background);margin-bottom:1em}.textSection article{padding:2.1em 2em .8em}.textSection article>p{color:var(--button-click-background);font-size:.83rem;font-weight:500;line-height:1.3rem}.avatar-name{font-weight:700;font-size:.9rem;color:var(--share-click-background)}.avatar-date{font-size:.8rem;color:var(--grayish-blue)}.avatar-text{margin-left:.9em}.shareSection{position:relative}.shareClicked{position:absolute;width:100%;display:flex;background-color:var(--share-click-background);padding:0 2em;opacity:0;bottom:0;top:0;border-radius:0 0 10px 10px;justify-content:center;align-items:center;transition:opacity .3s ease-in-out}.shareClicked.active{opacity:1}.social-icons{display:flex;margin-left:1.5em;gap:1em}.shareClicked p{color:var(--grayish-blue);letter-spacing:5px;font-size:.8rem}.shareButtonClicked{width:40px;height:40px;margin-left:auto;border-radius:100%;border:0;display:grid;place-items:center;background-color:var(--button-click-background)}.shareButton{position:relative}.sharedClickedDesktop{display:flex;position:absolute;background-color:var(--share-click-background);bottom:60px;padding:1em 2.5em;color:var(--grayish-blue);border-radius:10px;letter-spacing:4px;transform:scale(0);transform-origin:bottom center;transition:transform .3s ease-in-out}.sharedClickedDesktop.active{transform:scale(1)}.triangle{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--share-click-background);position:absolute;bottom:-8px;right:50%;transform:translate(50%)}.shareButton.clicked{background-color:var(--share-click-background)}@media(min-width:1400px){#root{max-width:738px;width:50%}main{display:flex}.imageSection{height:auto;border-radius:10px 0 0 10px}.textSection{border-radius:0 10px 10px 0}}