:root {
   --dark-grey: #444444;
   --light-grey: #9e9e9e;

   --dark: #334759;
   --normal: #7b8faf;
   --light: #eaf0f9;
   --lighter: #f6faff;
}

body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
   font-size: 1rem;
   color: var(--dark-grey);
}

header, footer {
   background-color: var(--dark);
   color: white;
   overflow: auto;
}

header > div, footer > div {
   padding: 1rem;
}

header h1 {
   margin: 0;
   font-weight: 500;
   font-size: 1.1rem;
}

header ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

footer {
   margin-top: 5rem;
}

footer p {
   margin: 0;
}

header li {
   display: inline-block;
}

header a, footer a {
   display: inline-block;
   color: var(--light-grey);
   text-decoration: none;
   margin-right: 1rem;
   padding: 0.3rem 0;
}

header a.active,
header a:hover {
   color: white;
}

header a.active {
   pointer-events: none;
}

.title {
   text-align: center;
}

.column {
   padding: 1rem;
   vertical-align: top;
}

.column h2 {
   margin: 0 0 1rem 0;
   font-weight: 400;
   font-size: 1.5rem;
}

.column table {
   width: 100%;
   border-collapse: collapse;
   text-align: center;
}

.column td,
.column th {
   padding: 0.7rem;
   border: 0.125rem solid var(--light);
   font-weight: 500;
}

.column td:first-child,
.column th {
   background-color: var(--lighter);
}

.now {
   border: 0.126rem solid var(--normal);
}

.red td {
   color: #ff6961;
}

.green td {
   color: #7abd7e;
}

.threshold-high {
   color: #ff6961;
}

.threshold-low {
   color: #7abd7e;
}

.column tr td.highlight-cell {
  border: 0.2rem solid rgba(55, 142, 142, 1);
}

.column p {
   padding: 1rem;
   border: 0.125rem solid var(--light);
}

.column form input,
.column form textarea,
.column form select {
   display: block;
   box-sizing: border-box;

   width: 100%;
   padding: 0.5rem;
   border: 0.126rem solid var(--light);
   margin: 0.5rem 0 1.5rem 0;
   outline: none;

   font: inherit;
}

.column form input:focus,
.column form textarea:focus,
.column form select:focus {
   border: 0.126rem solid var(--normal);
}

.column button {
   padding: 0.5rem;
   border: 0.126rem solid var(--light);
   margin: 0.5rem 1rem 1.5rem 0;
   
   background-color: transparent;
   font: inherit;
   cursor: pointer;
}

.column button:hover {
   background-color: var(--light);
}

@media (min-width: 28rem) {
   header > div, footer > div {
      box-sizing: border-box;
   }

   header h1 {
      font-size: 1.5rem;
   }
}

@media (min-width: 40rem) {
   header h1,
   header nav {
      display: inline-block;
      margin-right: 2rem;
   }

   header > div, footer > div,
   main {
      max-width: 50rem;
      margin-left: auto;
      margin-right: auto;
   }

   .column {
      display: inline-block;
      box-sizing: border-box;
      width: 49.5%;
      max-width: 24.5rem;
   }
}