#heritage-sliders {
    display: block;
    flex-wrap: wrap;
    gap: 10px;
}
.blurb {
    width: 30%;
}
.slider {
    display: flex;
    margin-bottom: -5px;
    font-family: sans-serif;
    font-size: 10px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: $inner-shadow;
    flex-direction: row;
    align-content: stretch;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
}

.slider::-webkit-slider-thumb {
    color: pink;
    background-color: red;
}
input[type="range"] {
    width: 100%;
    margin-bottom: -4px;
}

.slider>.form-label {
    margin-top: -5px;
}

.NOTslider>.form-label {
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
}
.percentage {
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
}
.slider > .percentage {
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    margin-right: 5px;
    margin-top: -5px;
    font-weight: bold;
}

.btn-check:active+.btn-outline-primary,.btn-check:checked+.btn-outline-primary,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active {
    background-color: #58180D;
    border-color: #58180D;
}

.btn-primary:active, .btn-outline-primary:active, .btn-primary:hover, .btn-outline-primary:active, .btn-outline-primary:checked, .btn-check:checked, .btn-check:checked+ {
    cursor: pointer;
    background-color: #58180D;
    border-width: 2px;
    border-color: #58180D;
    font-family: ScalySansSmallCaps;
    font-size: 12px;
    font-weight: 900;
    color: #ffffff;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
}
.btn-primary, .btn-outline-primary {
    font-family: ScalySansSmallCaps;
    font-size: 12px;
    font-weight: 900;
    color: #000000;
    background-color: #ffffff;
    border-color: #58180D;
    border-width: 2px;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
}
.form-check {
    font-family: BookSanity;
    color: #58180D;
    font-size: 14px;
}
.accordion-button {
    font-family: MrJeeves;
    color: #58180D;
    font-size: 20px;
    font-weight: 800;
    background-color: #ca1010;
    background-image: url("/i/paper2.jpg");
}

.accordion-button:not(.collapsed) {
    color: #58180D;
    background-color: #124791;
    animation: flicker 2s infinite;
/*  Add this to make it really less subtle:     -webkit-animation-name: font-effect-fire-animation-keyframes; */
}


/* Define the animation named "flicker" */
@keyframes flicker {
    /* Initial state of animation */
    0%, 
    /* Final state of animation */
    100% { 
        text-shadow: 
            0 -1px 3px #fff, /* Innermost layer - intense heat (white) */
            0 -2px 6px #FF3, /* Second layer - core of flame (yellow) */
            0 -6px 12px #F90, /* Middle layer - body of flame (orange) */
            0 -10px 20px #C33; /* Outermost layer - edges of flame (red) */
    }
    /* Middle state of animation */
    50% { 
        text-shadow: 
            0 -2px 6px #fff, /* Innermost layer - intense heat (white) */
            0 -4px 12px #FF3, /* Second layer - core of flame (yellow) */
            0 -8px 16px #F90, /* Middle layer - body of flame (orange) */
            0 -12px 24px #C33; /* Outermost layer - edges of flame (red) */
    }
}
 
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("https://www.dungeoneer.com/i/chevron-down-solid.svg");
    fill: green;
/*    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); */
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("https://www.dungeoneer.com/i/chevron-down-solid.svg");
    fill: green;
/*    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); */
    transform: rotate(-180deg);
}
.form-check-input {
/*    background-color: #3a2914; */
    background-color: white;
    border-width: medium;
    border-color: #3a2914;
}
.form-check-input:checked {
    background-color: #3a2914;
    border-color: #3a2914;
}
.form-control {
    font-family: ScalySans;
    font-size: 14px;
    font-weight: 500;
    display: block;
    width: 100%;
    padding-top: 6px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 3px;
    line-height: 1.0;
/*    color: #212529; */
    background-color: #eee;
    background-clip: padding-box;
    border-top-color: rgb(201, 173, 106);
    border-top-style: solid;
    border-top-width: 2px;
    border-right-color: #ced4da;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: #ced4da;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #ced4da;
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 0.25rem;    
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input-group-text {
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 3px;
    line-height: 1.0;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.0;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border-top-color: rgb(201, 173, 106);
    border-top-style: solid;
    border-top-width: 2px;
    border-right-color: rgb(206, 212, 218);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgb(206, 212, 218);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(206, 212, 218);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-top-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 0.25rem;    
}
.container {
    display: flex;
    height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}
body {
    background-image: url("/i/paper2.jpg");
    background-color: #f3edd6;
}
.handout {
    height: 100vh;
    width: 836px;
    color: #b59214;
}
.controls {
    margin: 0.5rem;
    width: 100vw;
    border: 0px solid #b59214;
    color: #b59214;
    padding: 0.5rem;
    font-size: 1rem;
}
h1 {
    font-family: MrJeeves;
    color: #58180D;
    font-size: 36px;
    font-weight: 800;
}
h2 {
    font-family: MrJeeves;
    color: #58180D;
    font-size: 24px;
    -webkit-animation-duration: 3.8s;
    -webkit-animation-name: font-effect-fire-animation-keyframes;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
h3 {
    font-family: MrJeeves;
    color: #58180D;
    font-size: 20px;
    font-weight: 800;
}
.form-label {
    font-family: MrJeeves;
    color: #58180D;
    font-size: 20px;
    font-weight: 800;
    line-height: normal;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    margin: 0;
    padding: 0;
    border: 0;
}
.form-label.subtitle {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #b59214;
    text-underline-position: from-font;
/*    border-top: 2px; */
/*    border-bottom: 2px solid #c9ad6a; */
}
h4 {
    font-family: BookSanity;
}
h5 {
    font-family: ScalySansSmallCaps;
    color: #000000;
    font-size: 16px;
    font-weight: 900;
}
p {
    font-family: BookSanity;
    color: #000000;
    font-size: 16px;
}
.formText {
    font-family: ScalySans;
    color: #000000;
    font-size: 13.5px;
    font-weight: normal
}
.heavyFormText {
    font-family: ScalySansSmallCaps;
    color: #000000;
    font-size: 16px;
    font-weight: 900;
}

@font-face{
    font-family: BookSanity;
    src: url('/fonts/Bookinsanity.woff2');
    font-weight: normal;
    font-style: normal
}
@font-face{
    font-family: BookSanity;
    src: url('/fonts/Bookinsanity Bold.woff2');
    font-weight: bold;
    font-style: normal
}
@font-face{
    font-family: BookSanity;
    src: url('/fonts/Bookinsanity Italic.woff2');
    font-weight: normal;
    font-style: italic
}
@font-face{
    font-family: BookSanity;
    src: url('/fonts/Bookinsanity Bold Italic.woff2');
    font-weight: bold;
    font-style: italic
}
@font-face{
    font-family: ScalySans;
    src: url('/fonts/Scaly Sans.woff2');
    font-weight: normal;
    font-style: normal
}
@font-face{
    font-family: ScalySansSmallCaps;
    src: url('/fonts/Scaly Sans Caps.woff2');
    font-weight: normal;
    font-style: normal
}
@font-face{
    font-family: WalterTurncoat;
    src: url('/fonts/WalterTurncoat-Regular.woff2');
    font-weight: normal;
    font-style: normal
}
@font-face{
    font-family: MrJeeves;
    src: url('/fonts/Mr Eaves Small Caps.woff2');
    font-weight: normal;
    font-style:normal
}

/* ******************************************************* crazy shit *************************************************** */


.custom-range::-webkit-slider-thumb {
  background: gray;
}

.custom-range::-moz-range-thumb {
  background: gray;
}

.custom-range::-ms-thumb {
  background: gray;
}
-webkit-slider-thumb:active {
    background-color: red;
}
-webkit-slider-thumb,
.custom-range:focus::-webkit-slider-thumb, 
.custom-range:focus::-moz-range-thumb,
.custom-range:focus::-ms-thumb {
    box-shadow: red;
}


.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: pink;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  background-color: #58180D;
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  background-color: #58180D;
}
.form-range::-moz-focus-outer {
  border: 0;
  background-color: #58180D;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #58180D;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: #58180D;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: #58180D;
  border-radius: 1rem;
}
.form-range::-webkit-slider-runnable-track::before {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #b59214;
  border-color: #b59214;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: #b6d4fe;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
.form-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}