* {
  box-sizing: border-box;
}

body {

  margin: 0px;
	padding:0px;
	text-align:center;
	background: url("images/nobackground.png") 50% 0% no-repeat fixed #f1f1f1;
	font-family: 'Roboto', Arial, serif; font-weight: 300;
	background-size: cover;
	overflow-y: scroll;
}

.header {
  grid-area: header;
  padding: 20px;
  text-align: left;
  font-size: 35px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'left right right right right right'
    'footer footer footer footer footer footer';
}
.sites {
  margin-right: 100%;
}
.left,
.right {
  padding: 10px;
  height: 450px;
}

.left {
  grid-area: left;

}


.right {
  grid-area: right;
  background-color:#ccc;
}

#totl {
  border-radius: 50%;
  width: 40%;
  height: 40%;
  display: block;
  /* margin: 0 40% 0 40%; */
}

.sidenav a {
  color: black;
  padding: 24px;
  text-decoration: none;
  display: block;
}

.sidenav a:hover {
  background-color: #ddd;
  color: black;
}

.footer {
  grid-area: footer;
  padding: 1px;
  text-align: center;
}
  #footer {
    color: white;
  }

@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas:
      'header header header header header header'
      'left left left left left left'
      'middle middle middle middle middle middle'
      'right right right right right right'
      'footer footer footer footer footer footer';
  }
}