.main{
   display:flex;
}
body{
   background-color: #f4f6f8;
}
.heading{
   background-color: #4a6cf7;
}
#h1{
   color: white;
   padding: 10px;
   text-align: center;

}
.postbox{
   display: flex;
   flex-direction: column;
   background-color:white;
   border: 1px solid #ddd;
   height:610px;
   margin-top: 5px;
}
#posttitle{
   text-align: center;
   color: blue;
   border: 1px solid #ddd;
   padding: 10px;
   height: 30px;
   width: auto;
   flex:1;
}
.write textarea{
   flex:none;
   margin:5px;
   height: 400px;
   width: 100%;
}
.write{
   flex:1;
}
.actions {
   width: 120px;       
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}#save, #del, #edit, #complete, #clrall {
   width: 100%;   
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}
#save{
   background-color: #4a6cf7;
   color: white;
}
#clrall{
   background-color: #e0e0e0;
   color:#333
}
#del{
   background-color: #e53935;
   color: white;
}
#edit{
   background-color: #90caf9;
   color:#1a1a1a;
}
#complete{
   background-color: #ffb74d;
   color:#1a1a1a;
}
#postbox{
   overflow-y: auto;
   overflow-x: hidden;
}
#postitile{
   width:auto;
   color: #eee;
   position: sticky;
}
#postbox div {
  display: block;
  background-color: #fafafa;
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
#postbox div {
  word-wrap: break-word;
}
#postbox div.selected {
  background-color: #dbe4ff;
}
.blog-item {
  padding: 10px;
  margin: 5px;
  background-color: #f5f5c0;
}
.blog-item:hover {
  background-color: #e0e0a0;
}
@media (min-width: 901px){
   .write textarea{
      width: 1190px;
   }
   .postbox{
      width: 270px;
   }
}
@media (max-width: 900px){
   .write textarea{
      width:500px;
      flex:none;
   }
   .postbox{
      width:200px;
   }
   .actions{
      width:120px;
   }
}
@media (max-width: 650px) {
   .main{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-start;
   }
   .postbox{
      width:35%;
      height:500px;
      flex-shrink: 0;
   }
   .write{
      width:65%;
      height: 500px;
      display:flex;
      flex-shrink: 0;
      margin:5px;
   }
   .write textarea{
      margin:0px;
      width:100%;
      height: 100%;
      box-sizing: border-box;
   }
  .actions {
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    margin-top: 0;
  }
  #save, #del, #edit, #complete, #clrall {
    width: auto;
    flex: 1;
    min-width: 55px;
    height: 40px;
    font-size: 11px;
  }
}