/* style.css – Flexoki Dark */
:root {
  --fg:   #e0e0f0;
  --bg:   #171616;
  --accent: #AB8206;
  --shadow: rgba(0,0,0,.5);
}

body {
  margin:0;
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  background-color:var(--bg);
  color:var(--fg);
}

h1{
  font-size:4rem;
  margin:0;
  padding:0;
  letter-spacing:.1em;
  animation:glow 2s infinite alternate;
}
@keyframes glow{
  0%  { text-shadow:0 0 10px var(--accent),0 0 20px var(--accent),0 0 30px var(--accent); }
  100%{ text-shadow:0 0 20px var(--accent),0 0 40px var(--accent),0 0 60px var(--accent); }
}

img{
  max-width:80%; height:auto;
  border:5px solid var(--accent);
  border-radius:12px;
  box-shadow:0 10px 20px var(--shadow);
  animation:spin 10s linear infinite;
}

.top-bar{
  width:100%; padding:1rem 2rem;
  background:var(--bg);
  color:var(--fg);
  display:flex; justify-content:space-between;
  align-items:center; position:fixed; top:0; left:0; z-index:10;
}