:root{
    --Dark: hsl(217, 19%, 35%);
    --Dark-Blue: hsl(214, 17%, 51%);
    --Blue: hsl(212, 23%, 69%);
    --Light-Blue: hsl(210, 46%, 95%);
 }
 *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }
 body{
    font-size: 13px;
    background-color: var(--Light-Blue);
    transition: .5s;
 }
 main{
    height: 100vh;
    
 }
 h1,h2,h3,h4,h5,h6{
    font-family: Manrope;
    font-weight: 700;
    text-wrap: balance;
 }
 .text-dBlue{
    color: var(--Dark-Blue);
 }
 .text-dark{
    color: var(--Dark);
 }
 .custome-card{
    width: clamp(22rem,40%,40%);
   
 }
 .w-15{
    width: 15%;
 }
 .btn{
    background-color: var(--Light-Blue);
 }
 .custome-card{
    transition: .7s;
 }
 .share-card{
    background-color: var(--Dark);
    position: absolute;
    /* display: none; */
    width: 100%;
    bottom: 0rem;
    padding: 2rem ;
    border-top-left-radius:0 !important ;
    border-top-right-radius:0 !important ;
    /* right: 15px; */
    /* left: 0; */
    right: .2px;
    transition: .3s;
    opacity: 0;
    transform: translateY(0);
 }
 .show {
  opacity: 1;
}

.bg-dBlue{
    background-color: var(--Dark-Blue);
}
 
.btn:hover{
    /* background-color: var(--Dark-Blue); */
    
}
.btn:hover img{
    
}
.attribution { font-size: 0.6875rem; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
 

 @media (min-width: 75rem) {
    .card-img{
         width: 35%;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius:var(--bs-border-radius-xl) ;
    } 
    .share-card{
    width: 15rem;
    bottom: 4rem;
    /* left: 18.2rem ; */
    right: -4.7rem;
     border-top-left-radius:var(--bs-border-radius-xl) !important ;
    border-top-right-radius:var(--bs-border-radius-xl) !important ;
   
    transform: translateY(0);
 }
 .share-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--Dark);
}

.show {
  opacity: 1;
}
   .transformY{
  transform: translateY(-1.5rem);

}
 }