.pane-scroll {
  overflow-x: hidden;
  overflow-y: auto;
}

        /* === Font Style Classes === */
        .font-dyslexia body,
        .font-dyslexia h1,
        .font-dyslexia h2,
        .font-dyslexia h3,
        .font-dyslexia h4,
        .font-dyslexia h5,
        .font-dyslexia h6,
        .font-dyslexia p,
        .font-dyslexia span,
        .font-dyslexia figcaption,
        .font-dyslexia label,
        .font-dyslexia .btn,
        .font-dyslexia .btn-group,
        .font-dyslexia #mainNav {
          font-family: "Open-Dyslexic", Arial, sans-serif !important;
        }

        .font-legible body,
        .font-legible h1,
        .font-legible h2,
        .font-legible h3,
        .font-legible h4,
        .font-legible h5,
        .font-legible h6,
        .font-legible p,
        .font-legible span,
        .font-legible figcaption,
        .font-legible label,
        .font-legible .btn,
        .font-legible .btn-group,
        .font-legible #mainNav {
          font-family: "Verdana", "Tahoma", sans-serif !important;
        }

        .font-serif body,
        .font-serif h1,
        .font-serif h2,
        .font-serif h3,
        .font-serif h4,
        .font-serif h5,
        .font-serif h6,
        .font-serif p,
        .font-serif span,
        .font-serif figcaption,
        .font-serif label,
        .font-serif .btn,
        .font-serif .btn-group,
        .font-serif #mainNav {
          font-family: "Georgia", "Times New Roman", serif !important;
        }

        /* === Contrast Classes with White Text === */
        .contrast-dark,
        .contrast-dark .modal-content,
        .contrast-dark .card,
        .contrast-dark .portfolio-caption{
            background-color: #000 !important;
        }

        .contrast-dark .bg-light,
        .contrast-dark .btn-light{
            background-color: #111 !important;
        }

        .contrast-dark textarea,
        .contrast-dark input{
            background-color: #111 !important;
            color: cyan !important;
        }

        .contrast-dark nav,
        .contrast-dark footer,
        .contrast-dark .card-header,
        .contrast-dark .card-footer,
        .contrast-dark .alert-secondary{
            background-color: #222 !important;
        }

        .contrast-dark .card,
        .contrast-dark .alert{
            border: 4px solid #555 !important;
        }

        .contrast-dark p,
        .contrast-dark span,
        .contrast-dark label,
        .contrast-dark li,
        .contrast-dark .card-header,
        .contrast-dark .portfolio-caption,
        .contrast-dark .text-muted,
        .contrast-dark svg{
            color: #fff !important;
        }

        .contrast-dark h1,
        .contrast-dark h2,
        .contrast-dark h3,
        .contrast-dark h4,
        .contrast-dark h5,
        .contrast-dark h6,
        .contrast-dark .section-heading {
            color: cyan !important;
        }

        .contrast-dark figcaption,
        .contrast-dark .site-heading-lower {
            color: yellow !important;
        }

        .contrast-dark a,
        .contrast-dark a:hover{
            color: #00ff00 !important;
        }

        .contrast-dark .btn{
            border: white solid 1px;
        }

        .contrast-dark .btn-check:checked + .btn {
            border: white solid 1px !important;
            background-color: white;
            color: #000 !important;
        }

        .contrast-dark img[src$="logo_w200p.png"] {
            filter: invert(1) grayscale(1) brightness(200%);
        }

        .contrast-dark #contact{
            background-color: rgba(0, 31, 86, 1) !important;
        }

        .contrast-dark .form-range::-webkit-slider-thumb{
          background-color: black;
            border: solid white 5px !important;
        }

        .contrast-dark .form-range::-moz-range-thumb{
          background-color: black;
            border: solid white 5px !important;
        }

        .contrast-dark .form-range::-webkit-slider-runnable-track {
          background-color: #fff;
        }

        .contrast-dark .form-range::-moz-range-track {
          background-color: #fff;
        }

        .contrast-dark .fa-stack > .fa-stack-1x {
            color: #000 !important;
        }

        /* === Contrast Classes with Yellow Text === */
        .contrast-dark-y,
        .contrast-dark-y .modal-content,
        .contrast-dark-y .card,
        .contrast-dark-y .portfolio-caption{
            background-color: #000 !important;
        }

        .contrast-dark-y .bg-light,
        .contrast-dark-y .btn-light{
            background-color: #111 !important;
        }

        .contrast-dark-y textarea,
        .contrast-dark-y input{
            background-color: #111 !important;
            color: cyan !important;
        }

        .contrast-dark-y nav,
        .contrast-dark-y footer,
        .contrast-dark-y .card-header,
        .contrast-dark-y .card-footer,
        .contrast-dark-y .alert-secondary{
            background-color: #222 !important;
        }

        .contrast-dark-y .card,
        .contrast-dark-y .alert {
            border: 4px solid #555 !important;
        }

        .contrast-dark-y p,
        .contrast-dark-y span,
        .contrast-dark-y label,
        .contrast-dark-y li,
        .contrast-dark-y .card-header,
        .contrast-dark-y .portfolio-caption,
        .contrast-dark-y .text-muted,
        .contrast-dark-y svg{
            color: yellow !important;
        }

        .contrast-dark-y h1,
        .contrast-dark-y h2,
        .contrast-dark-y h3,
        .contrast-dark-y h4,
        .contrast-dark-y h5,
        .contrast-dark-y h6,
        .contrast-dark-y .section-heading {
            color: cyan !important;
        }

        .contrast-dark-y figcaption,
        .contrast-dark-y .site-heading-lower {
            color: #fff !important;
        }

        .contrast-dark-y a,
        .contrast-dark-y a:hover{
            color: #00ff00 !important;
        }

        .contrast-dark-y .btn{
            border: yellow solid 1px;
        }

        .contrast-dark-y .btn-check:checked + .btn {
            border: white solid 1px !important;
            background-color: white;
            color: #000 !important;
        }

        .contrast-dark-y img[src$="logo_w200p.png"] {
            filter: invert(1) grayscale(1) brightness(200%);
        }

        .contrast-dark-y #contact{
            background-color: rgba(0, 31, 86, 1) !important;
        }

        .contrast-dark-y .form-range::-webkit-slider-thumb{
          background-color: black;
            border: solid yellow 5px !important;
        }

        .contrast-dark-y .form-range::-moz-range-thumb{
          background-color: black;
            border: solid yellow 5px !important;
        }

        .contrast-dark-y .form-range::-webkit-slider-runnable-track {
          background-color: yellow !important;
        }

        .contrast-dark-y .form-range::-moz-range-track {
          background-color: yellow !important;
        }

        .contrast-dark-y .fa-stack > .fa-stack-1x {
            color: #000 !important;
        }

        .contrast-dark .alert-warning p, /* Customized for the dark mode */
        .contrast-dark .alert-warning h1,
        .contrast-dark .alert-warning h2,
        .contrast-dark .alert-warning h3,
        .contrast-dark .alert-warning h4,
        .contrast-dark .alert-warning h5,
        .contrast-dark .alert-warning h6,
        .contrast-dark-y .alert-warning p,
        .contrast-dark-y .alert-warning h1,
        .contrast-dark-y .alert-warning h2,
        .contrast-dark-y .alert-warning h3,
        .contrast-dark-y .alert-warning h4,
        .contrast-dark-y .alert-warning h5,
        .contrast-dark-y .alert-warning h6{
            color: #000 !important;
        }

        /* === Invert (undo the invert on ceratin elements) === */
        .invert-mode img,
        .invert-mode picture,
        .invert-mode video,
        .invert-mode canvas,
        .invert-mode svg,
        .invert-mode path,
        .invert-mode iframe[src^="https://www.youtube.com/embed/"],
        .invert-mode .fb-page{
            filter: invert(1);
        }

        .invert-mode img[src$="logo_w200p.png"],
        .invert-mode img[src$="logo_white_w300p.png"]{
            filter: none;
        }

        /* === Highlight Links === */
        .highlight-links a,
        .highlight-links a:visited {
          background-color: #00ff00 !important;
          color: black !important;
          text-decoration: underline !important;
          padding: 2px 4px;
          border-radius: 3px;
          transition: background-color 0.3s ease, color 0.3s ease;
        }

        .highlight-links a:hover,
        .highlight-links a:focus {
          background-color: yellow !important;
          color: black !important;
        }

        /* === SHOW IMAGES === */
        img, picture, figure {
            display: inline !important; /* or block depending on your layout */
        }
        
        figure {
            margin: 0;
        }

        /* === SHOW IMAGE DESCRIPTION === */
        /* Only used when images are hidden */
        .no-images img,
        .no-images picture,
        .no-images figure {
            display: none !important;
        }

        .no-images .about-heading-content,
        .no-images .product-item-description {
            margin-top: 5rem !important;
        }

        .no-images .no-image-access {
            display: block !important;
        }

        /* Default: descriptions hidden */
        body.img-desc-on figcaption {
            display: block !important;   /* when descriptions are ON */
            margin: .5rem 2rem;
        }

        body.img-desc-on .about-heading-content,
        body.img-desc-on .product-item-description {
            margin-top: 0 !important;
        }

        /* When descriptions are off (default), figcaption stays hidden */
        figcaption, .no-image-access {
            display: none !important;
        }

        /* === CATCHY VIDEOS & ANIMATIONS === */
        .no-videos video:not(.ignoreAccessibility) { display: none !important; }
        .no-animations .animate__animated:not(.ignoreAccessibility) {
          animation: none !important;
          transition: none !important;
        }