:root {
  --yellow: hsl(47, 88%, 63%);
  --white: hsl(0, 0%, 100%);
  --gray500: hsl(0, 0%, 42%);
  --gray950: hsl(0, 0%, 7%);
}
*,*::before,*::after{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
svg{
  max-width:100%;

  height: auto;
  margin: 15px 0;
  border-radius: 10px;
}
/* psitioning to center START */
html,body{
  height:100%;
}
body{
  background: var(--yellow);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family:'figtree',sans-serif;
}
/* psitioning to center END */
.card{
  background:var(--white);
  width:250px;
  height: 370px;
  padding:20px;
  border-radius: 15px;
  border: 1px solid #000;
box-shadow: 10px 10px #000;

}
.text_area span{
   Font size : 8px;
   font-weight: 800;
   background-color: var(--yellow);
   padding:5px;
   border-radius: 5px;
 }
.publish_time{
  color:var(--grey%00);
  margin:15px 0;
  font-size: 15px;
}

.header{
  color: #000;
  text-decoration:none;
  font-size:25px;
  padding:10px 0;
  margin:10px 0;
}
a:hover{
  color: var(--yellow);
}

.after_tittle{
  font-size:10px;
  margin:10px 0;
  color: var(--gray950);
}
footer{;
  display:flex;
}

footer img {
  width: 25px;
  height:25px;
}
footer p {
    font-size: 10px;
  font-weight: 800;
  margin-left:5px;
  padding-top: 5px;
}

.attribution{
  padding-top:40px;
  font-family: serif;
  font-size:12px;
  color: var(--yellow);
  transition: 1s;
}
.attribution a{
  color: var(--ellow);
  
}
div .attribution:hover {
  color:black ;
}
div .attribution a:hover {
  color: blue;

}