.navbar {
  background-color: #2b2b2b;      /* dark background */
  border: 4px solid #6a5acd;      /* main bright pixel border */
  box-shadow: 0 0 0 2px #312d31;  /* extra outline for pixel effect */
  border-radius: 0;               /* sharp corners */
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  background-color: #2b2b2b;
  border: 4px solid #6a5acd;
  box-shadow: 0 0 0 2px #312d31;
  border-radius: 0;
  z-index: 100;
}

.funbutton {
  display: inline-block;
  padding: 12px 24px;
  background-color: #6a5acd;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 4px #4b3d9a;
  position: relative;
  cursor: pointer;
  transition: background-color 0.1s ease;
  user-select: none;
}

.funbutton.bounce {
  animation: press 0.25s ease;
}

@keyframes press {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

.spark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
  animation: fly 0.5s ease-out forwards;
}

@keyframes fly {
  to {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
}

body {
  margin: 0;
  padding-top: 80px; /* adjust to your navbar height */
}

.navbar-nav .nav-link {
  color: white !important;
  font-size: 1rem;    /* adjust size for links */ 
}

.navbar-brand {
  color: white !important;
}

.navbar, .navbar-brand, .navbar-nav .nav-link {
    font-family: monospace;
}

.bottom-right-img {
  position: fixed;   /* stays in place when scrolling */
  bottom: 2px;      /* distance from bottom */
  right: 10px;       /* distance from right */
  width: 170px;      /* adjust size */
  height: auto;      /* keep aspect ratio */
  z-index: 1000;     /* keep it on top of other elements */
}

.main-content {
  width: 80vw;
  max-width: 62vw;
  margin: 2vh auto;
  padding: 4vh 3vw;
  background-color: rgba(43, 43, 43, 0.95);
  color: white;
  border: 5px solid #2b2b2b;
  box-shadow: 0 0 0 4px #6a5acd;
  min-height: 86vh;
   position: relative;
    /* 👇 new lines */
  max-height: 86vh;     /* keeps the box from getting taller than screen */
  overflow-y: auto;     /* enables inner scrolling */
  overflow-x: hidden;   /* optional: hide horizontal scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */

}

.main-text {
  font-family: charcoal;
  font-size: 1.2rem;                
  line-height: 1.5;                      
  color: white;                           
}

h1 {
  border-bottom: 5px solid #6a5acd; /* thick retro line */
  padding-bottom: 10px;
  margin-bottom: 20px;
  color: #fff;
}

.coolbutton {
  display: inline-block;      /* needed for padding */
  padding: 12px 24px;
  background-color: #6a5acd;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  transition: all 0.1s ease;
  box-shadow: 0 4px #4b3d9a; /* depth */
  position: relative;         /* allows top shift */
}

.coolbutton:active {
  top: 4px;                    /* moves down */
  box-shadow: 0 0 #4b3d9a;     /* shadow “disappears” */
  background-color: #5942a3;   /* darker for pressed look */
}

.panel {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #dcdcdc;           /* light gray “screen” color */
  border: 6px solid #555;        /* dark gray frame */
  border-radius: 12px;
  box-shadow: inset -4px -4px 0 #aaa, inset 4px 4px 0 #fff; /* retro bevel */
  gap: 15px;      
}

.led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4b3d9a;             /* LED color */
  box-shadow: 0 0 10px #4b3d9a;    /* glow effect */     
  animation: ledPulse 1.8s infinite alternate ease-in-out;
}

@keyframes ledPulse {
  from {
    opacity: 0.6;
    box-shadow: 0 0 4px #4b3d9a;
  }
  to {
    opacity: 1;
    box-shadow: 0 0 12px #4b3d9a;
  }
}

.infobar {
  display: flex;
  align-items: center;
  gap: 3vw;                      /* space between the text blocks */
  padding: 12px 20px;
  background: #dcdcdc;
  border: 6px solid #555;
  border-radius: 12px;
  box-shadow: inset -4px -4px 0 #aaa, inset 4px 4px 0 #fff;
  width: calc(100% - 2vw);       /* stays full-width minus the left gap */
  margin: 0.8vw 0 1vw 1vw;     /* 2vw left offset */
  font-family: 'MS Sans Serif', sans-serif;
  font-size: 1.1rem;
  box-sizing: border-box;         /* includes border + padding in width */
}

/* Each info block */
.info-item p {
  margin: 0;
  color: #333;
  text-shadow: 0 1px 0 #fff;
}

.links-column {
  display: flex;
  flex-direction: column;   /* stack links under the heading */
  align-items: flex-start;  /* align links to left of column */
  gap: 0.3rem;              /* small gap between links */
}

/* === Picture Section Below === */
.infopics {
  display: flex;
  gap: 3vw;
  margin-bottom: 1.2vw;
}

.coollink {
  color: #6a5acd;               /* your purple color */
  text-decoration: none;        /* remove default underline */
  font-weight: bold;
  cursor: pointer;              /* show the hand cursor */
  transition: 0.2s;
}

.coollink:hover {
  text-decoration: underline;   /* show underline on hover */
  color: #483d8b;               /* slightly darker purple on hover */
}

.coolbutton:focus {
  outline: none;
}

.main-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.gif1 {
  position: fixed;
  top: 0.8vh;
  left: 66vw;
  width: 10vw;
  max-height: 8vh;
  z-index: 200;
}

.gif2 {
  position: fixed;
  top: 92vh;
  right: 20vw;
  width: 10vw;
  z-index: 200;
}

.gif3 {
  position: fixed;
  top: 0vh;
  left: 2vw;
  width: 4vw;
  z-index: 200;
}

.gif4 {
  position: fixed;
  top: 1.3vh;
  right: 2vw;
  width: 5vw;
  z-index: 200;
}

.gif5 {
  position: absolute;
  top: 18vh;
  left: 10vw;
  width: 5vw;
}

.gif6 {
  position: absolute;
  top: 1vh;
  left: 22vw;
  width: 5vw;
   z-index: 200;
}

.gif7 {
  position: fixed;
  bottom: 0;
  left: 1vw;
  width: 15vw;
}

.gif8 {
  position: absolute;
  top: 12vh;
  left: 65vw;
  width: 10vw;
}

.gif10 {
  position: absolute;
  top: 11vh;
  left: 79.5vw;
  width: 1vw;
}

.flipped-horizontal {
  transform: scaleX(-1);
}