/* .app {
  border: 6px inset rgb(107, 107, 107);
} */

.blog-container {
  transition: 1s;
  display: flex;
  flex-direction: row;
  max-width: 800px;
  min-width: 280px;
  width: 60%;
  height: 120px;
  border: 1px solid rgba(255, 255, 255, 0.384);
  margin: 0% 10%;
  margin-top: 15px;
}

.blog-container:hover {
  border: 1px solid rgb(118, 250, 147);
  box-shadow: 0px 0px 12px 6px rgba(55, 255, 88, 0.5);
}

.blog-img {
  transition: 0.4s;
  overflow: hidden;
  max-width: 121px;
  min-width: 120px;
  background-color: rgb(31, 31, 31);

}

.blog-img:hover {
  border: 1px solid rgb(255, 253, 126);
  cursor: pointer;
  transform: scale(1.3);
  box-shadow: 0px 0px 50px 20px rgba(255, 253, 126, 0.9);
}

.img {
  min-width: 120px;
}

.blog {
  height: calc(100%-5px);
  transition: 1s;
  color: aliceblue;
  max-width: 700px;
  /* width: 100px; */
  width: 85%;
  cursor: pointer;
  border: 1px solid rgb(8, 8, 8);
  background-color: rgb(24, 24, 24);
  border-left: 1px solid rgb(118, 250, 147);
  overflow: scroll;
}
.blog:hover {
  /* border: 1px solid rgb(118, 250, 147); */
}

.blog-name {
  transition: 0.8s;
  background-color: rgb(24, 24, 24);
  padding: 5px 10px;
  font-size: 1.2rem;
  border-bottom: 1px solid rgb(15, 15, 15);
}
.blog-name:hover {
  border-bottom: 1px solid rgb(255, 253, 126);
}

.blog-desc {
  /* position: relative; */
  transition: 0.8s;
  background-color: rgb(24, 24, 24);
  padding: 5px 10px;
  border-top: 1px solid rgb(15, 15, 15);
}
.blog-desc:hover {
  border-top: 1px solid rgb(255, 253, 126);
}