.post{
	background:white;
	box-sizing: border-box;
	padding:10px;
}

/* Grid Areas */

#archive{
	grid-area:archive;
	background: #e1e1e1;
	padding:10px;
	
}

#recent{
	grid-area:recent;
	background: none;
	padding:10px;
	
}

p{
	text-indent: 3em;
}


/* Screen Size Responsiveness */

@media (min-width:400px) {
	
	
	.bloggrid{
                display: grid;
                width:100%;
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                "archive"
                "recent"
            }
			

}

@media (min-width:700px) {
	
	
	.bloggrid{
                display: grid;
                width:100%;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                "archive archive recent  recent  recent"
            }
	

	
	
}




 /* Style the tab */
.tab {
 background: none;
padding: 0px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background:inherit;
  font-family: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px 0 10px;

}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #e1e1e1;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: none;
  border-bottom: 2px solid #EE0000;
}

/* Style the tab content */
.tabcontent {
  display: none;
margin:0px;
background: none;
}