html {
     overflow-x: hidden;
 }

 :root {
     --font-family-primary_type: sans-serif;
     --font-family-secondary_type: sans-serif;
     --font-family-tertiary_type: sans-serif;

 }


 section {
     background-color: rgb(var(--theme-color-body));
 }



 a {
     color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
     font-family: var(--font-family-tertiary), var(--font-family-tertiary_type);
 }

 .nav-header-icon {
     color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
     border-color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
 }

 .nav-header-menu-button span {
     background-color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
 }


 .app-header-transparent {
     background-color: transparent !important;
 }


 mark {
     background-color: rgb(var(--theme-color-primary)) !important;
 }

 .link-icon {
     margin-left: 5px;
     margin-right: 10px;
 }

 .fa {
     line-height: unset !important;
 }

 @media (max-width: 1024px) {
     html {
         scrollbar-width: none;
         /* Firefox */
     }

     html::-webkit-scrollbar {
         display: none;
         /* Chrome/Safari/Opera */
     }

     .navbar-nav {
         background-color: rgb(var(--theme-color-body));
     }
 }

 /* Ensure the first div inside <main> has top padding 
    This pushes the content down below the header */
 main>div:first-of-type section {
     padding-top: 140px;
 }

 /* Ensure the first div inside <main> has top padding 
    This pushes the content down below the header */
 main>div:first-of-type section.no-first-section-top-padding {
     padding-top: 0;
 }


 .swiper-slide img {
     display: block;
     width: 100%;
 }


 /* Alternate image/text positions by row index on large screens */
 @media (min-width: 1024px) {
     .container>.row.alternate:nth-of-type(even) {
         flex-direction: row-reverse;
     }
 }



 .pointer-events-none {
     pointer-events: none !important;
 }

 .pointer-events-auto {
     pointer-events: auto !important;
 }

 .swiper-pagination-bullet-active {
     background-color: rgb(var(--theme-color-primary)) !important;
 }

 /* todo: magic number, otherwise sometimes the pagination bullets are cut off */
 .swiper .pagination {
     height: 45px !important;
 }

 /* should an image ever be bigger than the entire screen?? maybe add image size properties to image? */
 img,
 video {
     max-height: 100vh;
     margin: auto;
 }


 .section {
     padding-left: 20px;
     padding-right: 20px;
 }

 header {
     padding-left: 20px;
     padding-right: 20px;
 }

 footer {
     padding-left: 20px;
     padding-right: 20px;
 }