/*http://www.colorhexa.com/4cb6b4*/

body { 
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Calibri';
  background-color: #fff;
}

.head {
  display: grid;
  grid-template-columns: 2fr 3fr; 
  margin: 1em;
  padding: 2em;
  margin-bottom: 8em;
}

.suggest {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  grid-column-gap: 1em;
  grid-row-gap: 4em;
  margin: 4em; 
  font-size: 1.2em;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 4em;
  margin: 1em;
}

@media only screen and (max-width: 800px) {
  .wrapper, .suggest, .head {
    grid-template-columns: 1fr;
  }
  .head, .header {
    padding: 0;
    margin: 0;
  }
}

h1, h2, h3, h4 {
  font-weight: 500;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2em;
  text-align: center;
}

h3 {
  font-size: 1.2em;
}

.suggestions ul {
  list-style: cjk-decimal;
}

.box {
  background-color: white;
  color: black;
  border: 0.1em solid grey;
  margin-left: 1em;
  margin-right: 1em;
  padding: 1em;
  padding-bottom: 0.8em;
  font-size: 1.2em;
  hyphens: auto;
}

.box h2 {
  font-size: 1.2em;
}

.box:hover {
  color: #4cb6b4;
  text-decoration: wavy underline;
  border-bottom: 0.8em solid #b64c4e; 
  padding-bottom: 0em
}

a {
  text-decoration: none;
}

.header, .header:hover {
  background-color: white;
  border: 0.2em solid #aededd;
  padding-top: 4em;
  padding: 2em;
}

.header h1 {
  font-size: 5vmax;
  margin-bottom: 0;
}

.header img {
  float: right;
  margin: 0;
}

.info, .info:hover {
  background-color: white;
  color: black;
  font-size: 1.5em;
  padding-bottom: 2em;
  padding-top: 1em;
  border: 0;
  text-align: right;
}

.footer {
  font-size: 8vw;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

a {
  color: #2b8180;
}

a:hover {
  color: #b64c4e;
}

hr {
  border: 0.1em solid grey;
}

.left {
  border: 0.1em solid #aededd; 
  width: 80vw;
  float:left;
}

.right {
  border: 0.1em solid #aededd; 
  width: 80vw; 
  float:right;
}