/* Global grid size to 1800px max */
.md-grid {
    max-width: 1800px; 
}
.md-main__inner {
    margin-top: 0;
}

/* Banner image styling */
[data-md-color-scheme="default"] {
  --bg-overlay: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="slate"] {
  --bg-overlay: rgba(0, 0, 0, 0.6);
}

.banner-img {
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100dvh;
  width: 100%;
  z-index: -99;
  
  background: 
    linear-gradient(var(--bg-overlay)), 
    url("../main-content/EasyGameUIBackground.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* More visible background on cards */
.md-typeset .grid.cards>ol>li, .md-typeset .grid.cards>ul>li, .md-typeset .grid>.card {
  /* -webkit-backdrop-filter: blur(.4rem);
  backdrop-filter: blur(.4rem); */
  background-color: var(--md-default-bg-color--lighter);
}

/* Prevent code blocks from being too tall and scrolling on x */
code { 
    max-height: 200px !important; 
}
.md-code__content {
    max-height: 200px;
    overflow-x: hidden !important;
}

/* Increase spacing around copy code button and make it more visible */
.md-code__nav{
    padding: 8px;
    margin: 5px;
    left: 0;
    top: inherit;
    right: inherit;
    border-radius: 9.6px;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
	transition: 0.2s box-shadow;
    background-color: var(--md-code-bg-color);
}
:hover>.md-code__nav{
    box-shadow: 0 0 10px 0px black;
    background-color: var(--md-code-bg-color);
	transition: 0.2s box-shadow;
}

.md-code__button {
    color: var(--md-default-fg-color--light);
    width: 2em;
    height: 2em;
}

.md-code__button:after {
    width: 1.5em;
    height: 1.5em;
}

/* Remove spacing beside the search box */
.md-header__source {
    width: 0;
}

/* More visible dividers */
.md-typeset hr {
    border-bottom: 0.05rem solid var(--md-default-fg-color--lighter)
}

/* Set code blocks text to the accent color */
.md-typeset code{
    color: var(--md-typeset-a-color);
}

[dir=ltr] .md-typeset ol li, [dir=ltr] .md-typeset ul li {
    padding-left: 0.33em;
}

/* PLace adomnition arrow to the left of the box and hide icon */
.md-typeset summary:before {
    width: 0 !important;
}
.md-typeset summary:after {
    left: 0 !important;
}


.hidden-title {
    visibility: collapse !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide entirely disabled gallery arrows */
.gnext.disabled, .gprev.disabled {
    height: 0 !important;
}
.glightbox-clean .gnext, .glightbox-clean .gprev {
    height: 0 !important;
}

/* Force admonition without title to properly center vertically */
html .md-typeset .admonition>:first-child, html .md-typeset details>:first-child{
  margin-top: .8rem;
}
html .md-typeset .admonition>:last-child, html .md-typeset details>:last-child {
  margin-bottom: .8rem;
}

/* -------- FONTS -------- */
@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/rubik-v31-latin-300.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/rubik-v31-latin-300italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rubik-v31-latin-regular.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/rubik-v31-latin-italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/rubik-v31-latin-500.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/rubik-v31-latin-500italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/rubik-v31-latin-700.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/rubik-v31-latin-700italic.woff2') format('woff2'); 
}


@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-v24-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/jetbrains-mono-v24-latin-700italic.woff2') format('woff2');
}

:root {
  --md-text-font: 'Rubik'; 
  --md-code-font: 'JetBrains Mono'; 
}