@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&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{
    font-size: 13px;
    font-family: "Manrope", sans-serif;
    background-color: var(--light-grayish-blue);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   
}
.main-container{
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    max-width: 800px;
    margin:20px;
    border-radius: 10px;
    box-shadow: 3px 3px 30px rgb(223, 222, 222);
    
}

.image-item img{
  width:100%;
  display: inherit;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100%;
  object-fit: cover;
}
.content-item{
    padding:30px;
    display: flex;
    flex-direction: column;
    gap:20px;
}
.content-item h2{
    color:var(--very-dark-grayish-blue);
    font-weight: 700;
    cursor: pointer;
}
.content-item h2:hover,.profile h5:hover{
    color:var(--grayish-blue);
}
.content-item p{
    color:var(--desaturated-dark-Blue);
    font-size: 14px;
    line-height: 1.2rem;
}
.writer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.profile{
    display: flex;
    align-items: center;
    gap:15px;
}
.profile img{
    width:3rem;
    border-radius: 50%;
}
.name h5{
    font-weight: 900;
    color:var(--very-dark-grayish-blue);
    cursor: pointer;
}
.name p{
    font-size: 12px;
}
.share{
    padding:10px;
    background-color: var(--light-grayish-blue);
    border-radius: 50%;
    cursor: pointer;
}
.share:hover,.share.active{
    background-color: var(--grayish-blue);
}
@media screen and (max-width:815px){
    .main-container{
        display:grid;
        grid-template-columns: 1fr;
        max-width: 600px;
       
    }
    .content-item{
        padding-bottom: 0px;
    }
    .image-item img{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
    }
    .speech-bubble{
        width:100%;
        top:0 !important;
        left:0;
        height:50px;
    }
    .speech-bubble::after{
        display:none;
    }
   
}
.speech-bubble {
	position: absolute;
	background:var(--very-dark-grayish-blue);
	border-radius: .4em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px 30px;
    gap:10px;
    right:-20%;
    top:-100%;
    display:none;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: var(--very-dark-grayish-blue);
	border-bottom: 0;
	margin-left: -10px;
	margin-bottom: -10px;
}
a{
    text-decoration: none;
}
.facebook{
    border-radius:50% ;
    padding:5px;
    
}
.attribution { font-size: 11px; text-align: center; margin: 20px;text-align: center !important;}
.attribution a { color: hsl(228, 45%, 44%); }