body {
  background-color: rgb(22, 21, 21);
  margin: 25px;
}
.title {
  text-align: center;
  font-size: 175%;
  margin-bottom: 2%;
  color: white;
  overflow-wrap: break-word;
}
@media screen and (max-width: 900px){
.title {font-size:150%}
}
@media screen and (max-width: 600px){
.title {font-size:125%}
}
@media screen and (max-width: 400px){
.title {font-size:75%}
}
.map{
  text-align: center;
  background-color: gray;
  border: 2px;
  border-style: solid;
  border-color: black;
  border-radius: 3px;
  padding: 2px;
  padding-bottom: 5px;
  margin: 2.5px;
  color: white;
  font-size: 175%;
  overflow-wrap: break-word;
}
@media screen and (max-width: 900px){
.map {font-size:150%}
}
@media screen and (max-width: 600px){
.map {font-size:125%}
}
@media screen and (max-width: 400px){
.map {font-size:70%}
}
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.img{
  width: 95%;
  padding-top: 7px;
  padding-left: 2.3%;
  display: block;
}
a:link, a:visited, a:hover, a:active {
  color: gainsboro;
}
.button{
  background-color: gainsboro;
  font-size: 125%;
  padding: 5px 10px;
  margin: 1%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  justify-self: center;
  cursor: pointer;
}
@media screen and (max-width: 900px){
.button {font-size:100%}
}
@media screen and (max-width: 600px){
.button {font-size:85%;}
}
@media screen and (max-width: 400px){
.button {font-size:75%}
}
.buttons{  
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  justify-self: center;
}
@media screen and (max-width: 900px){
.buttons {font-size:100%}
}
@media screen and (max-width: 600px){
.buttons {font-size:85%;}
}
@media screen and (max-width: 400px){
.buttons {font-size:75%}
}
.credits{
  text-align: center;
  color: white
}