@charset "utf-8";

.app-layout {
	display: grid; /* 1 */
	grid-template-columns: 3fr 1fr 1fr 3fr; /* 2 */ /* 1 fraction */
	grid-template-rows: 100vh; /* 3 */ /* viewport height 100vh; */
	grid-template-areas: "search replies messages tweets";
	}
	
body {
  margin: 0;
  font-family: Arial;
  background-color: #f2f2f2;
}

.box {
  color: #fff;
  padding: 1em;
  text-align: center;
  background-color: #efefef;
}

.tweets   { 
background-color: #A2DED0;
grid-column-start: 4;
grid-column-end: 5;
grid-row: 1; 
grid-area: search;
}

.replies  { 
background-color: #F4D03F; 
grid-column-start: 2;
grid-column-end: 3;
grid-row: 1; 
grid-area: replies;
}

.search   { 
background-color: #6C7A89; 
grid-column-start: 1;
grid-column-end: 2;
grid-row: 1; 
grid-area: messages;
}

.messages { 
background-color: #59ABE3; 
grid-column-start: 3;
grid-column-end: 4;
grid-row: 1; 
grid-area: tweets;
}