@font-face {
    font-display: swap;
    font-family: 'B612';
    font-style: normal;
    font-weight: 400;
    src: url('/static/b612-v12-latin-regular.woff2') format('woff2'); 
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "B612";
}

body,
p,
li,
strong,
em,
a {
  font-family: "B612" !important;
}


hr {
  background-color: #afafaf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bulma-body-color: #ffffff;
    }

    body {
        background-image: url("/static/newWorld4.png");
    }
}
@media (prefers-color-scheme: light) {
    /** looks like shit? */
    body {
        background-image: url("/static/maps/Map333.png");
    }
    div.dummy-root-el {
        background-color: color-mix(in srgb, var(--bulma-light) 80%, transparent);
    }
}

.bg-grass {
    background-color: #78c850 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-water {
    background-color: #6890f0 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-fire {
    background-color: #f08030 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-flying {
    background-color: #a890f0 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-bug {
    background-color: #a8b820 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-normal {
    background-color: #a8a878 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-dark {
    background-color: #705848 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-electric {
    background-color: #f8d030 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

/* could go either way. */
.bg-psychic {
    background-color: #f85888 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-poison {
    background-color: #a040a0 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-ground {
    background-color: #e0c068 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-ice {
    background-color: #59c0c0 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-steel {
    background-color: #b8b8d0 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-fairy {
    background-color: #ee99ac !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-fighting {
    background-color: #c03028 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-rock {
    background-color: #b8a038 !important;
    .auto-light-dark {
        color: var(--bulma-dark);
    }
}

.bg-dragon {
    background-color: #7038f8 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-ghost {
    background-color: #705898 !important;
    .auto-light-dark {
        color: var(--bulma-light);
    }
}

.bg-qmarks {
    background: rgb(27, 121, 9);
    background: linear-gradient(
        90deg,
        rgba(27, 121, 9, 1) 7%,
        rgba(121, 16, 145, 1) 24%,
        rgba(183, 79, 79, 1) 36%,
        rgba(106, 146, 110, 1) 49%,
        rgba(81, 89, 162, 1) 61%,
        rgba(188, 107, 58, 1) 72%,
        rgba(156, 101, 142, 1) 85%,
        rgba(0, 212, 255, 1) 100%
    );

    .auto-light-dark {
        color: var(--bulma-light);
    }
}

table.vcentre td {
  vertical-align: middle;
}

.list-item-title {
  color: var(--bulma-box-color);
}

/* gotta have a fancy navbar! */
.navbar {
  background: linear-gradient(
    90deg,
    rgba(203, 17, 224, 1) 0%,
    rgba(255, 107, 129, 1) 100%
  );
  border-radius: 5px;
}

/* stop navbar from being so... squished */
.navbar-brand {
  padding-left: 1rem;
}

.navbar-end {
  padding-right: 1rem;
}

/* navbar link colours */
a.navbar-item,
a.navbar-link,
div.navbar-link {
  color: #ffffff;
  background-color: inherit !important;
}

.navbar-dropdown .navbar-item {
  color: black;
}

.navbar-dropdown:hover .navbar-item {
  color: inherit;
}

a.navbar-item:hover,
a.navbar-link:hover,
.navbar-item.has-dropdown:hover a.navbar-link {
  color: #6bff88;
  background-color: inherit !important;
}

/* grid cards with equal height */
.has-equal-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.has-equal-height .card-footer {
  margin-top: auto;
}

img.grid-image {
  object-fit: cover;
}

#pokemon-display-2 > div.columns {
  margin-top: 0;
}

#pokemon-display-2 > div.columns > div.column {
  padding-top: 0;
  padding-bottom: 0;
}

tr.is-primary {
  background-color: #00d1b2;
}

tr.is-primary > th,
tr.is-primary > td {
  color: white;
}

td.centre {
  vertical-align: middle;
}

td.no-border {
  border: none;
}

.jsify-hidden {
  display: none;
}

/* https://codepen.io/khvoretskiy/pen/YzpPdLe */
.nested.dropdown:hover > .dropdown-menu {
  display: block;
}
.nested.dropdown .dropdown-menu {
  top: -12px;
  margin-left: 100%;
}

.nested.dropdown .dropdown-trigger button {
  padding: 0px 0px;
  border: 0px;
  font-size: 14px;
  font-weight: 400;
}

/* make the walkthrough text narrower, but allow the details text to be bigger */
.walkthrough .content {
    margin-top: 1.5rem;
}

@media (prefers-color-scheme: dark) {
    article#walkthrough > div.content {
        /* copied from bulma css */
        --bulma-color-l: var(--bulma-light-l);
        --bulma-color-l-delta: 0%;
        color: hsl(var(--bulma-light-h), var(--bulma-light-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important;
    }
}
@media (prefers-color-scheme: light) {
    article#walkthrough {
        background-color: color-mix(in srgb, var(--bulma-light) 80%, transparent);
        border-radius: 1.5rem;
    }
}

.walkthrough .content p,
.walkthrough .content h1,
.walkthrough .content h2,
.walkthrough .content h3,
.walkthrough .content h4,
.walkthrough .content ul,
.walkthrough .content ol,
.walkthrough .content span,
.walkthrough .content figure.image,
.walkthrough .content div.notification,
.walkthrough summary,
.walkthrough .content div.video-container,
.walkthrough iframe,
.walkthrough table,
.walkthrough-hero {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.walkthrough-hero {
  padding-bottom: 1rem;
}

.walkthrough .content ul > li,
.walkthrough .content ol > li {
  margin-left: 2rem;
  margin-right: 2rem;
}

.walkthrough details {
  padding-bottom: 1rem;
}

.walkthrough summary {
  padding: 1em;
  text-align: center !important;

  color: var(--bulma-link-text);
}

.walkthrough summary:hover {
  text-decoration: underline;
  cursor: pointer; /** WHY is this not the default */
}

.walkthrough details[open] {
  border: 4px solid black;
  border-radius: 1rem;
  width: 85%;
  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.walkthrough figure,
.walkthrough img {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@media (prefers-color-scheme: light) {
  .walkthrough details[open] {
    background-color: #efefef;
  }
}
@media (prefers-color-scheme: dark) {
  .walkthrough details[open] {
    background-color: var(--bulma-background-active);
  }
}

.walkthrough details[open] > * {
  max-width: 95%;
}

.walkthrough details[open] > summary {
  border-bottom: 1px solid black;
  margin-bottom: 1rem;
}

.walkthrough details > hr {
  width: 75%;
  color: #afafaf;
  margin: 1.5rem auto;
}

.walkthrough li > ol,
.walkthrough li > ul {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-bottom: 0.5rem;
  margin-top: 0 !important;
  padding-top: 0.5rem;
}

img.pp {
  image-rendering: pixelated;
}

@media (prefers-color-scheme: light) {
    .has-mix-exclusion-light {
        mix-blend-mode: exclusion;
    }
}