.page-wrapper{
  display: grid;
  grid-template-columns: 20% 1% 64% 15%;
  grid-template-row: 1fr 1fr 1fr 1fr 1fr;

}

body,
html{
  min-height: 100%;
}

body {
  background-image: url(https://cdn.europosters.eu/image/1300/calendar/zen-i50431.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  text-align: justify;
  font-stretch: condensed;
  margin-left: 30px;
  margin-right: 30px;
 
}

.intro{
   grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  line-height: 20px;
}

.mainsupporting{
 grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}


footer{
  font-size: 120%;
  word-spacing: 10px;
  text-indent: none;
	background-color: rgba(120, 210, 255, 0.5);
  width: 300px; 
  border-radius: 20px;
  display: block;text-align: center;
}
a:hover{
  color: red;
}

aside{
	background-color: rgba(120, 210, 255, 0.3);
  max-width: 100%;
    border-radius:15px; 

}
.sidebar{
    grid-column-start:  1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
}


h1{
  text-align: center;
  font-style: italic;
  font-size: 40px;
  color: green;
}



h2{
  text-align: center;
  font-size: 20px;
}

h3{
  text-align: center;
  font-size: 20px;
}

@media (max-width: 500px) 
{

  .page-wrapper{
    display: block;
  }

}