@media only screen and (max-width:1100px) { 
  .headerBar {
    width: 100%;
    display: grid; 
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "."
    ".";
    gap: 0px 0%;
    padding-top: 2px;
  }
}


@media only screen and (max-width:962px) { 
  .main-info,
  #libraryStreet {
    width: calc(100% - 30px);
  }

  #bookList-L,
  #bookList-R {
    display: none;
  }

  /* .search {
    margin-left: 70px;
  } */
}


@media only screen and (max-width:600px) { 
  .vine {
    display: none;
  }
  
  #libraryStreet {
    width: 100%;
    padding-left: 30px;
  }

  .search button {
    margin-right: 0;
    font-size: 18px;
  }

  #searchBar {
    font-size: 18px;
  }

  .search .material-symbols-outlined {
    transform: translateY(2px);
    padding-left: 0;
  }

  p {
    font-size: 13px;
    line-height: 18px;
  }

  .main-submitField {
    width: calc(100% - 40px);
  }

  #libraryForm {
    font-size: 13px;
  }

  .board-header, .board-form {
    grid-template-columns: 100px 1fr !important;
  }


  .board-row {
    grid-template-columns: 100px 1fr 20px !important;
  }

  .board-date-preview,
  .board-row-date {
    display: none !important;
  }

  .board {
    font-size: 13px;
  }
}