@font-face {
  font-family: 'Roboto';
  src: url('./Roboto-Regular.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
}
* {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

/* `hidden` is how this page declares "not shown yet". The attribute's own rule
   loses to an id selector, and these containers are styled by id, so say it
   once here instead of giving every container its own rule. */
[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 2rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  width: 100%;
  max-width: 44rem;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 2.25rem;
}

.subtitle {
  margin: 0.5rem 0 2.25rem;
  color: #4a3f3f;
}

.code {
  font-family: Monaco, Courier, monospace;
  border: 1px solid #d9d9d9;
  padding: 2px 6px;
  border-radius: 3px;
  background-color: #4a3f3f;
  color: #f79205;
  vertical-align: middle;
}

button {
  background-color: #3f51b5;
  color: #ffffff;
  border: none;
  padding: 10px 30px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid #f79205;
  outline-offset: 2px;
}

#login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

#login-form input,
#login-form button {
  width: 16rem;
}

#login-form input {
  padding: 10px;
  border-radius: 5px;
  font-size: 1rem;
  border: 1px solid #d9d9d9;
}

#login-error {
  margin: 0;
  color: #b3261e;
  font-size: 0.875rem;
}

#data-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  overflow-x: auto;
}

select {
  font-size: 1rem;
  padding: 0.6rem;
  min-width: 16rem;
}

#logout-container {
  margin-top: 1.25rem;
}

/* log out is the secondary action: the seed app's one useful button is above it */
#logout {
  background: none;
  border: 1px solid #c7cbe6;
  color: #3f51b5;
  font-size: 14px;
  padding: 8px 22px;
}

#logout:hover {
  background: #f4f5fb;
  box-shadow: none;
}

/* the page's one outbound link: a conventional mark, out of the way */
.source {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  color: #767676;
}

.source:hover {
  color: #f79205;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
th,
td {
  padding: 8px 12px;
  vertical-align: middle;
  font-weight: normal;
}
thead {
  background: #3f51b5;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}

tbody tr:nth-child(even) {
  background: #f0f0f2;
}
td {
  border-bottom: 1px solid #cecfd5;
  border-right: 1px solid #cecfd5;
}
td:first-child {
  border-left: 1px solid #cecfd5;
}