/* =========================================================
   GLOBAL
========================================================= */

html,
body {
  margin: 0;
  padding: 0;

  min-height: 100%;

  background-color: #005a5a;

  /*
    transparent greyscale overlay
  */
  background-image:
    url("assets/bg-overlay.png");

  background-repeat: repeat;

  color: #bfcf9d;

  font-family:
    Verdana,
    Tahoma,
    sans-serif;

  font-size: 14px;

  image-rendering: pixelated;
}

/* =========================================================
   PAGE WIDTH
========================================================= */

#quarto-content {
  max-width: 1500px;

  margin: 0 auto;

  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 40px;
}

/* =========================================================
   REMOVE QUARTO UI
========================================================= */

.navbar,
.nav-footer,
.sidebar,
#quarto-margin-sidebar,
#title-block-header {
  display: none !important;
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
  height: 120px;

  background-image:
    linear-gradient(
      rgba(0,0,0,.2),
      rgba(0,0,0,.2)
    ),
    url("assets/header.png");

  background-repeat: repeat-x;

  background-size: auto 120px;

  border-bottom:
    3px solid #103838;

  position: relative;
}

.site-title {
  position: absolute;

  left: 20px;
  bottom: 18px;

  color: white;

  font-size: 3rem;

  font-weight: bold;

  letter-spacing: 2px;

  text-shadow:
    3px 3px 0 #000,
    0 0 8px rgba(255,255,255,.35);
}

/* =========================================================
   TOP NAV
========================================================= */

.top-nav {
  display: flex;
  gap: 18px;

  padding:
    6px 16px;

  background:
    linear-gradient(
      to bottom,
      #145353,
      #0a3838
    );

  border-top:
    1px solid #3c8781;

  border-bottom:
    1px solid #021515;
}

.top-nav a {
  color: #c6d5ab;

  text-decoration: none;

  font-size: 13px;
}

.top-nav a:hover {
  color: white;

  text-shadow:
    0 0 5px rgba(255,255,255,.5);
}

/* =========================================================
   NEWS TICKER
========================================================= */

.news-ticker {
  display: flex;

  align-items: center;

  margin:
    10px 24px 24px;

  border:
    1px solid #1f7470;

  background:
    linear-gradient(
      to bottom,
      #124847,
      #082f2f
    );

  overflow: hidden;

  box-shadow:
    inset 0 0 0 1px #4c9892;
}

.ticker-label {
  flex-shrink: 0;

  padding:
    8px 14px;

  background:
    linear-gradient(
      to bottom,
      #2b7d77,
      #14504d
    );

  border-right:
    1px solid #082222;

  color: #f0d77d;

  font-weight: bold;
}

.ticker-window {
  overflow: hidden;

  width: 100%;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.ticker-track span {
  display: inline-block;

  margin-right: 90px;

  color: #d5d7b8;
}

@keyframes ticker-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   PANELS
========================================================= */

.retro-panel {
  margin-bottom: 22px;

  border:
    1px solid #1d716d;

  background:
    linear-gradient(
      to bottom,
      #003d3d,
      #003232
    );

  box-shadow:
    inset 0 0 0 1px #57918b,
    0 0 12px rgba(0,0,0,.35);
}

/* =========================================================
   PANEL HEADERS
========================================================= */

.retro-panel h2 {
  margin: 0;

  padding:
    10px 14px;

  background:
    linear-gradient(
      to bottom,
      #2d7c76,
      #134c49
    );

  border-bottom:
    1px solid #082525;

  color: #d9ddb3;

  font-size: 16px;

  letter-spacing: 1px;

  text-shadow:
    1px 1px 0 black;
}

/* =========================================================
   PANEL CONTENT
========================================================= */

.retro-panel p,
.retro-panel ul,
.retro-panel ol,
.retro-panel div,
.retro-panel h3,
.retro-panel h4 {
  padding-left: 14px;
  padding-right: 14px;
}

.retro-panel ul {
  margin-top: 12px;
  margin-bottom: 14px;
}

.retro-panel li {
  margin-bottom: 6px;
}

/* =========================================================
   LINKS
========================================================= */

a {
  color: #9fd6cb;

  text-decoration: none;
}

a:hover {
  color: #ffffff;

  text-shadow:
    0 0 6px rgba(255,255,255,.5);
}

/* =========================================================
   OPTIONAL CRT OVERLAY
========================================================= */

body::after {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 3px
    );

  mix-blend-mode: soft-light;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .site-title {
    font-size: 1.7rem;
  }

  .top-nav {
    flex-wrap: wrap;
  }

  .news-ticker {
    margin-left: 12px;
    margin-right: 12px;
  }

  #quarto-content {
    padding-left: 12px;
    padding-right: 12px;
  }

   
}

/* =========================================================
   CARDS
========================================================= */

.card {
  padding: 12px;
  border-radius: 12px;
  background: transparent;
  transition: 0.2s ease;
}

.card a {
  color: inherit;
  text-decoration: none;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 300px));
  grid-auto-rows: 380px;
  gap: 16px;
}