@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root {
    --Very-DarkGrayishBlue: hsl(217, 19%, 35%);
--DesaturatedDarkBlue: hsl(214, 17%, 51%);
--GrayishBlue: hsl(212, 23%, 69%);
--LightGrayishBlue: hsl(210, 46%, 95%);

}

body {
    min-height: 100vh;
    font-family: Manrope;
    color: var(--Very-DarkGrayishBlue);
}

main {
    display: flex;
    flex-direction: column;
    
}

.content {
    margin: 2rem 1rem ;
    
}
h2 {
    margin-bottom: 1rem ;
}

footer {
    display: flex;
    font-weight: 700;
    max-height: 5rem;
    
    align-items: center;
    justify-content: space-around;


   
}
#before {
    display: flex;
}

#after {
    display: none;
    background-color: var(--Very-DarkGrayishBlue);
    color: var(--LightGrayishBlue);
    min-height: 5rem;
    letter-spacing: 0.5rem;
}

#michelle {
    max-width: 10%;
    border-radius: 4rem;
   
    
}
.profile   {
    display: flex;
    flex-direction: column;
}
#share-button {
    min-height: 20px ;
    min-width: 100%;

    margin: 0;
    
}

.share-container {
    margin-right: 0.5rem;
    position: relative;
}
.speech-bubble {
    
    min-width: 100%;
   
    display: none;
    
  

}
img {
    max-width: 100%;
    
}





@media screen and (min-width: 832px) {
    body {
        display: flex;
        justify-content: center;
    align-items: center;
    }
    main {
        flex-direction: row;
        
    }

    .all-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 3rem;
    }
    footer {
        align-self: stretch;
        justify-content: space-between;
    }
    @starting-style {
        .speech-bubble-active{
            opacity: 0;
        }
    }
    .speech-bubble-active {
        transition: opacity 800ms ;
        opacity: 1;
    
        position: absolute;
        background: var(--Very-DarkGrayishBlue);
        width:200px;
        height: 60px;
        padding: 0 1rem;
        color: var(--LightGrayishBlue);
        
        top: -70px;
      left: 50%;
      border-radius: 0.5rem;
      transform: translate(-50%, -50%);
    
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    img {
        max-width: 50%;
    }
    .drawers {
        height: 100vh;
    }
}