@font-face {
    font-family: "Lato";
    src: url('assets/fonts/lato.thin.ttf');
  }

  @font-face {
    font-family: "Now";
    src: url('assets/fonts/now.thin.otf');
  }

  @font-face {
    font-family: "Uni";
    src: url('assets/fonts/uni-sans.thin-caps.otf');
  }

  body {
    background-color: #000;
  }

  .uni,
  header,
  footer,
  h1,
  h2,
  h3,
  h4 {
    font-family: Uni;
  }

  .now {
    font-family: Now;
  }

  .lato,
  body {
    font-family: Lato;
  }

  .nav-text {
    color: #fff !important;
  }

  .nav-text:hover {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }

  .game-descr {
    background-color: #000000b8;
    border-radius: 15px;
    padding: 10px;
    width: fit-content;
    // margin: -10px -10px 20px -10px;
  }

  svg {
    margin: 3px;
  }

  .glow:hover {
    -webkit-box-shadow:0px 0px 50px 5px rgba(255,255,255,0.34);
    -moz-box-shadow: 0px 0px 50px 5px rgba(255,255,255,0.34);
    box-shadow: 0px 0px 50px 5px rgba(255,255,255,0.34);
    border-radius: 15px;
  }

  .feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
  }

  .icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
  }

  .text-shadow-1 {
    text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
  }

  .text-shadow-2 {
    text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
  }

  .text-shadow-3 {
    text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
  }

  .card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  .feature-icon-small {
    width: 3rem;
    height: 3rem;
  }

  .form-control-dark {
    border-color: var(--bs-gray);
  }
  .form-control-dark:focus {
    border-color: #fff;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
  }
  
  .text-small {
    font-size: 85%;
  }
  
  .dropdown-toggle:not(:focus) {
    outline: 0;
  }
  



  @property --a { /* must register --a to animate it */
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false
  }
  
  .animcard {
    position: relative;
  }
  
  .animcard::before {
    /* grid doesn't work for stacking when a stacked item is text node */
    position: absolute;
    /* place behind card content, so card text is selectable, etc */
    z-index: 0;
    /* best if inset is at least half the border-width with minus */
    inset: -1em;
    /* reserve space for border */
    border: solid 0.25em;
    border-image: 
      /* adjust gradient as needed, I just used a random palette */
      conic-gradient(from var(--a), #669900, #99cc33, #ccee66, 
          #006699, #3399cc, #990066, #cc3399, 
          #ff6600, #ff9900, #ffcc00, #669900) 1;
    /* blur this pseudo */
    filter: blur(.25em);
    /* tweak animation duration as necessary */
    animation: a 8s linear infinite;
    /* needed so pseudo is displayed */
    content: '';
    width: 100%;
    margin: 10px auto;
  }
  
  /* animate --a from its initial-value 0deg to 1turn */
  @keyframes a { to { --a: 1turn } }

/* GALLERY */ 


.gallery-container p.page-description {
    text-align: center;
    margin: 25px auto;
    font-size: 18px;
    color: #999;
}

.tz-gallery {
    padding: 20px;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div {
    padding: 2px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

.baguetteBox-button {
    background-color: transparent !important;
}

/* GALLERY */