*{
  font-family: Times New Roman;
  
}

h2{
  margin: 1px;
}

p{
  margin:1px;
}

.title{
  text-align: left;
  margin: 1px;
}

.searchbar{
  margin-left: auto;
  width:250px;

}

input::placeholder {
  text-align: center; /* Or 'left', 'right' */
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Comic Sans MS
}

img{
  width:100%;
}

header, main {
    padding: 12px;
    /*border: 2px solid #ccc;*/
    margin: 5px;
    text-align: left;
    display: flex;
}

article{
    /*border: 2px solid #ccc;*/
    display: block;
}

.divider{
  margin: 5px;
}

."TOC-MAIN"{
  border: 1px solid #ccc;
  display: grid;
  grid-template-areas: 
    "TOC mainContent";
  grid-template-columns: 1fr 2fr;
  margin: 1px;
}

.mainContent {
    grid-area: mainContent;
    display: grid;
    grid-template-areas:
        " article infobox"
        " line infobox"
        " article2 infobox"
        " line2 infobox"
        " article3 article3";
    grid-template-columns: 2fr 1fr;
    gap: 1px;
    margin: 1px;
    padding: 1px;
}

.TOC {
    grid-area: TOC;
    /*border: 1px solid blue;*/
    margin: 1px;
    padding: 5px;
    height: 100%;
    
}

article:first-of-type {
    grid-area: article; 
    /*border: 1px solid orange;*/
    padding: 5px;
}

.infobox {
    grid-area: infobox;
    /*border: 1px solid gray;*/
    padding: 5px;
}

.hr-line {
    grid-area: line;
    border: none;
    border-top: 1px solid gray;
    margin: 1px;
    width: 95%;
}

article:nth-of-type(2) {
    grid-area: article2;
    /*border: 1px solid purple;*/
    padding: 5px;
}

.hr-line2 {
    grid-area: line;
    border: none;
    border-top: 1px solid gray;
    margin: 1px;
    width: 95%;
}

article:last-of-type {
    grid-area: article3;
    /*border: 1px solid purple;*/
    padding: 5px;
}