:root {
    --font-color: #111111;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, helvetica neue, helvetica, arial, sans-serif; 
    color: var(--font-color);
    padding: 0rem 0.6rem 0;
    margin: auto;
    max-width: 45rem;
    background-color: #FDFDFD;
    line-height: 1.5;
}

h2 {
    font-size: 21px;
}
h3 {
    font-size: 16px;
    text-decoration: underline;
}

.stats-header {
    text-align: center;
    font-weight: 600;
    background-color: #555;
    color: #FDFDFD;
    border: 1px solid #555;
}

/* N of M areas logged */
.total-areas {
    text-align: center;
}

/* List of found areas */
.found-areas {
    width: 700px;
    margin: 0 auto;
}
.found-areas .found-areas-header {
    font-weight: 600;
    text-align: center;
}
.found-areas > ul {
    column-count: 3;
    margin: 0.5rem 0 1rem 0;
}
.found-areas > ul > li {
    margin-bottom: 0rem;
}
.found-areas .found-areas-percentage {
    color: #888;
}

/* List of unfound areas */
.unfound-areas > summary {
    font-size: 0.8em;
    cursor: pointer;
    /* text-align: center; */
}
.unfound-areas {
    width: 700px;
    margin: 0 auto 1rem auto;
    color: #888;
}
.unfound-areas > ul {
    font-size: 0.8em;
    column-count: 3;
    margin: 0.5rem 0;
}
.unfound-areas > ul > li {
    margin-bottom: 0rem;
}

/* navbar */
nav {
    width: 100%;
    border-bottom: 1px solid #333;
    margin-bottom: 1rem;
}
nav > ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0.4rem 0;
}

nav > ul > li {
  display: inline-block;
}
nav li a {
    text-decoration: none;
    color: rgb(0, 0, 238);
}
nav li {
    text-decoration: none;
    color: rgb(0, 0, 238);
    margin: 0 1em;
}
nav li.nav-home {
    font-weight: 600;
    margin-left: 0;
}
nav li.nav-home a {
    text-decoration: none;
    color: var(--font-color);
}

/* File input */
.upload-file-form {
    margin-bottom: 2rem;
}
.upload-file-container {
    display: flex;
    max-width: 32rem;
    align-items: stretch;
    margin: 0 auto;
}
.upload-file-container .upload-file-input {
    flex-grow: 1;
    display: block;
}
.upload-file-container .upload-file-submit {
    margin: 0 0.5em;
    padding: 0 0.5em;
}
input[type=file] {
  max-width: 100%;
  color: #555;
  padding: 4px;
  background: #fff;
  border: 1px solid #999;
}

/* Figures and images */
figure {
    max-width: 100%;
}
img {
    max-width: 100%;
    border: 1px solid #555;
}
figcaption {
    text-align: center;
    font-size: 0.8em;
}

/* FAQ section */
table.faq th {
    vertical-align: top;
}

table.faq:not(:last-child) {
    margin-bottom: 1em;
}