html,body {
  background-color:#6e6e6e;
  font-family: Calibri;
  color:white;
  height:100%;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

#title1 {
    text-align: center;
}


.gridheader {
    grid-column: 1 / -1;
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 100%;
    text-align: center;

}

.picturebox {
    background-color: #6e6e6e;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 80%;
    text-align: center;
}


.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 80%;
    text-align: center;
}


@media (min-width: 681px) {
.wrapper {
    display: grid;
    grid-template-columns: 75fr 25fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

}
/*
@media (max-width: 680px) {
*/
@media only screen and (min-width: 42em) and (max-width: 64em) {
.wrapper {
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}