*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@font-face {
  font-family:'Figtree';
  src: url(/assets/fonts/Figtree-VariableFont_wght.ttf),
        url(/assets/fonts/static/Figtree-ExtraBold.ttf);
}

:root{
  /* color */
  --yellow:hsl(47, 88%, 63%);
  --grey-500:hsl(0, 0%, 42%);
  --grey--900:hsl(0, 0%, 7%);
  --white:hsl(0, 0%, 100%);
  /* font weigth */
  --fw-500:500;
  --fw-800:800;
}

body{
  background-color: var(--yellow) ;
  font-family: 'Figtree' ;
  margin: 0;
  padding: 0;
}
/* card properties */
.wrapper{
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content:center ;
  width: 300px;
  height: 95dvh;
}
.card{
  background-color: var(--white);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--grey--900);
  box-shadow: 8px 6px;
}
/* text properties */
h6{
  font-weight: var(--fw-500);
  color: var(--grey--900);
  margin: 0;
  margin: 5px 0px 15px 0px;
}

h1{
  font-size: 18px;
  margin: 0px 0px 15px 0px;
}

h1:hover{
  color: var(--yellow);
  cursor: pointer;
}

.content{
  font-size: 13px;
  color: var(--grey-500); 
  margin: 0px 0px 20px 0px ;
}
.category{
  font-weight: var(--fw-800);
  text-align: center;
  font-size: 11px;
  display: inline-block;
  background-color: var(--yellow);
  padding: 5px 10px;
  border-radius: 4px;
  margin: 10px 0px 8px 0px;
}

.thumb_nail{
  width: 100%;
  border-radius: 8px;
}
.profile{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: left;
}
.profile > img{
  height: auto;
  display: inline;
  width: 25px;
}
.profile > h5{
  font-weight: var(--fw-800);
  font-size: x-small;
  font-weight: var(--fw-800);
}


.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }


@media screen and (max-width:375) {
  .wrapper{
    width: 300px;
  }
  
}