/* Base */
* {margin:0;padding:0;box-sizing:border-box;}
/* Base */
body, html {
    margin:0;
    padding:0;
    height:115%;
    font-family: 'Orbitron', monospace;
    background: #0a0b0f;
    color: #eee;
    display:flex;
    flex-direction:column;
  }

  @font-face {
    font-family: 'Radiohead';
    src: url('https://lib.pbyte.be/fonts/radiohead/radiohead.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.radiohead-span {
    font-family: 'Radiohead', sans-serif;
    margin-left: 400px;
    font-size: 50px;
    color: white;
    background-color: red;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
}

.oasis {
    height: 75px;
}

.rancilio {
    height: 75px;
    margin-top: 25px;
    margin-left: 350px;
}

.blip {
    height: 75px;
    margin-top: 25px;
    margin-left: 625px;
    margin-bottom: 500px;
}


/* Stars background */
.bg-stars {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: radial-gradient(ellipse at center, #0a0b0f 0%, #1a1a28 100%);
  overflow:hidden;
  z-index:-1;
}
.star {
  position: absolute;
  width:2px; height:2px;
  background:white;
  border-radius:50%;
  animation: twinkle 4s infinite alternate;
}

main {
    flex:1 0 auto; /* vult de rest van het scherm */
  }

/* Example stars (copy/paste more for density) */
.star:nth-child(1){top:50px; left:100px;}
.star:nth-child(2){top:200px; left:300px;}
.star:nth-child(3){top:400px; left:150px;}
.star:nth-child(4){top:600px; left:500px;}
.star:nth-child(5){top:800px; left:200px;}

@keyframes twinkle {0%{opacity:0.2;}50%{opacity:0.6;}100%{opacity:1;}}

/* Header */
header {
    width:100%;
    flex:0 0 auto;
    text-align:center;
    padding:4vh 1rem;
  }
  
  .glitch-text {
    font-size:12vw;
    color:#E20612;
    text-transform:lowercase;
    letter-spacing:0.5vw;
    text-shadow:0 0 8px #E20612,0 0 16px #020001;
    animation:glitch 1.5s infinite;
    margin:0;
  }
  
.subtext {font-size:1.2vw;color:#aaa;margin-top:0.5rem;}

.glitch-footer {
    font-size:6vw;
    color:#ff6ec7;
    text-transform:uppercase;
    letter-spacing:0.4vw;
    text-shadow:0 0 8px #ff6ec7,0 0 16px #ff9ae0;
    animation:glitch 1.5s infinite;
    margin:0 0 0.5rem 0;
  }
  
  /* Glitch animatie */
  @keyframes glitch {
    0% { text-shadow: 2px 0px 0px #FFFFFF, -2px 0px 0px #020001; }
    25% { text-shadow: -2px -2px 0px #FFFFFF, 2px 2px 0px #020001; }
    50% { text-shadow: 2px 2px 0px #FFFFFF, -2px -2px 0px #020001; }
    75% { text-shadow: -2px 0px 0px #FFFFFF, 2px 0px 0px #020001; }
    100% { text-shadow: 2px -2px 0px #FFFFFF, -2px 2px 0px #020001; }
  }
  
  /* About section */
.about-section {
  max-width:900px;
  margin:5vh auto;
  text-align:left;
}
.about-section h2 {
  font-size:4vw;
  color:#E20612;
  margin-bottom:1rem;
  text-shadow:0 0 8px #E20612;
  animation:pulse 1.8s infinite;
}
.about-section p {
  font-size:1.2vw;
  color:#ccc;
  line-height:1.6;
  margin-bottom:1rem;
}

/* Button */
.btn {
  display:inline-block;
  padding:1rem 2rem;
  font-size:1.1vw;
  color:#0a0b0f;
  background:linear-gradient(135deg,#E20612,#450003);
  border-radius:12px;
  box-shadow:0 0 12px #E20612;
  text-decoration:none;
  transition:all 0.25s ease;
}
.btn:hover {
  transform:scale(1.15) rotate(-1deg);
  box-shadow:0 0 30px #E20612,0 0 45px #E20612;
}

/* Pulse animation */
@keyframes pulse {
  0%{text-shadow:0 0 8px #FFFFFF;}
  50%{text-shadow:0 0 20px #E20612;}
  100%{text-shadow:0 0 8px #FFFFFF;}
}

/* Footer */
footer {
    width:100%;
    flex:0 0 auto;
    text-align:center;
    padding:2rem 1rem;
    height: 50px;
  }


  .floating-menu {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #E20612; /* subtiel, je kan ook transparent doen */
    padding: 10px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    z-index: 999;
    margin-right: 125px;
  }
  
  .floating-menu a {
    text-decoration: underline;
    color: var(--accent);
    font-weight: 600;
    transition: color 0.3s;
  }
  
  .floating-menu a:hover {
    color: var(--accent-light);
    text-decoration: none;
  }