:root {
    --Darker     : #440000;
    --Dark       : #770000;
    --MediumDark : #992222;
    --Medium     : #AA4444;
    --MediumLight: #DDC3C3;
    --Light      : #FDD3D3;
    --Lighter    : #F4E0E0;
    --Lightest   : #FFF0F0;
  }

.container { min-width: 200px; }

.bg-dark { background-color: var(--Dark)!important; }

p, ul { margin-bottom: 2rem; font-size: 1.3rem;  }
.nav-link { font-size: 1rem;  }

h1, h2, h3, h4, h5 { line-height: 2; }

h1, .h1 { font-size: 2rem; }
h1 { margin-top: 3rem; }

h2, .h2 { font-size: 1.4rem; }
h2 { margin-top: 1.5rem;}

h3, .h3 { font-size: 1.2rem; }
h3 { margin-top: 1rem;}

h4 { font-size: 1rem; font-weight: bold; }

body { font-family: -apple-system, BlinkMacSystemFont, "Acme", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
    line-height: 2; margin-bottom: 1rem }

.download > img { margin-right: .5em; width: 32px; height: 32px; }

.btn-primary { background-color: var(--Dark); border-color: var(--Dark); }
.btn-primary:hover { background-color: var(--MediumDark); border-color: var(--MediumDark); color: white; }
.btn-primary[disabled] { background-color: var(--Medium); border-color: var(--Medium); color: var(--MediumLight); }

.btn-outline-primary { border-color: var(--Dark); color: var(--Dark); }
.btn-outline-primary:hover { background-color: var(--Light); border-color: var(--Dark); color: var(--Dark); }

.form-check-input { margin-top: .55rem; }

.error { background: var(--Light); color: var(--Dark); padding: 8px 16px; }

img.framed { outline: .5rem solid var(--Medium); border: 1rem solid white; }

.footer { background: var(--Dark); color: white; padding: .5rem 1rem; margin-top: 1rem; }

nav, .footer { font-family: Merienda, Roboto, "Helvetica Neue",
  Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

.navbar-nav .active { background: var(--Lighter); }
.navbar-dark .navbar-nav .active>.nav-link { color: var(--Darker) }
.navbar-nav .nav-item { padding: 0 1rem; border-radius: .5rem; }
.navbar-dark .navbar-nav .nav-link { color: var(--Lighter); }
.navbar-nav .nav-item:hover { background:var(--Medium); }

.display-1, .display-1 p { font-family: 'Tangerine'; font-weight:bold; font-size: 3rem; }

img#banner { margin-left: -120%; width: 340% }
@media (min-width: 576px)  { img#banner { margin-left: -80%; width: 260% } }
@media (min-width: 768px)  { img#banner { margin-left: -40%; width: 180% } }
@media (min-width: 992px)  { img#banner { margin-left: -20%; width: 140% } }
@media (min-width: 1200px) { img#banner { margin-left: -2%; width: 104% } }