:root {
  --bg-darker: #082032;
  --bg-main: #2C394B;
  --bg-lighter: #334756;
  --text-clr: #ececec;
  --accent-clr: #FF4C29;
}

* {
  font-family: sans-serif;
  font-weight: 100;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-main);
  color: var(--text-clr);
  text-align: center;
}

a {
  text-decoration: none;
  color: var(--accent-clr);
}

.hero {
  width: 100%;
  text-align: center;
  padding: 64px;
  box-sizing: border-box;
  background: url(/assets/banner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero > * {
  margin: 20px auto;
}

.hero > h1 {
  font-weight: 800;
  font-size: 42px;
}

.hero > p {
  max-width: 400px;
}

.controls {
  margin: 32px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.controls > * {
  margin: 0 4px;
}

table {
  min-width: 500px;
  margin: 32px auto;
  border-spacing: 0;
}

tr {
  text-align: left;
}

td {
  padding: 2px 16px;
}

th {
  padding: 8px 16px;
  background: var(--bg-lighter);
}

.name {
  text-transform: capitalize;
}

.timestamp {
  font-size: 14px;
  padding-bottom: 16px;
  position: sticky;
  top: 100%;
}

@media screen and (max-width: 500px) {
  table {
    min-width: 100%;
  }
}