: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%);
}
html{
    font-size: 13px;
}
body{
    margin: 0;
    padding: 0;
    background-color: var(--light-grayish-blue);
    font-family: 'Manrope', sans-serif;
}
main{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0rem 1rem;
}
article{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: white;
    color: black;
    border-radius: 12px;
    max-width: 310px;
    box-shadow: 12px 12px 50px rgba(0, 0, 0, 0.196);
    overflow: hidden;
}
 figure{
    width: 100%;
    height: 205px;
    margin: 0;
    overflow: hidden;
 }
 figure img{
    width: 100%;
 }
 .padding-style{
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    padding: 1.5rem 2.2rem;
 }
 .img-user{
    width: 40px;
    border-radius: 100%;
 }
 .icon-img{
    width: 15px;
    height: 15px;
    object-fit: fill;
 }
 .share{
   padding: .7rem;
   border-radius: 100%;
   z-index: 3;
   color: var(--desaturated-dark-blue);
   background-color: var(--light-grayish-blue);
   cursor: pointer;
   transition: all .3s ease;
 }
 .share:active{
   transform: scale(.9);
 }
 .share.active{
   color: var(--light-grayish-blue);
   background-color: var(--desaturated-dark-blue);
 }
 .avatar-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
.name-container{
   display: flex;
   gap: 1rem;
}
.span-container{
   display: flex;
   flex-direction: column;
   gap: .2rem;
}
h1{
   font-size: 1.13rem;
   color: var(--very-dark-grayish-blue);
   font-weight: 700;
   letter-spacing: 1px;
}
p{
   color: var(--desaturated-dark-blue);
   font-weight: 500;
   max-width: 20rem;
}
.name-span{
   font-weight: 700;
   color: var(--very-dark-grayish-blue);
   letter-spacing: 1px;
}
.date-span{
   letter-spacing: 1px;
   font-weight: 500;
   color: var(--desaturated-dark-blue);
}

#content-display{
   position: absolute;
   display: flex;
   align-items: center;
   color: white;
   background-color: var(--very-dark-grayish-blue);
   width: 100%;
   height: 80px;
   bottom: -80px;
   gap: 1.25rem;
   z-index: 2;
   transition: all .3s ease;
}
#content-display.visible{
   bottom: 0px;
}
#content-display span{
   letter-spacing: 6px;
   margin-left: 2rem;
   color: var(--grayish-blue);
}
.icons{
   display: flex;
   gap: 1.5rem;
}
.icons img{
   cursor: pointer;
}

@media(min-width:750px){
   body{
      position: relative;
   }
   main{
      padding: 0;
      min-height: 100vh;
   }
   article{
      position: static;
      flex-direction: row;
      height: auto;
      align-items: stretch;
      max-width: 710px;
   }
figure {
  flex: 1.55;
  height: auto; 
}

figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: left;
}
 .padding-style{
   flex: 2;
   height: 100%;
   padding: 1.5rem 3rem 2rem 2rem;
 }
 h1{
   max-width: 27rem;
   font-size: 1.5rem;
 }
 p{
   max-width: 28rem;
 }
 #content-display{
   display: flex;
   opacity: 0;
   justify-content: center; 
   align-items: center;
   border-radius: 8px;
   width: 250px;
   height: 50px;
   bottom: auto;
   gap: 1.25rem;
   z-index: 2;
   box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.151);
   transition: transform 0.3s ease, opacity 0.3s ease;
}
#content-display::after{
   content: "";
   position: absolute;
   bottom: -18px;
   left: 50%;
   transform: translateX(-50%);
   border-width: 10px;
   border-style: solid;
   border-color: var(--very-dark-grayish-blue) transparent transparent transparent;
}
#content-display span{
   margin-left: 0;
}
.icons img{
   transition: all .2s ease;
}
.icons img:hover{
   transform: translateY(-2px) scale(1.1);
}
}