@font-face {
  font-family: 'Radion Bold';
  src: url('/fonts/radion-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Radion';
  src: url('/fonts/radion.woff2') format('woff2');
}

.font-radion {
  font-family: 'Radion', sans-serif;
}
.font-radion-bold {
  font-family: 'Radion Bold', sans-serif;
}
:root {

  --swatch-color-1: #172E48;
  --swatch-color-2: #6089F7;
  --swatch-color-3: #70C0F9;
  --swatch-color-4: #9F86F7;
  --swatch-color-5: #6B61F6;

  --ui-font-family: 'Inter', sans-serif;
  --ui-font-family-headings: 'Radion Bold', sans-serif;
  --ui-styled-text-font-size: 17px;
  --ui-styled-text-link-color: hwb(251 13% 83% / 0.787);

}

#madin-scroller {
  width: calc(100vw - 200px);
}
#main-scroller {
  display: flex;
  scroll-snap-type: x mandatory;
  
  /* Make it full viewport width */
  width: 100vw;
  
  /* Add padding so first/last panes can center */
  padding-left: calc(50vw - 400px);   /* half viewport minus half pane width */
  padding-right: calc(50vw - 400px);
}
.ui-content-column {
  scroll-snap-align: center; 
  width: 700px;
  max-width: 100%;
  flex: none; 
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 34px);
  margin: 15px;
  padding-right: 40px;
}
.ui-content-column {
  overflow-x: scroll;
  border-radius: 10px;
  width: 800px;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.ui-content-column:first-child {
  height: auto !important;
}
@media (max-width: 768px) {
  .ui-left-sidebar {
    display: none;
  }
  .ui-content-column:last-child:not(:first-child) {
    margin-right: 0px;
  }
}

.ui-darken-on-hover:hover .text-gray-400 {
  color: #191919;
}


.ui-styled-text.--roam > ul {
  list-style: none;
  margin-left: 0px;
  margin-bottom: 0px;
  & > li:first-child > h1,
  & > li:first-child > h2,
  & > li:first-child > h3 {
    margin-top: 0px;
  }
  & > li > p:not(:has(+ ul)) {
    margin-bottom: 1rem;
  }
  ul {
    margin-bottom: 0px;
  }
  & > li:last-child > p {
    margin-bottom: 0px;
  }
  img {
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    padding: 4px;
  }
  li:has(img) {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
  }
  .rm-bold {
    font-weight: 600;
  }
  .info-container, .hide-on-website {
    display: none;
  }
  hr {
    border-color: var(--styled-text-h2-bottom-border, #d0d7deb3)
  }
}

.ui-styled-text.--roam img {
  margin-bottom: 1rem;
}

.ui-mini-tabnav {
  display: flex;
  gap: 4px;
  & > * {
    padding: 4px 8px;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    &:hover {
      background-color: #f0f0f0;
    }
  }
  .--active {
    background-color: #f0f0f0dc;
    font-family: 'Radion Bold', sans-serif;
  }
}