:root {
  --base-font-size: 16px;
  --color-primary: #335577;
  --color-secondary: #557799;
  --color-tertiary: #3ebdb6;
  --color-warning: #ff7733;
  --color-white: #ffffff;
  --color-gray-light: #cccccc;
  --color-gray-medium: #777777;
  --color-gray-dark: #333333;
  --rounded-corner-size: 10px;
  --size-10: 10px;
  --size-20: 20px;
  --size-40: 40px;
  --size-80: 80px;
}

* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--base-font-size);
  line-height: 1.2;
}

body > header > h1 a {
  display: flex;
  align-items: center;
  justify-content: center;
}

body > header > h1 a:hover { text-decoration: none; }

body > header > h1 img {
  margin-right: var(--size-10);
  width: var(--size-80);
}

body > header > h1 span {
  font-size: var(--size-80);
}

body > header {
  padding: var(--size-20);
}

body > footer {
  border-top: 1px solid var(--color-secondary);
  padding: var(--size-20);
}

body > footer > nav > a {
  padding: 0 var(--size-40);
  font-weight: bold;
}

body > header,
body > footer {
  display: flex;
  justify-content: center;
}

body > header {
  flex-direction: column;
}

body > header > h1 {
  display: flex;
  justify-content: center;
}

body > header > nav {
  margin: var(--size-20) 0;
  border-radius: var(--size-10);
  padding: var(--size-20);
  display: flex;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
}

body > header > nav a {
  padding: 0 var(--size-20);
  color: var(--color-white);
}

main {
  margin: auto;
  padding: 20px;
  max-width: 960px;
  min-height: 50vh;
}

main h1 { margin-bottom: var(--size-20); }

p,
ol,
ul {
  margin: 1rem 0;
}

img {
  max-width: 100%;
}

input,
select,
textarea {
  border: 1px solid var(--color-gray-dark);
  border-radius: var(--rounded-corner-size);
  padding: var(--size-10);
  width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button {
  border-radius: var(--rounded-corner-size);
  padding: var(--size-10);
  background-color: var(--color-primary);
  font-weight: bold;
  color: var(--color-white);
  cursor: pointer;
}
button:hover { background-color: var(--color-secondary); }
button:active { background-color: var(--color-primary); }
button[disabled] {
  background-color: var(--color-gray-light);
  cursor: not-allowed;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col { flex-direction: column; }

.flex-stretch { align-items: stretch; }

.rounded {
  border-radius: var(--rounded-corner-size);
}

.bordered {
  border: 1px solid var(--color-primary);
}

.warning {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.inputWidget {
  margin-bottom: var(--size-80);
  display: flex;
  flex-wrap: wrap;
}

.inputWidget > div {
  padding: var(--size-10);
  flex: 1 1 50%;
  display: flex;
}

.inputWidgetButtons { justify-content: space-between; }
.inputWidgetButtons > button { flex: 0 0 45%; }

.results-view {
  margin: var(--size-40) auto;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--rounded-corner-size);
  max-width: 400px;
  list-style: none;
}
.results-view:empty { border: 0; }

.results-view li {
  display: flex;
}

.results-view li span {
  padding: var(--size-10);
  flex: 0 0 50%;
}

.results-view li span:first-child {
  background-color: var(--color-tertiary);
  color: var(--color-white);
  text-align: right;
}

.results-view li:first-child span:first-child { border-top-left-radius: var(--rounded-corner-size); }
.results-view li:last-child span:first-child { border-bottom-left-radius: var(--rounded-corner-size); }

.results-view li span:nth-last-child {
  border-top-right-radius: var(--rounded-corner-size) var(--rounded-corner-size) 0 0;
}

@media screen and (max-width: 480px) {
  body > header > h1 span { font-size: var(--size-40); }

  .inputWidget > div { flex: 1 1 100%; }

  .inputWidgetButtons {
    flex-direction: column;
  }
  .inputWidgetButtons > button {
    margin: var(--size-10) 0;
    padding: var(--size-10);
  }
}