@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');

:root {
  /* =========================================================
     Site colors
     ========================================================= */

  --bg: #050505;
  --surface: #0b0d0b;

  --green: #39ff14;
  --green-soft: #8acb45;

  --yellow: #ffe600;
  --yellow-soft: #d8c96a;

  --blue: #00e5ff;
  --blue-soft: #4dd9e6;

  --red: #E07038;
  --red-soft: #D9824E;

  --border-dark: #263526;
}


body {
  font-family: "Nunito", "Trebuchet MS", sans-serif;
  font-size: 16px;
}

.tiny {
 margin: 0 10px; 
 font-family: Comfortaa; 
 color: #4dd9e6; 
 font-size: 11px; 
}

li {
  margin-bottom: 5px; 
}

hr {
 border: none;
 height: 1px;
 background-color: var(--green-soft); 
}

/* =========================================================
   Main content area
   ========================================================= */

.content {
  margin-left: 270px;
  min-height: 100vh;

  padding: 65px 70px;

  position: relative;
}


/* =========================================================
   Content box
   ========================================================= */

.content-inner {
  max-width: 600px;

  margin: 0 auto;
  padding: 50px 60px;

  background: #060706;

  border: 4px solid #39ff14;

box-shadow:
  0 0 5px rgba(57, 255, 20, 0.22),
  0 12px 35px rgba(0, 0, 0, 0.5);

  border-radius: 10px;
  font-weight: 400;

  color: #d8c96a;

  font-family: "Nunito", "Trebuchet MS", sans-serif;
}

.content-inner hr {
 margin-top: 32px;
}

/* =========================================================
   Headings
   ========================================================= */

.content-inner h1,
.content-inner h2,
.content-inner h3 {
  color: #ffe600;
  font-family: "Michroma", sans-serif;
  font-weight: 600;
}


.content-inner h1 {
  margin-top: 0;

  font-size: 3rem;
  letter-spacing: 0.025em;
  color: #00e5ff;

  font-weight: 900;
  font-family: "Nunito", sans-serif;
  border-bottom: 1px solid var(--green-soft);
  padding-bottom: 14px;
}

.content-inner h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.6rem;
  color: #E07038;
}

.content-inner h3 {
  font-family: "Michroma", sans-serif;
  font-size: 1.1rem;
  color: var(--green-soft);
}

.content-inner hr {
  height: 1px;
}

.content-inner .publink {
  font-family: "Nunito", sans-serif;
  font-size: 1.3rem;
  color: var(--green-soft);
}

.quote {
  padding-left: 16px;
  border-left: 2px solid var(--green);
  color: var(--green-soft);
  font-size: 14px;
  font-style: italic;
}

.redquote {
  padding-left: 16px;
  font-size: 14px;
  border-left: 1px solid var(--red);
  color: var(--red-soft);
}



/* =========================================================
   Content links
   ========================================================= */

.content-inner a {
  color: #4dd9e6;
}

.content-inner a:hover {
  color: #060706;
  background: #4dd9e6;
}




/* =========================================================
   Mobile content
   ========================================================= */

@media (max-width: 768px) {

  .content {
    margin-left: 0;
    padding: 60px 15px 30px;
  }

  .content-inner {
    max-width: none;
    padding: 30px 22px;
  }

  .content-inner h1 {
    font-size: 2rem;
  }

  .content-inner h2 {
    font-size: 1.5rem;
  }
}



/* Background */

body::before {
  content: "";

  position: fixed;
  z-index: -2;
  inset: 0;

  background-image: url("/images/darkgaia.png");
  background-repeat: repeat;
  background-size: 1024px 1024px;

  image-rendering: pixelated;

  animation: gaia-drift 45s linear infinite;

  pointer-events: none;
  will-change: background-position;
}

@keyframes gaia-drift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -1024px 1024px;
  }
}