body {
  background: radial-gradient(circle, #5290c9, #a1c8e3);
  height: 100vh;
  margin: 0;
}
.title {
  text-align: center;
  font-size: 2rem;
  font-family: "Playfair Display", serif;
  font-weight: 600;
}
.dummy_blog,
.written_blog {
  padding-left: 1%;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}
.dummy_blog h2,
.written_blog h2 {
  font-family: "Playfair Display", serif;
  transition: all 0.4s linear;
}
.blog-post,
.detail_blog {
  padding-left: 1%;
  transition: all 0.4s linear;
  border: 3px solid black;
  border-radius: 10px;
  margin: 20px;
  padding: 20px;
}
.blog-post:hover,
.detail_blog:hover {
  border-radius: 10px;
  padding: 50px;
  box-shadow: 0px 0px 20px white;
}
.blog-post:hover h2,
.detail_blog:hover h2{
  color: white;
}
.moti-stat {
  text-align: center;
  padding: 10px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
}
#delete_btn{
  padding: 10px;
  border-radius: 5px;
  background-color: transparent;
  border: #ffffff 2px solid;
  cursor: pointer;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  background-color: black;
  color : white;
  transition: all 0.3s linear;
  display: flex;
  justify-self: flex-end;
}
#delete_btn:hover{
  transform: scale(1.01);
  background-color: white;
  color : black;
  border: black 2px solid;
}
#delete_btn:active{
  transform: scale(0.97);
}
@media (min-width:400px) and (max-width: 600px) {
  .title {
    font-size: 0.9rem;
  }
  .dummy_blog,
  .written_blog {
    padding-left: 1%;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
  }
  .dummy_blog h2,
  .written_blog h2 {
    font-family: "Playfair Display", serif;
  }
  .blog-post,
  .detail_blog {
    transition: none;
    border: 2px solid white;
    margin: 20px;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0px 0px 10px white;
  }
  .blog-post:hover,
  .detail_blog:hover {
   border-radius: 10px;
    margin: 20px;
    padding: 30px;
  }
  .moti-stat {
    text-align: center;
    padding: 10px;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: 0.8rem;
  }
  .blog-post:hover h2{
  color: black;
}

#delete_btn{
  transform: scale(1.01);
  background-color: white;
  color : black;
  border: black 2px solid;
  display: flex;
  justify-self: flex-end;
}
}
@media (max-width: 400px) {
  .title {
    font-size: 0.8rem;
  }
  .dummy_blog,
  .written_blog {
    padding-left: 1%;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
  }
  .dummy_blog h2,
  .written_blog h2 {
    font-family: "Playfair Display", serif;
  }
  .blog-post,
  .detail_blog {
    transition: none;
    border: 2px solid white;
   margin: 20px;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0px 0px 10px white;
  }
  .blog-post:hover,
  .detail_blog:hover {
   border-radius: 10px;
    margin: 20px;
    padding: 30px;
  }
  .moti-stat {
    text-align: center;
    padding: 10px;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: 0.6rem;
  }
  .blog-post:hover h2{
  color: black;
}
.detail_blog:hover h2{
  color : black;
}
#delete_btn{
  
   transform: scale(1);
  background-color: white;
  color : black;
  border: black 2px solid;
  display: flex;
  justify-self: flex-end;
}
}