:root {
--white: #fff;
--black: #000;
--gray-50: #f9f9f9;
--gray-100: #ececec;
--gray-200: #e3e3e3;
--gray-300: #cdcdcd;
--gray-400: #b4b4b4;
--gray-500: #9b9b9b;
--gray-600: #676767;
--gray-700: #424242;
--gray-750: #2f2f2f;
--gray-800: #212121;
--gray-900: #171717;
--gray-950: #0d0d0d;
--primary: #56b3e7;
--primary-fg: #fff;
--max-top-padding: 2rem;
--hand-written: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Marker Felt", cursive, sans-serif;
}
:root, html {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-webkit-text-size-adjust: 100%;
font-feature-settings: normal;
-webkit-tap-highlight-color: transparent;
/*font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;*/
font-variation-settings: normal;
line-height: 1.5;
tab-size: 4;
}
button {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}
h1 {
font-size: 3em;
font-weight: 100;
letter-spacing: -0.05em;
word-break: break-word;
line-height: 1em;
}
h1:focus {
outline: none;
}
.civies {
font-weight: 800;
}
.civies span {
font-family: sans-serif;
letter-spacing: -0.1em;
font-size: 1.2em;
margin-right: 0.1em;
}
.civies.small {
font-size: 0.5em;
vertical-align: text-top;
margin-right: 0.15em;
}
.civies.small span {
font-size: 1.5em;
}
h2 {
font-weight: bold;
font-size: 1.75rem;
}
p {
line-height: 1.5em;
letter-spacing: -0.01em;
text-align: justify;
margin: 0.5em 0 2em 0;
}
body {
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: 18px;
}
body > div {
display: block;
max-width: 800px;
padding: 5vw 10vw 5vw 10vw;
margin: auto;
margin-right: 25vw;
}
body > div.ledger-app {
padding: min(var(--max-top-padding), 5vw) 10vw 5vw 10vw;
}
@media (max-width: 400px) {
body > div {
padding: 5vw 10vw 5vw 5vw;
}
}
@media print {
h1, h2, h3 {
page-break-after: avoid;
}
p {
widows: 2;
orphans: 2;
}
.dont-print {
display: none !important;
}
body > div {
padding: 5vw 5vw;
max-width: revert;
margin: revert;
}
}
blockquote, figure {
line-height: 2em;
background: var(--gray-100);
margin: 0 0 2em 0;
padding: 1em 5vw;
}
figure * {
overflow: auto;
}
figcaption {
font-style: italic;
text-align: left;
font-size: 0.85rem;
}
code {
background-color: var(--gray-100);
border-radius: 0.25rem;
font-size: 0.875em;
font-weight: 500;
padding: 0.15rem 0.3rem;
}
.nav {
position: fixed;
width: 20vw;
top: 5vw;
padding: 5vw;
right: 0;
display: grid;
align-content: center;
}
.nav a {
text-decoration: none;
display: block;
color: black;
}
.nav a.active {
font-weight: bold;
border-left: 0.25rem solid;
padding-left: 1rem;
margin-left: -1.25rem;
}
.nav a + a {
margin-top: 1rem;
}
.nav hr {
height: 1px;
border: 0;
background: black;
margin: 2rem 0;
}
.big-space {
height: 10vw;
max-height: 4rem;
}
/*
.nav {
margin-top: 2rem;
padding: 2vw 10vw;
img {
width: 20vw;
min-width: 150px;
max-width: 200px;
}
a {
text-decoration: none;
color: white;
display: block;
&.active {
font-weight: bold;
}
}
//a + a {
// margin-left: 2rem;
//}
//@media (max-width: 600px) {
a + a {
// margin-left: 0;
margin-top: 1rem;
}
// }
}
header.nav {
// padding-bottom: 0;
// padding-top: 0;
text-align: right;
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
background-image: url("data:image/svg+xml;utf8,\
");
background-position: right;
}
.white-logo {
background-image: url("data:image/svg+xml;utf8,\
");
width: 140px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
margin-top: 100px;
display: inline-block;
}
header, footer {
transition: opacity .3s, transform .3s;
}
header.fade {
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
}
footer {
opacity: 0;
transform: translateY(10px);
}
footer.fade {
opacity: 1;
transform: translateY(0);
}
.nav {
background: linear-gradient(to top, rgba(255,255,255,.82), rgba(255,255,255,.66));
border-top: 1px solid rgba(0,0,0,.06);
position: fixed;
left: 0;
right: 0;
bottom: env(safe-area-inset-bottom);
height: 56px;
display: grid;
place-items: center;
z-index: 1000;
box-shadow: 0 -10px 28px rgba(0,0,0,.05);
}
.nav::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .08;
background-image: url('data:image/svg+xml;utf8,\
');
background-size: 120px 120px;
mix-blend-mode: overlay;
}
*/
header {
opacity: 1;
transform: translateX(0);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
header.fade {
opacity: 0;
transform: translatex(5vw);
pointer-events: none;
}
.kids {
font-family: var(--hand-written);
}
header.nav p {
font-size: 0.85rem;
margin: 0rem -1rem 1rem -1rem;
padding: 1rem;
border-radius: 1rem;
text-align: left;
}
header.nav p a {
color: revert;
display: inline;
}
.categories table {
background: none;
margin-bottom: 1rem;
}
.categories table td {
line-height: 1rem;
}
.categories table td:first-child {
font-style: italic;
width: 6rem;
vertical-align: top;
}
.categories table small {
color: var(--gray-700);
display: block;
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.loading.shimmer {
display: inline-block;
background: linear-gradient(90deg, #fff 25%, #fff 50%, #f7f7f7 75%);
background-size: 200% 100%;
color: transparent;
animation: shimmer 1.2s infinite;
border-radius: 10px;
}
@keyframes shimmer {
100% {
background-position: -200% 0;
}
}
.wasm-loading {
top: 0;
left: 0;
height: 2px;
background-color: black;
position: fixed;
padding: 0;
margin: 0;
max-width: revert;
width: var(--blazor-load-percentage, 0%);
}