@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Permanent+Marker&display=swap');


/* =====================================
   BOJE
===================================== */

:root {

  --black: #030303;

  --dark: #0b0b0b;

  --gray: #999;

  --white: #eee;

  --red: #ff1e1e;

  --red-dark: #740000;

  --yellow: #ffe600;

  --green: #00ff41;

  --blue: #00aaff;

  --purple: #cc44ff;

}


/* =====================================
   RESET
===================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  color: var(--white);

  background-color: var(--black);

  background-image:
    radial-gradient(
      #222 1px,
      transparent 1px
    );

  background-size: 7px 7px;

  font-family:
    "VT323",
    "Courier New",
    monospace;

  font-size: 19px;

  line-height: 1.25;

  overflow-x: hidden;

}


/* =====================================
   CRT EFEKT
===================================== */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 999;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 4px
    );

}


body::after {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 998;

  box-shadow:
    inset 0 0 160px rgba(0,0,0,.85);

}


a {
  color: var(--yellow);
}


a:hover {

  color: white;

  background: var(--red);

}


/* =====================================
   UPOZORENJE
===================================== */

.top-warning {

  width: 100%;

  padding: 5px;

  text-align: center;

  color: var(--black);

  background: var(--yellow);

  font-weight: bold;

  font-size: 15px;

  border-bottom:
    3px solid black;

}


.blink {

  animation:
    blink .8s steps(1) infinite;

}


@keyframes blink {

  50% {
    opacity: 0;
  }

}


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

.masthead {

  width:
    min(1100px, 94vw);

  margin: auto;

  padding:
    22px 10px 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;

  text-align: center;

}


.mini-skull {

  font-size: 55px;

  filter:
    grayscale(1);

}


.tiny-title {

  color: var(--gray);

  font-size: 15px;

}


h1 {

  margin: 0;

  color: white;

  font-family:
    "Press Start 2P",
    monospace;

  font-size:
    clamp(25px, 5vw, 55px);

  text-shadow:
    4px 4px 0 var(--red-dark);

}


h1 span {

  color: var(--red);

}


.subtitle {

  margin-top: 10px;

  color: var(--green);

  font-family:
    "Permanent Marker",
    cursive;

  font-size: 20px;

}


/* =====================================
   MARQUEE
===================================== */

.marquee {

  width: 100%;

  overflow: hidden;

  border-top:
    2px dashed var(--red);

  border-bottom:
    2px dashed var(--red);

  background: #080000;

  color: var(--red);

  white-space: nowrap;

}


.marquee-track {

  display: inline-block;

  padding: 7px 0;

  font-weight: bold;

  animation:
    marquee 18s linear infinite;

}


@keyframes marquee {

  from {
    transform: translateX(100vw);
  }

  to {
    transform: translateX(-100%);
  }

}


/* =====================================
   GLAVNI LAYOUT
===================================== */

.layout {

  width:
    min(1100px, 94vw);

  margin: auto;

  display: grid;

  grid-template-columns:
    205px 1fr;

  gap: 15px;

  align-items: start;

}


.sidebar {

  padding-top: 15px;

}


/* =====================================
   SIDEBAR BOX
===================================== */

.box {

  margin-bottom: 15px;

  border:
    2px ridge #777;

  background:
    linear-gradient(
      135deg,
      #171717,
      #050505
    );

  box-shadow:
    3px 3px 0 black;

  padding: 8px;

}


.box-title {

  margin:
    -8px -8px 8px;

  padding: 5px;

  color: black;

  background: var(--yellow);

  font-family:
    "Press Start 2P",
    monospace;

  font-size: 9px;

  text-align: center;

}


.box a {

  display: block;

  padding: 5px;

  border-bottom:
    1px dotted #444;

  text-decoration: none;

}


.box a:hover {

  padding-left: 12px;

}


.status-box p {

  margin: 7px 0;

}


.online {

  color: var(--green);

}


/* =====================================
   WEBRING
===================================== */

.webring {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  margin: 10px 0;

}


.webring button {

  background: black;

  color: var(--yellow);

  border:
    1px solid var(--yellow);

  cursor: pointer;

}


.webring span {

  padding: 4px;

  border:
    1px solid var(--purple);

  color: var(--purple);

  text-align: center;

  font-size: 12px;

}


.tiny {

  color: #777;

  font-size: 14px;

}


.center {

  text-align: center;

}


/* =====================================
   STICKER
===================================== */

.sticker {

  margin:
    20px auto;

  width: 145px;

  height: 110px;

  display: grid;

  place-content: center;

  text-align: center;

  color: black;

  background: var(--yellow);

  border:
    5px double black;

  transform:
    rotate(-4deg);

  font-family:
    "Press Start 2P",
    monospace;

  font-size: 9px;

}


.sticker b {

  color: var(--red);

  font-size: 15px;

}


/* =====================================
   VISITOR COUNTER
===================================== */

.visitor {

  text-align: center;

  padding: 10px;

  border:
    2px inset #555;

  background: black;

}


.visitor-title {

  color: var(--green);

  font-size: 13px;

}


.counter {

  margin: 7px 0;

  padding: 6px;

  background: #001900;

  border:
    1px solid #006600;

  color: var(--green);

  font-family:
    "VT323",
    monospace;

  font-size: 29px;

  letter-spacing: 5px;

}


/* =====================================
   HERO
===================================== */

.hero-old {

  margin-top: 15px;

  padding: 12px;

  border:
    4px ridge #777;

  background:
    repeating-linear-gradient(
      45deg,
      #090909,
      #090909 8px,
      #111 8px,
      #111 16px
    );

  text-align: center;

}


.construction {

  margin-bottom: 10px;

  padding: 5px;

  background: var(--yellow);

  color: black;

  border:
    2px solid black;

  font-family:
    "Press Start 2P",
    monospace;

  font-size: 10px;

  animation:
    warning 1.5s infinite;

}


@keyframes warning {

  50% {

    background: var(--red);

    color: white;

  }

}


.banner {

  display: block;

  width: 100%;

  border:
    3px solid black;

  outline:
    2px solid var(--red);

}


.hero-title {

  margin-top: 15px;

  color: var(--yellow);

  font-family:
    "Press Start 2P",
    monospace;

  font-size:
    clamp(16px, 3vw, 30px);

  text-shadow:
    3px 3px 0 var(--red-dark);

}


.hero-title span {

  color: var(--red);

}


.hero-slogan {

  color: var(--green);

  font-family:
    "Permanent Marker",
    cursive;

  font-size: 25px;

}


/* =====================================
   KO-FI GUMB
===================================== */

.donate-button {

  display: inline-block;

  margin: 12px 0;

  padding:
    13px 18px;

  color: black;

  background: var(--yellow);

  border:
    4px outset #fff;

  text-decoration: none;

  font-family:
    "Press Start 2P",
    monospace;

  font-size: 12px;

  box-shadow:
    5px 5px 0 black;

}


.donate-button:hover {

  color: white;

  background: var(--red);

  transform:
    translate(2px, 2px);

  box-shadow:
    2px 2px 0 black;

}


/* =====================================
   SEKCIJE
===================================== */

.retro-section {

  margin-top: 15px;

  padding: 22px;

  border:
    2px ridge #777;

  background:
    rgba(0,0,0,.85);

  box-shadow:
    4px 4px 0 black;

}


.section-heading {

  display: inline-block;

  padding:
    5px 10px;

  color: black;

  background: var(--yellow);

  border:
    2px solid black;

  font-family:
    "Press Start 2P",
    monospace;

  font-size: 10px;

  margin-bottom: 12px;

}


h2 {

  margin:
    10px 0 18px;

  color: white;

  font-family:
    "Press Start 2P",
    monospace;

  font-size:
    clamp(18px, 3vw, 29px);

  line-height: 1.6;

  text-shadow:
    3px 3px 0 var(--red-dark);

}


h2 span {

  color: var(--red);

}


.red,
.big-red {

  color: var(--red);

  font-weight: bold;

}


/* =====================================
   ASCII
===================================== */

.ascii {

  margin:
    20px auto;

  max-width: 500px;

  padding: 12px;

  color: var(--green);

  border:
    1px dashed var(--green);

  background: #001000;

  font-size: 14px;

  overflow-x: auto;

}


/* =====================================
   ČOPOR
===================================== */

.pack-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 8px;

}


.pack-card {

  min-height: 220px;

  padding: 12px;

  text-align: center;

  background: #111;

  border:
    2px outset #555;

  transition: .1s;

}


.pack-card:hover {

  background: #240000;

  border-color: var(--red);

  transform:
    rotate(-1deg);

}


.big-animal {

  font-size: 60px;

  filter:
    grayscale(.75);

}


h3 {

  margin: 5px 0;

  color: var(--yellow);

  font-family:
    "Press Start 2P",
    monospace;

  font-size: 15px;

}


.pack-card p {

  color: #aaa;

}


.pack-card small {

  color: var(--red);

  font-family:
    "Permanent Marker",
    cursive;

  font-size: 15px;

}


/* =====================================
   KAOS
===================================== */

.old-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  margin: 20px 0;

}


.old-buttons button,
.old-button {

  padding:
    10px 15px;

  color: black;

  background: #ccc;

  border:
    3px outset white;

  cursor: pointer;

  font-family:
    "VT323",
    monospace;

  font-size: 20px;

}


.old-buttons button:hover,
.old-button:hover {

  border-style: inset;

  color: white;

  background: var(--red);

}


.terminal {

  min-height: 75px;

  padding: 15px;

  background: #000;

  border:
    2px inset #777;

  color: var(--green);

  font-size: 20px;

  box-shadow:
    inset 0 0 20px rgba(0,255,65,.08);

}


.cursor {

  animation:
    blink .8s steps(1) infinite;

}


/* =====================================
   ERROR DONACIJA
===================================== */

.fake-error {

  max-width: 500px;

  margin:
    20px auto;

  padding: 20px;

  text-align: center;

  color: var(--red);

  background: #050000;

  border:
    2px solid var(--red);

  font-family:
    "Press Start 2P",
    monospace;

  font-size: 11px;

  line-height: 2;

}


/* =====================================
   GUESTBOOK
===================================== */

.guestbook {

  margin: 20px 0;

  border:
    1px solid #555;

  background: #080808;

}


.guestbook div {

  padding: 8px;

  border-bottom:
    1px dotted #555;

}


.guestbook div:nth-child(even) {

  background: #111;

}


/* =====================================
   LINKOVI
===================================== */

.link-list {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 5px;

  margin: 15px 0;

}


.link-list a {

  padding: 10px;

  border:
    1px dotted var(--yellow);

  text-decoration: none;

}


.under-construction {

  margin-top: 20px;

  padding: 14px;

  text-align: center;

  color: black;

  background: var(--yellow);

  border:
    3px dashed black;

  font-weight: bold;

}


/* =====================================
   KRAJ
===================================== */

.final-message {

  margin: 15px 0;

  padding:
    35px 15px;

  text-align: center;

  border:
    4px ridge #777;

  background:
    radial-gradient(
      circle,
      #220000,
      #050505 70%
    );

}


.ascii-big {

  margin-bottom: 20px;

  color: var(--green);

  font-size: 16px;

}


.final-message h2 {

  color: white;

}


.final-message h2 span {

  color: var(--red);

}


/* =====================================
   FOOTER
===================================== */

footer {

  width:
    min(1100px, 94vw);

  margin:
    20px auto;

  padding: 15px;

  display: flex;

  justify-content: space-between;

  gap: 10px;

  flex-wrap: wrap;

  color: #777;

  border-top:
    2px dotted #444;

  font-size: 14px;

  text-align: center;

}


/* =====================================
   MOBITEL
===================================== */

@media (max-width: 850px) {

  .layout {

    grid-template-columns: 1fr;

  }


  .sidebar {

    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 8px;

  }


  .sidebar .box {

    margin: 0;

  }


  .sticker {

    display: none;

  }


  .pack-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media (max-width: 560px) {

  body {

    font-size: 17px;

  }


  .masthead {

    gap: 5px;

  }


  .mini-skull {

    display: none;

  }


  .subtitle {

    font-size: 15px;

  }


  .layout {

    width: 96vw;

  }


  .sidebar {

    grid-template-columns: 1fr;

  }


  .hero-old {

    padding: 7px;

  }


  .banner {

    aspect-ratio:
      1.5 / 1;

    object-fit: cover;

  }


  .pack-grid {

    grid-template-columns: 1fr;

  }


  .link-list {

    grid-template-columns: 1fr;

  }


  .retro-section {

    padding: 15px;

  }


  .donate-button {

    max-width: 100%;

    font-size: 10px;

  }


  footer {

    flex-direction: column;

  }

}


/* =====================================
   TAJNI MAKSIMALNI KAOS
===================================== */

body.maximum-chaos {

  animation:
    chaosShake .15s infinite alternate;

}


body.maximum-chaos .hero-title {

  animation:
    chaosColors .35s infinite;

}


@keyframes chaosShake {

  from {

    transform:
      translateX(-1px)
      rotate(-.1deg);

  }

  to {

    transform:
      translateX(1px)
      rotate(.1deg);

  }

}


@keyframes chaosColors {

  0% {
    color: #ff1e1e;
  }

  50% {
    color: #ffe600;
  }

  100% {
    color: #00ff41;
  }

}