@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-semiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-extraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

.md-grid {
  max-width: 100%;
}

:root {
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --rsc-gold-light: #F0C572;
  --rsc-gold-mid: #C89457;
  --rsc-gold-dark: #A0643C;
  --rsc-light-stone-light: #C0BCAE;
  --rsc-light-stone-mid: #B4AB98;
  --rsc-light-stone-dark: #807C70;
  --rsc-dark-stone-light: #F0C572;
  --rsc-dark-stone-mid: #302B27;
  --rsc-dark-stone-dark: #1B1815;
  --rsc-dark-stone-darkest: #0f0e0c; /* manual addition not from the style guide, for extra contrast */
  --rsc-parchment-light: #B39E8B;
  --rsc-parchment-mid: #B39E8B;
  --rsc-parchment-dark: #B39E8B;
  --rsc-leather-light: #472E24;
  --rsc-leather-mid: #381E19;
  --rsc-leather-dark: #23120C;
  --rsc-blue: #101d23;
  --rsc-body-text: #fafafa;

  /* Community app Colors */
  --rs-color-black-evil: oklch(0% 0 0);
  --rs-color-danger-red: oklch(53.73% 0.1791 25.61);
  --rs-color-rune-beige: oklch(85.38% 0.1033 76.07);
  --rs-color-rune-gold-high: oklch(83.28% 0.1716 82.06);
  --rs-color-rune-gold-mid: oklch(74.65% 0.1006 71.12);
  --rs-color-rune-gold-medium: oklch(75.86% 0.1768 60.64);
  --rs-color-rune-gold-light: oklch(85.96% 0.1051 76.77);
  --rs-color-rune-gold-dark: oklch(61.18% 0.0972 62.69);
  --rs-color-rune-gold-low: oklch(66.46% 0.1512 62.78);
  --rs-color-rune-blue-dark: oklch(17.62% 0.0210 258.31);
  --rs-color-rune-blue-light: oklch(46.61% 0.0624 246.99);
  --rs-color-rune-blue-high: oklch(29.62% 0.0602 241.32);
  --rs-color-rune-blue-mid: oklch(25.91% 0.0498 243.98);
  --rs-color-rune-blue-low: oklch(22.36% 0.0358 245.21);
  --rs-color-white-ghost: oklch(100% 0 0);
  --rs-color-base100: oklch(18.84% 0.0309 241.68);
  --rs-color-base90: oklch(26.74% 0.0492 244.44);
  --rs-gradient-blue-secondary: linear-gradient(oklch(63.59% 0.0702 236.66), oklch(41.66% 0.0603 244.23));
  --rs-gradient-blue-dark: linear-gradient(90deg, var(--rs-color-rune-blue-low) 0%, var(--rs-color-rune-blue-high) 50%, var(--rs-color-rune-blue-low) 100%);
  --rs-gradient-gold-divide: linear-gradient(90deg, oklch(0% 0 0 / 0%) 0%, oklch(0% 0 0 / 0%) 50%, oklch(0% 0 0 / 35%) 100%), linear-gradient(var(--rs-color-rune-gold-high) 50%, var(--rs-color-rune-gold-low) 50%);
  --rs-gradient-gold-radial: radial-gradient(closest-side, var(--rs-color-rune-gold-high), var(--rs-color-rune-gold-medium));
  --rs-gradient-rune-gold-linear: linear-gradient(var(--rs-color-rune-gold-high), var(--rs-color-rune-gold-low));
  --rs-gradient-sun-rise: linear-gradient(oklch(85.96% 0.1051 76.77), oklch(61.18% 0.0972 62.69));
  --rs-gradient-dark-gold-linear: linear-gradient(240deg, var(--rs-color-white-ghost) 2%, oklch(85.79% 0.0765 101.91) 9%, oklch(68.88% 0.0936 83.96) 17%, oklch(49.26% 0.0702 74.32) 28%, oklch(46.49% 0.0666 73.31) 37%, oklch(55.78% 0.0755 76.89) 65%, oklch(59.66% 0.0834 74.59) 79%, oklch(73.61% 0.1514 78.74) 91%, oklch(86.05% 0.1757 92.31) 106.1%);
  --rs-gradient-silver-linear: linear-gradient(oklch(82.79% 0.0000 0), oklch(33.63% 0.0000 0));
  --rs-gradient-bronze-linear: linear-gradient(oklch(72.30% 0.2092 43.41), oklch(10.53% 0.0161 35.02));
  --rs-gradient-rune-blue-radial: linear-gradient(90deg, var(--rs-color-rune-blue-low) 0%, var(--rs-color-rune-blue-high) 50%, var(--rs-color-rune-blue-low) 100%);
  --rs-gradient-black-to-transparent: linear-gradient(to top, oklch(0% 0 0 / 90%) 50%, oklch(0% 0 0 / 5%) 85%, transparent);
  --rs-border-runegoldmid: 0.125rem solid oklch(74.65% 0.1006 71.12);
  --rs-gradient-border-sun-rise: linear-gradient(to bottom, oklch(85.96% 0.1051 76.77), oklch(61.18% 0.0972 62.69)) 1;
  --rs-border-gradient-sun-rise: linear-gradient(to bottom, oklch(85.96% 0.1051 76.77), oklch(61.18% 0.0972 62.69)) 1;

  --rsc-body-bg: var(--rsc-dark-stone-darkest);

  --md-default-fg-color: var(--rsc-body-text);
  --md-default-bg-color: var(--rsc-dark-stone-dark);
  --md-default-bg-color--light: var(--rsc-dark-stone-dark);
  --md-default-bg-color--lighter: var(--rsc-dark-stone-mid);
  --md-default-bg-color--lightest: var(--rsc-light-stone-light);
  --md-default-fg-color--lightest: var(--rsc-gold-light);
  --md-typeset-table-color: var(--rsc-gold-light);
  --md-typeset-table-color--light: var(--rsc-gold-light);
  --md-footer-separator-color: var(--rsc-gold-light);
  --md-default-fg-color--light: var(--rsc-gold-light);
  --md-accent-fg-color: var(--rsc-gold-light);
}

[data-md-color-scheme=slate][data-md-color-primary=indigo] {
  --md-typeset-a-color: var(--rsc-dark-stone-light);
}

[data-md-color-scheme=slate] {
  --md-default-fg-color: var(--rsc-body-text);
}

[data-md-color-accent=indigo] {
  --md-accent-fg-color: var(--rsc-gold-light);
}

.md-typeset a {
  text-decoration: none !important;
}

.md-typeset a:focus, .md-typeset a:hover {
  color: var(--rsc-gold-mid) !important;
}

.md-sidebar__scrollwrap:focus-within, .md-sidebar__scrollwrap:hover {
  scrollbar-color: var(--rsc-gold-light) var(--rsc-dark-stone-mid) !important;
}

body {
  background-color: var(--rsc-body-bg);
  font-family: var(--font-body);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title,
.md-nav__title,
.md-tabs__link {
  color: var(--rsc-gold-light);
  font-family: var(--font-display);
}

.md-sidebar__inner .md-nav__link .md-ellipsis {
  font-family: var(--font-body) !important;
  /*font-weight: bold !important;*/ /* makes it a bit too bold*/
}

.md-nav__item .md-typeset {
  font-family: var(--font-display) !important;
}

.md-footer {
  background-color: var(--rs-color-black-evil) !important;
}

.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th,
.md-search__input,
.md-search-result__meta,
.md-nav,
.md-nav__link,
.md-header,
.landing-page__card-label {
  font-family: var(--font-body);
}

.md-header__title,
.landing-page__title {
  font-family: var(--font-display);
  font-weight: bold !important;
  text-transform: uppercase !important;
}

.md-header__topic {
  color: var(--rsc-gold-light) !important
}

hr,
.md-typeset hr {
  border-color: var(--rsc-gold-light);
}

.md-header__option[data-md-component="palette"] {
  display: none;
}

.md-header__source {
  display: none;
}

.basevar-table {
  margin: 0px;
  td {
    border-style: hidden hidden solid hidden;
    border-width: 1px;
    border-color: rgba(128, 128, 128, 0.2)
  }
  font-size: 88.5%;
}

.basevar-header {
  td {
    border-style: solid hidden solid hidden;
  }
}

.basevar-num {
  min-width: 24px;
  max-width: 24px;
  font-size: 62.5%;
  vertical-align: middle;
}

/* LANDING PAGE */

.landing-page__title {
  text-align: center;
}

.landing-page {
  max-width: 1200px;
  margin: 0px auto;
}

.landing-page__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.landing-page__grid-col {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.landing-page__card {
  --landing-card-image: url("../assets/Plugins.jpg");
  --landing-card-color: var(--rsc-light-stone-mid);
  --landing-card-band-height: 150px;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--rsc-parchment-light);
  color: #ffffff;
  text-decoration: none !important;
  box-sizing: border-box;
  border: 3px solid var(--rsc-gold-light);
  border-radius: 0;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
  transition: all 180ms ease-in-out;
}

.landing-page__card::before {
  content: "";
  position: absolute;
  inset: 0 0 var(--landing-card-band-height);
  z-index: 0;
  background-image: var(--landing-card-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 180ms ease-in-out !important;
}

.landing-page__card::after {
  content: "";
  position: absolute;
  inset: 0 0 var(--landing-card-band-height);
  z-index: 0;
  background: linear-gradient(rgba(15, 14, 12, 0.45), rgba(15, 14, 12, 0.7));
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms ease-in-out;
}

.landing-page__card:hover::after,
.landing-page__card:focus-visible::after {
  opacity: 0;
}

.landing-page__card--modio {
  --landing-card-image: url("../assets/vista-desktop.jpg");
  --landing-card-color: #07C1D8;
}

.landing-page__card--discord {
  --landing-card-image: url("../assets/Combat Style Modernisation.jpg");
  --landing-card-color: #5865F2;
}

.landing-page__card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 var(--landing-card-band-height);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: var(--landing-card-band-height);
  padding: 12px;
  background-color: var(--landing-card-color);
}

.landing-page__card-caption {
  text-align: center;
  visibility: hidden;
}

.landing-page__grid-col:hover .landing-page__card-caption {
  visibility: visible
}

.landing-page__card:hover::before,
.landing-page__card:focus-visible::before {
  transform: scale(1.06);
}

.landing-page__card:hover,
.landing-page__card:focus-visible {
  box-shadow: 0 1.4rem 2.6rem rgba(0, 0, 0, 0.36);
}

.landing-page__card .landing-page__card-logo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: min(240px, 85%);
  height: 100px;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 180ms ease-in-out;
}

.landing-page__card:hover .landing-page__card-logo,
.landing-page__card:focus-visible .landing-page__card-logo {
  opacity: 1.0;
}