body {
    display: flex;
    flex-direction: column;
    color: white;
    margin: 0;
    text-align: left;
    font-family: "Gill Sans", sans-serif;
    font-size: max(1em, 1.5vh);
}

.main {
    padding-left: 15%;
    padding-right: 15%;
    background-color: #99b8ba;
    color: #251c53;
    min-height:600px;
}

.main h1 {
    margin-bottom: 12px;
}

img {
    height: 45vh;
}

.header {
    padding-left: 15%;
    padding-right: 15%;
    background-color: #251c53;
    background: url("bg.png");
    min-height: 200px;
}

.header h1 {
    font-size: 4em;
    margin-top: 6px;
}

#snake {
    height: 45vh;
    display: block;
    margin-left: auto;
    margin-top: -12em;

}

a#header {
    color: white;
    text-decoration: none;
}

a#header:hover {
    color: black;
}

.footer {
    background-color: #251c53;
    background: url("bg.png");
    padding: 5px;
    padding-left: 15%;
    padding-right: 15%;
    min-height: 200px;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

/* Map  */

#map {
    height: 45vh;
    width: 70%;
}

/* On small devices */
@media screen and (orientation:portrait ) {
    .main { padding-left: 2%; padding-right: 2% }
    .header { padding-left: 2%; padding-right: 2% }
    .footer { padding-left: 2%; padding-right: 2% }
    img { height: 35vh; max-width: 100%; }
    #map { height: 35vh; width: 90%; }
    #snake { height: 28vh; margin-top: -4em;}
    .header h1 { margin: 2px }
}

/* Nice Buttons */
button {
  background-color: white;
  border: 1px solid lightgray;
  border-radius: 6px;
  margin: 2px 0px;
  color: #3c4043;
  cursor: pointer;
  font-family: arial,sans-serif;
  font-size: 14px;
  height: 36px;
  line-height: 27px;
  min-width: 54px;
  padding: 0 16px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
}

button:hover {
  border-color: gray;
  background-color: #f8f9fa;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 2px;
  color: #202124;
}

button:focus {
  border-color: #4285f4;
  outline: none;
}

/* Nice table */

table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}