body {
  margin: 0;
  /* Blue Gray 50 */
  background-color: #ECEFF1;
  font-family: sans-serif;
}


header {
  box-sizing: border-box;
  padding: 16px;
  font-size: 20px;
  background-color: #1165ed;
  color: white;
  min-height: 60px;
}

main {
  box-sizing: border-box;
  padding: 16px;
  min-height: calc(100vh - 200px);
}

footer {
  box-sizing: border-box;
  padding: 16px;
  background-color: #1165ed;
  color: white;
  min-height: 140px;
}

footer a {
  color: white;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}


input {
  width: 80vw;
  font-size: 16px;
}

.buttons {
  margin-top: 16px;
}


/**
  * Reset button styles
  * It takes some work to achieve a “blank slate” look.
  */
  button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    /* show a hand cursor on hover; some argue that we
    should keep the default arrow cursor for buttons */
    cursor: pointer;
  }

  /**
    * Button component
    */
  .btn {
    /* default for <button>, but needed for <a> */
    display: inline-block;
    text-align: center;
    text-decoration: none;

    /* create a small space when buttons wrap on 2 lines */
    margin: 2px 0;

    /* invisible border (will be colored on hover/focus) */
    border: solid 1px transparent;
    border-radius: 0;

    /* button size comes from text + padding, avoid height */
    padding: 0.5em 1em;

    /* make sure colors have enough contrast! */
    color: #265988;
    background-color: #f4f6f9;
  }

  /* old-school "down" effect on clic + color tweak */
  .btn:active {
    transform: translateY(1px);
    filter: saturate(150%);
  }

  /* inverse colors on hover */
  .btn:hover {
    color: #265988;
    border-color: currentColor;
    background-color: white;
  }

  /* Firefox: remove the inner border shown on focus */
  .btn::-moz-focus-inner {
    border: none;
  }

  /* make sure we have a visible focus ring */
  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(105, 165, 255, 0.5),
      0 0 0 1.5px rgba(105, 165, 255, 0.5);
  }

  /* hide focus style if not from keyboard navigation */
  .js-focus-visible .btn:focus:not(.focus-visible) {
    box-shadow: none;
  }