@font-face{
    font-family: "basic-font";
    src: url("aspaceblack.otf") format("opentype");

}
@font-face{
    font-family: "ithornet";
    src: url("ithornet.ttf") format("truetype");
}
@font-face{
    font-family: "bourbon";
    src: url("bourbon.ttf") format("truetype");
}
@font-face{
    font-family: "invader";
    src: url("INVADER.TTF") format("truetype");
}

body {
  background-image: url(bg-gif.gif);
  background-repeat: repeat;       
  background-position: top left;   
  background-attachment: fixed;     
  background-size: auto;         
  margin: 0;
  text-align: center;
  overflow-x: hidden;       
  padding-top: 80px;
  cursor: url("nat924.cur"), pointer;
}

h1{
    color: white;
    font-family: "invader";
    text-align: center;
    font-size: 3em;       
    letter-spacing: 5px;    
    transform: scaleX(1.5); 
}
h2{
    color: white;
  font-family: "ithornet";
}
h3{
    color: white;
    font-family: "bourbon";
    font-size: 3em;
    }
p{
    color:white;
    font-family: "basic-font";
}

.gallery{
  display: inline-block;
  margin: 15px;
}
.gallery:hover{
}

.navbar {
    background-color: rgba(1, 1, 0, 1);
    display: flex;
    justify-content: space-between; 
    align-items: stretch;           
    height: 80px;            
    margin: 0;
    padding: 0;
    position: fixed;  
    top: 0;        
    left: 0;       
    width: 100%;   
    z-index: 1000; 
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  flex: 1;                       
}

.navbar li {
  flex: 1;                        
}

.navbar a {
    display: block;            
    width: 100%;               
    height: 100%;                 
    text-align: center;           
    line-height: 80px;              
    color: #fff;
    text-decoration: none;
    font-family: bourbon;
    font-size: 2em;
    letter-spacing: 3px;
    transition: background 0.5s ease;
}

.navbar a:hover {
  background: linear-gradient(
    270deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet,
    red
  );
  background-size: 400% 400%;
  animation: rainbowShift 5s linear infinite;
  color: black;
}

@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body, .navbar, .navbar a {
  cursor: url("nat924.cur"), pointer;
}


footer {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 20px;
    text-align: center;
}


.star {
    position: fixed;
    pointer-events: none;
    font-size: 20px;
    opacity: 1;
    animation:
        fallSpin 1.8s linear forwards,
        glowShift 2s linear infinite;
    color: red;
    text-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 40px currentColor,
        0 0 80px currentColor;
    will-change: transform, opacity;
    transform-origin: center;
}


@keyframes glowShift {
    0%   { color: red; }
    14%  { color: orange; }
    28%  { color: yellow; }
    42%  { color: green; }
    57%  { color: cyan; }
    71%  { color: blue; }
    85%  { color: purple; }
    100% { color: red; }
}
@keyframes fall {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(100vh) scale(0.4); opacity: 0; }
}

/* Burst particles (click burst) */
.particle {
    position: fixed;
    pointer-events: none;
    font-size: 14px;
    opacity: 1;

    /* same neon rainbow glow animation as stars */
    animation:
        burst 0.8s ease-out forwards,
        glowShift 2s linear infinite;

    color: red;
    text-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 40px currentColor,
        0 0 80px currentColor;
}

/* --- STARS (cursor-following) --- */
.star {
  position: fixed;
  pointer-events: none;
  font-size: 20px;
  opacity: 1;
  animation:
    fall 1.8s linear forwards,
    spin 1.8s linear forwards,
    glowShift 2s linear infinite;
  color: red;
  text-shadow:
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor,
    0 0 80px currentColor;
  will-change: transform, opacity;
  transform-origin: center;
}

/* --- PARTICLES (click burst) --- */
.particle {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  opacity: 1;
  animation:
    burst 0.8s cubic-bezier(.2,.8,.2,1) forwards,
    glowShift 2s linear infinite;
  color: red;
  text-shadow:
    0 0 8px currentColor,
    0 0 16px currentColor,
    0 0 32px currentColor;
  will-change: transform, opacity;
  transform-origin: center;
}

/* color cycle used by both */
@keyframes glowShift {
  0%   { color: red; }
  14%  { color: orange; }
  28%  { color: yellow; }
  42%  { color: green; }
  57%  { color: cyan; }
  71%  { color: blue; }
  85%  { color: purple; }
  100% { color: red; }
}

/* falling star animation */
@keyframes fall {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(100vh) scale(0.4); opacity: 0; }
}

/* spin used by stars */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* burst animation — uses CSS vars --dx/--dy */
@keyframes burst {
  0% {
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx), var(--dy), 0) scale(0.25);
    opacity: 0;
  }
}


.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}