@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap"); /* Edgier title font */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap"); /* Edgier nav font */

:root {
  --color-red: #ec1840;
  --color-purple: #7a18ec;
  --color-text-on-light: rgb(0, 0, 0);
  --color-white-bg: rgb(255, 255, 255);
  --color-black-1-bg: rgb(244, 244, 244);
  --color-black-2-bg: rgb(248, 248, 248);
  --color-black-3-bg: rgb(255, 255, 255);
  --speed-normal: 0.5s;
  --speed-fast: 0.8s;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--color-black-1-bg);
  font-family: "Poppins", sans-serif;
}

.animated-background-container {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, #222, #111, #080808);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.animated-background-content {
    width: 80vmin;
    height: 80vmin;
    position: relative;
    animation: spin 5s linear 0s infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

.animated-background-content > div {
    --line: rgb(204, 68, 68);
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 100%;
    box-sizing: border-box;
    box-shadow: -3vmin 3vmin 3vmin 0 #161616 inset, 1vmin -1vmin 0.125vmin -1.25vmin var(--line);
    background:
        radial-gradient(circle at 36% 64%, #fff0 0 calc(53.5% - 1px), var(--line) 53.5% 54%, #fff0 calc(54% + 1px) 100%),
        radial-gradient(circle at 38% 62%, #fff0 0 calc(54.5% - 1px), var(--line) 54.5% 55%, #fff0 calc(55% + 1px) 100%),
        radial-gradient(circle at 42% 58%, #fff0 0 calc(57.75% - 1px), var(--line) 57.75% 58%, #fff0 calc(58% + 1px) 100%),
        radial-gradient(circle at 40% 60%, #fff0 0 calc(56.75% - 1px), var(--line) 56.75% 57%, #fff0 calc(57% + 1px) 100%),
        radial-gradient(circle at 45% 55%, #fff0 0 calc(61.75% - 1px), var(--line) 61.75% 62%, #fff0 calc(62% + 1px) 100%),
        radial-gradient(circle at 43.5% 56.5%, #fff0 0 calc(59.75% - 1px), var(--line) 59.75% 60%, #fff0 calc(60% + 1px) 100%),
        radial-gradient(circle at 45% 55%, #fff0 0 calc(64.5% - 1px), var(--line) 64.5% 64.75%, #fff0 calc(64.75% + 1px) 100%),
        radial-gradient(circle at 46.5% 53.5%, #fff0 0 calc(65.5% - 1px), var(--line) 65.5% 65.75%, #fff0 calc(65.75% + 1px) 100%),
        radial-gradient(circle at 48.5% 51.5%, #fff0 0 calc(67.75% - 1px), var(--line) 67.75% 68.25%, #fff0 calc(68.25% + 1px) 100%),
        radial-gradient(circle at 49% 51%, #fff0 0 calc(69.5% - 1px), var(--line) 69.5% 70%, #fff0 calc(70% + 1px) 100%);
}

.top-left { left: 11vmin; top: 2vmin; }
.left-bot { bottom: 11vmin; left: 2vmin; transform: rotate(-90deg); }
.bot-right { right: 11vmin; bottom: 2vmin; transform: rotate(-180deg); }
.right-top { right: 2vmin; top: 11vmin; transform: rotate(-270deg); }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Styling for the KHUP.ORG title */
.site-title {
    font-family: 'Metal Mania', cursive; /* Use Metal Mania for edgy look */
    font-size: 4rem; /* Adjust size as needed */
    color: #fff;
    text-shadow:
        0 0 6px var(--color-red),
        0 0 12px var(--color-purple),
        0 0 18px var(--color-red);
    text-align: center;
    margin-bottom: 20px; /* Space below the title */
    letter-spacing: 3px;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 20px; Removed as site-title has margin-bottom */
    flex-wrap: wrap;
}

.nav-links a,
.nav-links a:nth-of-type(2) {
  position: relative;
  width: 150px; /* Reduced width for better fit */
  height: 60px;
  margin: 10px;
  line-height: 60px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

  /* Existing gold theme styles */
  background-color: rgba(255,255,255,0.6);
  color: #333; /* Dark grey for better visibility */
  border: 2px solid #ffd700;
  border-radius: 30px;
  box-shadow: 0 4px 0 #ffd700;
}

.nav-links a:hover,
.nav-links a:nth-of-type(2):hover {
  background-color: rgba(255,255,255,0.8);
  color: #000; /* Black for hover state for more emphasis */
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 0 #ffd700;
}

@keyframes animate {
  0% { background-position: 0 0; }
  100% { background-position: 0 -1080px; } /* This assumes a sprite sheet of 180px width and 1080px total height (60px * 18 frames) */
}