body{
  margin:0;
  font-family:'Press Start 2P', monospace;
  background:#f0e6d2;
  color:black;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  overflow:hidden;
  image-rendering:pixelated;
}

/* Background floating pixel particles */
.float-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 6px);
  animation: subtleMove 14s infinite linear;
  opacity:0.25;
}

@keyframes subtleMove {
  0%{transform:translate(0,0);}
  100%{transform:translate(20px, 20px);}
}

/* Panel */
.panel{
  text-align:center;
  padding:20px 30px;
  z-index:10;
}

.logo{
  width:150px;
  margin-bottom:22px;
  animation: float 3.5s ease-in-out infinite;
  image-rendering:pixelated;
}

@keyframes float {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.brand{
  color:#0077ff;
}

.dot{
  color:red;
}

.pixel-text{
  font-size:14px;
  letter-spacing:1px;
}

h1,h2{
  margin:12px 0;
  line-height:1.6;
}

/* Fade in animation */
.fade-in{
  animation: fadeIn 1.4s ease forwards;
  opacity:0;
}

@keyframes fadeIn {
  to{ opacity:1; }
}

/* Subtle fade for subtext */
.subtle-fade{
  animation: fadeLater 3s ease forwards;
  opacity:0;
}

@keyframes fadeLater {
  0%{opacity:0;}
  40%{opacity:0;}
  100%{opacity:1;}
}

.navbar {
    position: absolute;
    top: 15px;
    right: 20px;
}

.navbar a {
            background: #fff8d4;
            padding: 8px 14px;
            border-radius: 6px;
            margin-left: 8px;
            font-size: 12px;
            text-decoration: none;
            color: black;
}

.navbar a:hover {
    background: #eee0b6;
}