:root {
    --bg-color: hsla(194, 32%, 92%, 1);
    --light-color: hsla(194, 32%, 89%, 1);
    --header-color: hsla(194, 32%, 69%, 1);
    --dark-color: hsla(194, 32%, 39%, 1);
}
body { background-color: var(--bg-color); font-family:sans-serif; }

div { padding:20px 0; }
@media (min-width:600px) {
    div { padding:20px; }
}

h2 { margin:0; }
ul { list-style-type:none; display:inline-block; padding:0; }
li { display:block; padding:8px 16px; }

table { border-collapse: collapse; background-color:white; }
@media (min-width:600px) {
    table { margin:20px; }
}

th { background-color: var(--header-color); white-space: nowrap; }
th, td { padding: 4px 8px; border: 1px solid var(--dark-color); }
input { padding:8px 16px; width: calc(100% - 40px); max-width:500px; margin-bottom:20px; }
button { padding:8px 16px; }
@media (min-width:800px) {
    input { margin-bottom:0; }
    button { margin-left:20px; }
}

nav { margin:20px; }
nav a {
    padding: 8px 16px;
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
    background-color: var(--light-color);
    margin-right: 10px;
    color: black;
    display:inline-block;
    margin-bottom: 10px;
}
nav a.active { background-color: var(--header-color); }

.flex { display:flex; }
.pt10 { padding-top:10px; }
.p0 { padding:0; }
.error { background-color: red; color:white; padding:20px; }

ul,
table,
nav a.active,
.error { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3); }

.row-odd { background-color: white; }
.row-even { background-color: var(--light-color); }

.highlight {background-color:yellow; }
.info { font-weight:bold; text-align:center; }
.log-error { background-color: red; }
.log-warning { background-color: yellow; }

/* Show the loading screen only if it appears for longer than half a second */
.loading {
    background-color: var(--header-color);
    border: 1px solid var(--dark-color);
    display: inline-block;
    color:white;
    padding: 1em 2em;
    opacity: 0;
    animation-name: show-after-delay;
    animation-delay: 0.5s;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes show-after-delay {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
