@font-face {
  font-family: 'LatoWeb';
  src: url('Lato-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'LatoWeb';
  src: url('Lato-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

:root {
  --bs-font-sans-serif: 'LatoWeb';
  --bs-border-radius: 10px;

  --card-box-shadow: 0 1px 2px 0 #3d41440f, 0 1px 3px 1px #3d414429;
  --card-border-color: #dfe2e5;
  --card-border-width: .05rem;
  --card-border-radius: 10px;
}

/* Images in dark mode */
html[data-bs-theme="dark"] img {
    filter: invert(1) hue-rotate(180deg);
}

/* HEADER */
body>header, body[data-layout=landing]>header {
    height: 89px;
}

/* No padding on the landing page */
body[data-layout=landing]>main{
    padding-top: 0.0rem;
}

/* Hero-block on the landing page */
body[data-layout=landing] div.hero-block {
    align-items: center;
    background-image: url('../images/HeroBlockBackground.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    height: 415px;
    justify-content: center;
    text-align: center;
}

body[data-layout=landing] div.hero-block h1{
    color: var(--bs-light);
    font-size: 4.375rem;
    font-weight: 400;
    letter-spacing: .875rem;
    margin: 0;
    padding: 1rem;
    text-transform: uppercase;
}

body[data-layout=landing] div.hero-block p,
body[data-layout=landing] div.hero-block span{
    color: var(--bs-light);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

body[data-layout=landing] div.hero-block form>input{
    padding-left: 2.5rem;
    margin-left: -1.0rem;
}

body[data-layout=landing] div.hero-block form>i.bi{
    position: relative;
    left: 1.0rem;
    opacity: .5;
}

/* Version selector at the top right corner */
.navbar #navbar form.version-select  {
  order: 48;
  margin-left: auto;
}

.navbar #navbar form.version-select ul.dropdown-menu a.dropdown-toggle::after {
    rotate: -90deg;     /* Rotate the arrow to point right */
}

/* Dropdown menus */
ul.dropdown-menu {
  --bs-dropdown-min-width: 5.0rem;
}

ul.dropdown-menu li {
    position: relative;
}

ul.dropdown-submenu {
  left: 100%;
  top: -0.5rem;
}

.dropdown-item:hover {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--bs-dropdown-link-active-bg);
}


/* Dark/light mode toggle */
.navbar #navbar form.icons {
  order: 49;
  margin-left: unset;
}

/* BODY */
body {
    font-family: var(--bs-font-sans-serif), sans-serif;
    line-height: 1.5;
}

/** LOGO **/

#logo {
    height: auto;
    width: 10rem;
}

/** CONTAINERS **/

.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
}

/** NAVBAR **/

.navbar-nav {
    --bs-nav-link-color: var(--bs-body-color);
    margin-left: 6rem;
}

.navbar-nav li{
    margin-right: 1rem;
    text-wrap-mode: nowrap;
}

.btn-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #cbd9ec;
  --bs-btn-color: #fff;
  --bs-btn-bg: #06c;
}

.btn-primary-light {
  --bs-btn-font-weight: 600;
  --bs-btn-color: #000;
  --bs-btn-bg: #cbd9ec;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #06c;
}

/* Table of contents */

nav#affix ul li a.link-secondary{
    margin-left: 0.75rem;
}

/* CODE SNIPPETS */
pre code {
  border-radius: var(--bs-border-radius);
  margin: 4px 2px;
  box-shadow: var(--card-box-shadow);
}

/* GRID CARDS */
.grid-cards {
    display: grid;
    grid-gap: .4rem;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr));
    margin: 1em 0
}

.grid-cards>ul {
    display: contents;
}

.grid-cards>ul>li {
    border-color: var(--card-border-color);
    border-radius: var(--card-border-radius);
    border-style: solid;
    border-width: var(--card-border-width);
    display: block;
    margin: 0;
    padding: .8rem;
    transition: border .25s, box-shadow .25s;
}

.grid-cards>ul>li:hover {
    border-color: #fff;
    box-shadow: var(--card-box-shadow);
}

/* ALERTS */
.alert-abstract {
    --bs-alert-border-color: var(--bs-light-border-subtle);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-color: var(--bs-light-text-emphasis);
    --bs-alert-link-color: var(--bs-light-text-emphasis);
}
.alert-abstract h5:before {
    content: "\f227";
}

/* Footer */

body>footer {
    height: unset;
}

body>footer div.flex-fill {
    display: flex;
    justify-content: space-between;
}

body>footer ul {
    display: inline-block;
}

@media screen and (min-width: 75em) {
    body>footer ul li {
        display: inline-block;
    }
}

body>footer ul li {
    list-style: none;
    margin-left: 1em;
}

footer a {
    --bs-link-color-rgb: --bs-secondary-rgb;
}