@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&family=Barlow:wght@600&family=Bebas+Neue&family=Bitter:ital,wght@1,600&family=Estonia&family=Fraunces:ital,opsz,wght@0,9..144,900;1,9..144,700&family=Inter:wght@400;700&family=Josefin+Sans&family=Kumbh+Sans:wght@400;700&family=League+Spartan:wght@500;600;700&family=Lexend+Deca&family=Manrope:wght@500;700&family=Outfit:wght@300;400;600;700&family=Poppins&family=Roboto:ital,wght@0,400;1,300&display=swap');



:root {
    --very-dark-grayish-blue: hsl(217, 19%, 35%);
    --desaturated-dark-blue: hsl(214, 17%, 51%);
    --grayish-blue: hsl(212, 23%, 69%);
    --light-grayish-blue: hsl(210, 46%, 95%);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 body {
     background-color: var(--light-grayish-blue);
 }
.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 20rem ;
    margin-top: 20rem;
    background-color: white;
    border-radius: 20px;
    padding: -10rem 25rem;
    height: 35vh;
    width: 50%;
    margin-left: 50vh;

    
}

.img_1 {
    width: 40%;
    height: 35vh;
    border-radius: 20px 0px 0px 20px;
}

.text {
    font-size: 0.7rem;
    font-family: "Manrope", sans-serif;
    padding: -3rem;
    padding-top: 3rem;
    padding-right: 2rem;
    padding-left: 2rem;
    margin-bottom: 2rem;
   
}


h1 {
    margin-bottom: 1rem;
    color: var(--very-dark-grayish-blue);
}

p{
    font-size: 15px;
    line-height: 1.8rem;
    color: var(--desaturated-dark-blue);
    font-weight: 400;
}

.avatar {
    width: 8%;
    display: flex;
    flex-direction: row;
    border-radius: 10rem;
    margin-top: 2rem;
}
.Info{
    margin-left: 4rem;
    margin-top: -2rem;
    line-height: 3px;
}

#button {
    margin-left: 20rem;
    width: 30px;
    height: 30px;
    border-radius: 30rem;
    position: relative;
    bottom: 2.5rem;
    border: 1px solid white;
    padding: 6px;
    cursor: pointer;
    
}

#buttonClose {
    margin-left: 20rem;
    width: 30px;
    height: 30px;
    border-radius: 30rem;
    position: relative;
    bottom: 2.5rem;
    border: 1px solid white;
    padding: 6px;
    cursor: pointer;
    display: none;
}

.share {
    display: flex;
    width: 9rem;
    background-color: var(--very-dark-grayish-blue);
    padding: 0.4rem;
    position: absolute;
    align-items: center;
    justify-content: space-around;
    left: 62%;
    bottom: 37%;
    border-radius: 10px;
    color: var(--light-grayish-blue);
    display: none;
}

.sharesvg {
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: space-evenly;
   
    
}

.triangle{
    width: 20px;
    padding: 0.13rem;
    
    height:20px;
    background-color: var(--very-dark-grayish-blue);
    position: absolute;
    top: 73%;
    left: 35%;
   transform: rotateY(0deg) rotate(-45deg);
}

#buttonCloseOne {
    display: none;
}


@media only screen and (max-width: 768px) {

     
    .container {
        width: 23rem;
        height: 63vh;
        margin-left: 8rem;
        margin-top: 8rem;
        display: flex;
        flex-direction: column;
    }

    .img_1 {
        width: 23rem;
        display: flex;
        margin-top: 1rem;
        border-radius: 20px 20px 0px 0px;
        max-height: 30vh;
    }

    .text {
        font-size: 9px;
        padding: 3rem 5rem;
        color: var(--grayish-blue);
        letter-spacing: 0rem;
        
    }
    h1 {
        font-size: 20px;
        padding-left:1rem ;
        
    }
    p{
        font-size: 15px;
        line-height: 22px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .avatar {
        margin-left: 1rem;
        width: 2.5rem;
    }

    #button {
        right: 40px;
    }
    
    .Name{
        font-size: 15px;
        font-weight: 1rem;
        color: var(--very-dark-grayish-blue);
        margin-bottom: 0.5rem;
    }

    .share {
         bottom: 20%;
         padding: 2rem 1rem;
         width: 23rem;
         left: 20%;
         font-size: 1rem;
         border-radius: 0px 0px 20px 20px;
         justify-content: flex-start;
         letter-spacing: 0.3rem;
         font-size: 1rem;
         font-weight: 0.1;
         color: var(--grayish-blue);
         display: none;
         
    }

    .triangle{
        display: none;
    }

    #buttonCloseOne {
        margin: 4%;
        border-radius: 30rem;
        border: none;
        padding: 8px;
        background-color: var(--light-grayish-blue);
        color: white;
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-decoration: none;
        margin-right: -6rem;
       
    }

   
}