@font-face {
  font-display: swap;
  font-family: 'Fredericka the Great';
  font-style: normal;
  font-weight: 400;
  src: url('../components/fredericka-the-great-v23-latin-regular.woff2') format('woff2');
}

:root { 
    --width: 35rem; 
    font-size: 18px; 
    --dark-red: #871008;
    --red: #E0160A;
    --yellow: #F7BD40;
    --darkblue: #2289B6;
    --blue: #94AFC0;
    --white: #f4f4f4;
    --gray: #e5e5e5;
    --dark-gray: #666;
}

/* CONTENT */
* { box-sizing: border-box; }
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }

h1,h2,h3,h4,h5 { color: var(--dark-red); font-family: 'Fredericka the Great'; font-weight: normal; }
h1 { font-size: 120%; }
h2 { font-size: 105%; }
h3 { font-size: 100%; }
h4 { font-size: 100%; }

af-header { display: block; margin: 0 auto; max-width: 575px}
af-header img { width: 100%; }

section, footer { display: block; margin: 0 auto; padding: 0 0 1rem 0; max-width: 575px; }

a, a:visited { color: var(--darkblue); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }
h1 > a { color: var(--dark-red) !important; text-decoration: none; }

ul, ol { padding-left: 1rem; }
li { padding: .3rem 0; }

code, tt, pre { font-size: 80% ! important;  }

table { border-spacing: 0; max-width: 575px; }
td { border-bottom: 1px solid var(--gray); padding: .1rem .2rem; vertical-align: baseline; }
th { text-align: left; vertical-align: baseline; font-size: 18px; }
td td { border: none; }

.blockout th { padding: 0.25rem .75rem 0.25rem 0; }
.item-table img { display: none; }

.generator-select { display: block; }
.generator-select select { width: 60%; }

.box {
  border: 1px solid var(--darkblue);
  background-color: var(--white);
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
}
.box p, .box h4 { 
  margin: 0; 
  padding: 0; 
}
.box h4 { 
  margin-bottom: 0.25rem; 
  font-variant: small-caps; 
  font-size: smaller; 
  letter-spacing: 1px; 
}
.note { 
  color: var(--dark-gray); 
  padding-top: .2rem; 
  font-size: smaller; 
  border-top: 1px solid var(--blue);
}
      
p { line-height: 1.3; }

dl, dl td { margin: 0; padding: 0;}
dt { font-weight: bold; }
dd { margin: 0 0 1rem 0; padding: 0; }
dl dl, dl pre { margin-left: 1rem }
dl pre { font-size: 12px!important; }

.light { color: red!important; }

@media only screen and (max-width: 575px) {
  af-header h1, af-header h2, af-header h3, af-header #toc { padding: 0 1rem; }
  section, footer { padding: 0 1rem 1rem 1rem; }
}
@media only print {
  .controls, .generator-select { display: none ! important; }
}