body {
  min-height: 50vh;
  font-family: helvetica, Arial, sans-serif;
  font-size: 2vmin;
  background-color: #555;
  color: white;
  margin: 3vmin 4vmin 2vmin 4vmin;
}

/* iPad portait */
@media (max-width: 768px) {
  body {
    font-size: 3vmin;
  }

  table {
    width: inherit !important;
  }
}

/* iPhone landscape only */
@media (max-width: 568px) {
  body {
    font-size: 4vmin;
  }

  table {
    width: inherit !important;
  }
}

/* iPhone portait only */
@media (max-width: 320px) {
  body {
    font-size: 4vmin;
  }

  table {
    width: inherit !important;
  }
}

a {
  color: #ffffff;
  text-decoration: none;
}

h1 {
  padding-left: 60px;
  line-height: 52px;
  margin-top: 3vmin;
}

#logo {
  float: left;
  position: absolute;
  top: 3vmin;
}

#github {
  position: absolute;
  top: 3.3vmin;
  right: 4vmin;
}

#github-cat {
  height: 4vh;
}

main {
    justify-content: center;
    display: flex;
}

label, input {
  display: block;
}

input {
  font-size: medium;
  height: 2.5em;
  margin-top: 0.2em;
  padding: 5px 10px;
  color: white;
  border: 2px solid;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/* makes input listening to height so input and select have the same height */
input {
  color: #333;
  border-color: white;
  background-color: white;
  box-sizing: border-box;
}

input[type="text"] {
  width: 70ch;
  max-width: calc(100vw - 8vmin);
}

table {
  font-size: medium;
  border: 1px solid white;
  margin-top: 2vmin;
  width: 70ch;
  max-width: calc(100vw - 8vmin);
  border-collapse: collapse;
}

table, td, th{
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
}

tr:nth-child(even) {
  background-color:#555;
}

tr:nth-child(odd) {
  background-color:#555;
}

tr, th {
 border-bottom: 1px solid white;
}

tr:last-child {
 border-bottom: none;
}

td:first-child, th:first-child {
 border-right: 1px solid white;
}

th {
  text-align: left;
  background-color: #444444;
}

th, td {
  width: 35ch;
}

footer {
  margin: auto;
}

.source a {
  word-break: break-all;
}

.source a:hover {
  text-decoration: underline;
}