body{
  background-color: #efefef;
  color: #555;
  font-family: Arial, Helvetica, sans-serif;
}

.notice {
  background-color: #ffe;
  border: 1px solid #ff4;
  padding: 1em;
}

h1, h2, a {
  color: #8ab746;
}

h1 > a {text-decoration: none }

.button{
  background-color: #8ab746;
  color: #fff;
  padding: 0.25em;
  text-decoration: none;
}

.wrapper {
  width: 98%;
  margin: 0 auto;
}

.chat {
  border:0;
  width:98%;
  height: 600px;
}

.footer {
  text-align: center

}

@media only screen and (min-width: 980px) {
  .wrapper {
    display: grid;
    grid-template-columns: 200px 40px auto 40px;
    grid-template-rows: 80px auto 40px 30px;
    width: 100vw;
    height: 100vh;
  }

  header {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
  }

  .info {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  main {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  footer {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
  }

  .chat {
    height:100%;
  }
}

@media only screen and (min-width: 1440px) {
  .wrapper {
    width: 80%;
    margin: 0 auto;

  }