/* Font imports */

@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);

:root {
    --main-background:#2e3440;
    --secondary-background:#3b4252;

    --main-text:#eceff4;
    --secondary-text:#ebcb8b;
    --tertiary-text:#d08770;
}

body {
    font-family: 'Fira Code', monospace;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--main-background);
    color: var(--main-text);
}

a {
    color: var(--secondary-text);
}

a:hover {
    color: var(--tertiary-text);
}

main {
    padding-bottom: 4em;
    text-align: left;
    margin: auto;
    width: 75%;
}

header {
    padding: 20px;
    text-align: right;
    font-size: 1.5em;
}

.data-entry {
	background-color: var(--main-background);
	width: 100%;
	margin-bottom: 25px;
	text-align: left;
	border: 1px dotted var(--secondary-text);
	color: var(--secondary-text);
}

.data-entry thead tr th {
    color: var(--main-background);
    background-color: var(--secondary-text);
    padding: 10px;
}

.inner-header {
    border-bottom: 1px dotted var(--secondary-text);
    color: var(--secondary-text);
}

.inner-header td, .data-entry tbody tr td {
    padding: 10px;
    color: var(--main-text);
}

.data-entry tbody tr td:nth-child(1) {
    min-width: 80%;
}

.inner-header td {
    color: var(--secondary-text) !important;
}

.data-entry tbody tr:nth-child(even) {
    background-color: var(--secondary-background);
}

h2 {
	color: var(--secondary-text);
    font-weight: bold;
    text-align: left;
    font-size: 1.7em;
}

h3 {
    color: var(--secondary-text);
    font-weight: bold;
    text-align: left;
    font-size: 1.4em;
}

thead {
	border-bottom: 0;
	background-color: var(--secondary-background);
    font-weight: bold;
}

.footnote {
    font-size: 0.8em;
}

footer {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 5em;
    font-size: 0.75em;
    background-color: #3b4252;
    padding: 1px 0 10px 0;
    color: #eceff4;
    border-top: 2px dotted #ebcb8b;
}

footer p {
    padding: 0;
}

.mobile {
    display: none;
}

@media (width < 470px) {
  #desktop {
    display: none;
  }

  #mobile {
    display: revert;
  }
}