body {
  background-color: #a0cbff;
  background-size: 50%;
  background-image: url("/images/koi.png");
  background-repeat: repeat;
}

header {
  background-image: url("/images/JohtoMap.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  color: white;
  text-align: center;
}

a {
  color: white;
}

.box {
  background-color: rgba(0, 0, 0, .8);
  box-shadow: 1px 1px 15px 2px black;
  color: white;
  margin: auto;
  display: inline-block;
}
  .box > p {
    padding: 5%;
  }

#main {
  min-height: calc(100vh - 15vh);
  width: 45%;
  position: absolute;
  left: 27.5%;
}

#side {
  position: relative;
  left: 7.7%;
  width: 18%;
  
  text-align: center;
}

@media screen and (max-width: 480px) {
  /* For mobile phones: */
  .box {
    display: block;
  }
  #side, #main {
    position: relative;
    left: 0%;
    width: 50%;
  }
  #main {
    width: 90%;
  }
}

img {
  max-width: 100%;
}