.textinput, textarea{
  background-color: #212124 !important;
  border: 1px solid #999 !important;
  color: #BBB !important;
}

.blog-list{
  display:flex;
  flex-direction: column;
  gap:16px;
}
.blog-info{
  display:flex;
  flex-direction: column;
  justify-content: center;
  min-width:0;
}
.blog-title{
  color: var(--text, #BBBBBB);
  text-decoration: none;
}
.blog-title:hover{color:var(--accent, #68d391);}
.blog-item{
  width:100%;
  display:flex;
  min-height:132px;
  border:1px solid var(--border, rgba(255,255,255,.12));
  border-radius:8px;
  padding:12px;
  background:var(--surface, #191d24);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:transform .16s ease, border-color .16s ease;
}
.blog-item:hover{
  border-color:rgba(104,211,145,.42);
  transform:translateY(-2px);
}
.blog-image{
  min-width:190px;
  width:190px;
  margin-right:18px;
  text-align: center;
}
.blog-image img{
  width:100%;
  height:100%;
  min-height:108px;
  border-radius:6px;
  object-fit:cover;
}

.ranked-list{
  display: flex;
  flex-direction: column;
  width: 60vw;
  /* background-color: #F6F6F6; */
  margin-left: 10vw;
  margin-right: 30vw;
  word-wrap: break-word;
}
.ranked-list-img{
  max-width: 100%;
  max-height: 300px;
  text-align: center;
}
.ranked-list-img img{
  object-fit: contain;
  max-height: 300px;
  max-width: 100%;
}
.ranked-list-item-title{
  font-size: 20px;
  font-weight: bold;
}

/* Comment section */
textarea.form-control{
  max-height: 100px;
  margin-bottom: 10px;
}

.comment-box{
  border: 1px solid #BBB;
  padding: 5px;
}

.comment-author{
  display: inline;
}

.comment-date{
  display: inline;
  font-size: 12px;
}

.comment-text{
  display:inline;
}

.comment-reply-button{
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
}

.comment-reply{
  width:95%;
  margin-left:5%;
}

@media only screen and (max-width: 600px) {
  .ranked-list{
    width:95vw;
    margin:auto;
  }
  .blog-list{
    font-size:14px;
  }
  .blog-item{
    min-height:auto;
    align-items:flex-start;
  }
  .blog-image{
    min-width: 112px;
    width:112px;
    margin-right:12px;
  }
  .blog-image img{
    min-height:82px;
  }
  .blog-title{
    font-size:18px;
  }
}