body {
  background-color: var(--base);
  color: var(--text);
}
header {
text-align: center;
font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
}
main {
margin: 0px auto;
}
footer {
position: fixed; 
bottom: 0;
left: 0;
right: 0;
background: var(--crust);
}
footer nav {
display: flex;
align-items: center;
width: 100%; 
text-align: center;
}
footer nav > * {
flex: 1 1 auto;
text-decoration: none;
padding: 0.5em;
color: var(--text);
}
button {
background-color: var(--mantle);
color: var(--text);
border: 1px solid var(--crust);
box-shadow: var(--crust) 0 1px 1px 0;
min-height: var(--space-m-l);
font-size: var(--step--2);
}
button:active {
transform:translateY(2px);
box-shadow: 0 0 0;
outline: 0;
}
details {
cursor: pointer;
}
section header {
text-align: left;
margin: var(--space-s-m) 0;
border-bottom: 1px solid var(--crust);
padding-bottom: var(--space-xs);
}
section:last-child {
margin-bottom: var(--space-s);
}
p {
margin: var(--space-xs-s) 0em;
}
a {
color: var(--text);
}
a:visited {
color: var(--text);
}
hr {
margin: var(--space-s-m);
}
.smallbtn {
min-height: var(--space-m);
}
.primarybtn {
color: var(--lavender);
border-color: var(--lavender);
}
.save {
color: var(--green);
border-color: var(--green);
float: right;
}
.delete {
color: var(--red);
border-color: var(--red);
}
/* Styles for the calendar fragment */
.day_picker button.today {
background-color: var(--crust);
}
.day_picker button.selected-date {      
border-color: var(--lavender);
font-weight: 600;
color: var(--lavender);
}
/* Styles for forms */
input, select, textarea, input[type="color"] {
@media (prefers-color-scheme: dark) {
   background: var(--crust);
}
border: 1px solid var(--crust);
padding: 0.5em;
}
input[type="color"]{
height: 3em;
}
input[type="checkbox"]{
width: initial;
}
fieldset {
border: 1px solid var(--crust);
margin-bottom: var(--space-s-m);
}
summary span {
color: var(--text)
}
summary .header {
margin-bottom: var(--space-s);
}
/* Styles for dialogs */
dialog {
background: var(--base);
color: var(--text);
border: none;
width: 100%;
padding: var(--space-s-m);
}
dialog label {
display: block;
}
dialog label > * {
display: block;
width: 100%
}
dialog label > span {  
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
dialog::backdrop {
  background: rgba(0,0,0,0.8);
}
}
.details {
padding: var(--space-xs-s) var(--space-xs-s) 0 var(--space-xs-s); 
border: 1px solid var(--crust);
margin-top: var(--space-xs-s);
}
[aria-current]:not([aria-current="false"]) 
{ 
font-weight: bold; 
background-color: var(--base);
border-top: none;
color: var(--lavender);
}