.page-wrapper {
  display: grid;
  grid-template-rows: auto 50vh 50vh;
}
header h1{
  color: red;
  font-family:  fantasy;
  font-size: 300px;
  top:0%;
  margin-top: 0;
}
header h2{
  font-family:  fantasy;
  text-align: center;
  font-size: 60px;
  position: absolute;
  top: 184%;
  left: 25%;
  right: 30%;
}
.summary p{
  text-align: center;
  font-family:  fantasy;
  text-align: center;
  font-size: 20px;
}
.summary a{
  color: red;
}
.summary{
  position: absolute;
  top: 200%;
  left: 15%;
}

.extra1 {
  width: 800px;
  height: 660px;
  background-image:url("botton5.png");
  background-size: cover;
  position: absolute;
  top: 101%;
  left: -3%;
  cursor: pointer;
  background-position: center;
  z-index: 998;
}
.extra1:hover{
  width: 800px;
  height: 660px;
  background-image: url("botton5.2.png");
  background-size: cover;
  background-position: center;
  position: absolute;
}
.preamble{
  font-size: 25px;
  text-align: center;
  font-family: fantasy;
  z-index: 999;
  color: white;
  position: absolute;
  display: none;
  width: 550px;
  top: 107%;
  right: 20%;
}

.extra2 {
  width: 775px;
  height: 655px;
  background-image:url("botton1.png");
  background-size: cover;
  position: absolute;
  top: 210%;
  right: 0%;
}
.extra2:hover{
  width: 800px;
  height: 660px;
  background-image: url("botton1.2.png");
  background-size: cover;
  background-position: center;
  position: absolute;
}
.explanation{
  font-size: 25px;
  text-align: center;
  font-family: fantasy;
  z-index: 999;
  color: white;
  position: absolute;
  display: none;
  width: 550px;
  top: 213%;
  left: 10%;
}
.extra3 {
  width: 775px;
  height: 655px;
  background-image:url("botton3.png");
  background-size: cover;
  position: absolute;
  top: 410%;
  right: 0%;
}
.extra3:hover{
  background-image: url("botton3.2.png");
}
.benefits{
  font-size: 25px;
  text-align: center;
  font-family: fantasy;
  color: white;
  z-index: 999;
  position: absolute;
  display: none;
  width: 400px;
  top: 317%;
  right: 20%;
  }

.extra4 {
  width: 800px;
  height: 660px;
  background-image:url("botton4.png");
  background-size: cover;
  position: absolute;
  top: 310%;
  left: 0%;
  cursor: pointer;
  background-position: center;
}
.extra4:hover{

  background-image: url("botton4.2.png");

}

.participation{
  font-size: 24px;
  text-align: center;
  font-family: fantasy;
  z-index: 999;
  color: white;
  position: absolute;
  display: none;
  width: 600px;
  top: 413%;
  left: 10%;
}
.participation a{
  color: red;
}
.extra5 {
  width: 800px;
  height: 660px;
  background-image:url("botton2.png");
  background-size: cover;
  position: absolute;
  top: 510%;
  left: 0%;
  cursor: pointer;
  background-position: center;
}
.extra5:hover{

  background-image: url("botton2.2.png");

}
.requirements {
  font-size: 20px;
  text-align: center;
  font-family: fantasy;
  z-index: 999;
  color: white;
  position: absolute;
  display: none;
  width: 600px;
  top: 506%;
  right: 10%;
}
.requirements a{
  color: red;
}
footer {
  text-align: center;
  position: absolute;
  left: 35%;
  right: 35%;
  top: 600%;
  margin-bottom: 15px;

}
footer a{
  color: black;
  text-decoration-line: none;
  font-family: fantasy;
  font-size: 20px;
  margin: 1em;
}
footer a:hover{
  color: red;
}
.design-selection h3{
  position: absolute;
  font-size: 30px;
  top:290%;
  left: 40%;
  font-family: fantasy;

}
.design-selection nav {
  position: absolute;
  top: 300%;
}
nav ul{
  list-style-type: none;
  display: flex;
  margin-left: 1px;

}
nav a{
  color: black;
  font-family: fantasy;
  text-decoration: none;
  margin-right: 2px;
}
nav a:hover{
  color: red;
}
.design-archives h3{
  position: absolute;
  font-family: fantasy;
  font-size: 30px;
  top:390%;
  left:45%;
}
.design-archives nav{
  display: flex;
  position: absolute;
  top: 400%;
  left: 35%;
  font-size: 20px;
}
.design-archives nav a{
  margin-right: 5em;
}
.zen-resources h3{
  position: absolute;
  font-family: fantasy;
  font-size: 30px;
  top:490%;
  left:45%;
}
.zen-resources li{
  margin-right: 3em;
}
.zen-resources a{
  color: black;
  font-size: 20px;
  text-decoration: none;
}
.zen-resources a:hover{
  color: red;
}
.zen-resources ul{
  list-style-type: none;
  color: black;
  font-family: fantasy;
  display: flex;
  margin-left: 1px;
  position: absolute;
  top:500%;
  left:25%;

}



body{
  background-color: #996633;
  height:  900px;
  width: 100%;
  height: 1000px;
}
@media screen and (max-width : 900px) {

  header h2{
    font-size: 50px;
    position: absolute;
    top: 175%;
    left: 25%;
  }

}