/*General*/
p{
  font-family: "Figtree", Arial;
  font-size: 14px;
  line-height: 150%;
}

h1{
  font-family: "Figtree", Arial;
  font-size: 24px;
  line-height: 150% ;
}

body{
  background-color: rgb(244, 208, 78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/*Main Content*/
.card-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 95%;
  max-width: 384px;
  background-color: white;
  border-radius: 20px;
  border: solid;
  border-width: 1px;
  box-shadow: 8px 8px 0 black;
}

.blog-preview{
  border-radius: 10px;
  max-width: 100%;
  margin: 24px;
}

.card-description{
  padding-left: 24px;
  padding-bottom: 12px;
}

.tag{
  background-color: rgb(244, 208, 78);
  color: rgb(17, 17, 17);
  font-weight: 800;
  border-radius: 4px;
  padding: 4px 12px;
  margin: 0;
  width: fit-content;
}

.publish-date{
  color: rgb(17, 17, 17);
  font-weight: 500;
}

.blog-title{
  color: rgb(17, 17, 17);
  font-weight: 800;
  /*Animates both entering and leaving*/
  transition: 0.25s;
}

/*Hovering Effect*/
.blog-title:hover{
  cursor: pointer;
  color: rgb(244, 208, 78);
}

.blog-description{
  color: rgb(107, 107, 107);
  font-size: 16px;
}

.author{
  display: flex;
  align-items: center;
  width: 129px; 
}

.profile-img{
  height: 32px;
}
    
.author-name{
  padding-left: 12px;
  font-weight: 800;
}

/*Footer*/
.attribution { 
  font-size: 0.6875rem; 
  text-align: center;
  padding-top: 24px; 
}

.attribution a { 
  color: hsl(228, 45%, 44%); 
}