:root {
    --main-bg: #000000;
    --text-color: #ffffff;
    --link-color: #0000ff;
    --link-visited: #800080;
    --accent: #a600a6;
    --font-family: Courier New;
    --block-bg: #0e001f;
}

body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family: var(--font-family);
    display: grid;
    overflow-x: hidden;
    position: relative;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    margin: 0 auto;
}

.main-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    margin: 0 auto;
    padding: 1.5rem;
}

button {
    background-color: var(--accent);
    color: var(--text-color);
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: var(--font-family);
}

button:hover {
    background-color: #ff00ff;
}


header {
    text-align: center;
    padding: 1rem;
}

header button {
    min-width: 100px;
    background-color: transparent;
    border-radius: 10%;
    border: 4px ridge var(--accent);
}

.blog-entry {
    background-color: var(--block-bg);
    border: 4px ridge var(--accent);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.blog-entry p {
    margin: 15px;
    line-height: 1.5;
}

.blog-entry img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.blog-entry h2 {
    margin-top: 0;
    color: var(--accent);
    font-size: 1.5rem;
}

.blog-entry .post-info {
    display: flex;
    min-height: 2.5rem;
    border-bottom: 1px solid var(--accent);
    justify-content: space-between;
    font-size: 0.9rem;
    color: #aaa;
}

.sacred-knowledge {
    color: var(--accent);
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    font-size: 1.5rem;
    overflow-x: auto;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.sacred-knowledge div {
    border: 2px solid var(--accent);
    color: #fff;
    font-size: 0.9rem;
    padding: 1.5rem;
    margin: 0.5rem;
}

.sacred-knowledge p {
    font-size: 0.9rem;
    color: #fff;
}

.sacred-knowledge img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.stars span {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  border-radius: 50%;
  animation: flicker ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

/* Layer 1 */
.stars span:nth-child(1) {
  box-shadow:
    10vw 20vh hsl(340, 100%, 70%),
    30vw 80vh hsl(190, 100%, 65%),
    50vw 10vh hsl(60, 100%, 75%),
    70vw 60vh hsl(280, 100%, 70%),
    90vw 40vh hsl(120, 100%, 65%),
    15vw 90vh hsl(20, 100%, 70%),
    85vw 15vh hsl(200, 100%, 75%),
    40vw 50vh hsl(320, 100%, 65%),
    60vw 30vh hsl(160, 100%, 70%),
    25vw 65vh hsl(45, 100%, 75%),
    5vw 45vh hsl(260, 100%, 70%),
    95vw 25vh hsl(0, 100%, 70%),
    35vw 5vh hsl(220, 100%, 75%),
    65vw 95vh hsl(100, 100%, 65%),
    80vw 55vh hsl(300, 100%, 70%);
  animation-duration: 2.5s;
  animation-delay: 0s;
}

/* Layer 2 */
.stars span:nth-child(2) {
  box-shadow:
    5vw 5vh hsl(210, 100%, 70%),
    95vw 95vh hsl(30, 100%, 70%),
    45vw 25vh hsl(150, 100%, 65%),
    75vw 75vh hsl(350, 100%, 70%),
    20vw 40vh hsl(80, 100%, 70%),
    55vw 85vh hsl(270, 100%, 70%),
    12vw 60vh hsl(10, 100%, 70%),
    88vw 70vh hsl(240, 100%, 75%),
    32vw 15vh hsl(130, 100%, 65%),
    68vw 45vh hsl(310, 100%, 70%),
    42vw 95vh hsl(50, 100%, 75%),
    78vw 10vh hsl(180, 100%, 70%),
    8vw 85vh hsl(290, 100%, 70%),
    92vw 55vh hsl(70, 100%, 70%),
    58vw 65vh hsl(330, 100%, 70%);
  animation-duration: 4s;
  animation-delay: 1.2s;
}

/* Layer 3 — extra stars, faster flicker */
.stars span:nth-child(3) {
  box-shadow:
    18vw 30vh hsl(230, 100%, 70%),
    62vw 12vh hsl(15, 100%, 70%),
    38vw 72vh hsl(170, 100%, 65%),
    82vw 38vh hsl(340, 100%, 70%),
    28vw 58vh hsl(95, 100%, 70%),
    72vw 82vh hsl(250, 100%, 70%),
    48vw 8vh hsl(35, 100%, 75%),
    92vw 62vh hsl(195, 100%, 70%),
    14vw 78vh hsl(305, 100%, 70%),
    58vw 22vh hsl(115, 100%, 65%),
    2vw 52vh hsl(355, 100%, 70%),
    76vw 92vh hsl(205, 100%, 75%),
    34vw 42vh hsl(65, 100%, 70%),
    88vw 8vh hsl(285, 100%, 70%),
    22vw 18vh hsl(140, 100%, 65%);
  animation-duration: 1.8s;
  animation-delay: 0.6s;
}

/* Layer 4 — doubles the star count, slower/subtler flicker */
.stars span:nth-child(4) {
  box-shadow:
    44vw 60vh hsl(20, 100%, 70%),
    6vw 22vh hsl(200, 100%, 70%),
    66vw 34vh hsl(320, 100%, 70%),
    26vw 88vh hsl(110, 100%, 65%),
    84vw 48vh hsl(260, 100%, 70%),
    52vw 76vh hsl(40, 100%, 75%),
    16vw 8vh hsl(180, 100%, 70%),
    96vw 82vh hsl(300, 100%, 70%),
    36vw 32vh hsl(80, 100%, 70%),
    74vw 6vh hsl(350, 100%, 70%),
    24vw 48vh hsl(220, 100%, 75%),
    64vw 68vh hsl(10, 100%, 70%),
    4vw 92vh hsl(150, 100%, 65%),
    94vw 18vh hsl(290, 100%, 70%),
    46vw 42vh hsl(60, 100%, 70%);
  animation-duration: 5s;
  animation-delay: 2.4s;
}

footer {
    text-align: center; 
    margin-top: 20px; 
    background-color: var(--block-bg); 
    border-top: 4px ridge var(--accent);
    border-left: 4px ridge var(--accent);
    border-right: 4px ridge #000;
    border-bottom: 4px ridge #000;
    padding: 10px;
}

footer img:hover {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

footer img {
    transform: scale(1.0);
    transition: transform 0.3s ease-in-out;
}

.research-log-widget {
  width: 250px;
  min-height: 352px;
  max-height: 352px;
  background: var(--block-bg);
  border: 4px ridge var(--accent);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: monospace, sans-serif;
  color: #c5c9d6;
  overflow: hidden;
  scrollbar-width: 0;
}

.widget-header {
  background: black;
  padding: 8px 12px;
  border-bottom: 1px solid #2a2e3d;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 6px #00ff88;
}

.widget-header h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 1px;
  color: #8f96a3;
  text-transform: uppercase;
}

.widget-body {
  flex: 1;
  padding: 10px;
  overflow-y:hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-entry {
  background: #181b26;
  border-left: 3px solid #6c5ce7;
  padding: 6px 8px;
  border-radius: 2px;
  font-size: 11px;
  animation: fadeIn 0.4s ease-out;
}

.log-entry.update { border-left-color: #00cec9; }
.log-entry.field { border-left-color: #fdcb6e; }
.log-entry.specimen { border-left-color: #ff7675; }

.log-meta {
  display: flex;
  justify-content: space-between;
  color: #636e72;
  font-size: 9px;
  margin-bottom: 2px;
}

.log-title {
  color: #e1e2e6;
  line-height: 1.3;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}