.header { grid-area: header; }
.sidebar { grid-area: sidebar; 
    padding: 15px;
    margin-right: 15px;
    border-radius: 15px; }
.main { grid-area: main; 
	width: 100%; }
	img { width: 100%; }
}
.footer { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header'
    'sidebar main main main'
    'sidebar footer footer footer';
  gap: 10px;
  padding: 10px;
  grid-template-columns: 400px 1fr;
}

.shown-mobile {
	display: none;
}

.hidden-mobile {
	display: content;
}

@media only screen and (max-width: 620px) {
  /* Mobile screens */
  .grid-container {
	  display: grid;
	  grid-template-areas:
	    'header'
	    'sidebar'
	    'main'
	    'footer';
          gap: 1px;
	  padding:1px;
	  grid-template-columns: unset;
  }
  .header, main, .footer {
	  width: 100%;
  }
  .sidebar {
	  width: unset;
	  margin-right: unset;
	  padding: 1px;
	  border-radius: 5px;
	  * { margin: 1px };
	  ul { 
		  padding: 1px;
	  }
	  li {
		  display: inline list-item;
		  font-size: 0.75rem;
	  }
  }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.0rem; }
  h3 { font-size: 0.75rem; }
  p { font-size: 0.75rem; }
  * {
	  margin: 2px;
  }
  .hidden-mobile {
	display: none;
  }
  .shown-mobile {
	display: contents;
  }
}

#background {
    background: none repeat scroll 0 0;
    background-color: #DADADA;
    width: 90%;
    height: 80%;
    margin: auto;
    border-radius: 15px;
    padding: 10px;
    overflow: auto;
}

#sidebar {
    float: left;
    background-color:#A0A0A0;
}

#footer {
    padding-top: 20px;
    clear: both;
}

.update {
    float: inline-start;
}

.counter {
    float: inline-end;
}

#footer p {
    font-size: 10px;
}



img {
    border: none;
}