.{
  overflow-x: hidden;
}
 :root {
  --flex-margin-top: 10vh;
}

body {
  background-color: #242424; /* Pitch black */
  color: #00e009;
  overflow-x: hidden;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 9vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0,0,0,0);
}

.header-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Courier New", Courier, monospace;
  font-size: 3vw; 
  background: transparent; 
  padding: 1vh; 
  white-space: nowrap;
}

.header-text h2 {
  color: #00ff0a;
  letter-spacing: 1.5vw;
  margin: 0; 
  text-align: center;
}


.subheader {
  padding: 1vh; 
  text-align: center; 
  margin-top: 9vh;
  padding-left: 4vw;
  padding-right: 4vw;
}

.subheader h5 {
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0.2vw; 
  margin: 0; 
  font-size: 2.2vw; 
  color: #00ff0a;
  white-space: nowrap;
}


.flex-container {
  display: flex;
  overflow-x: hidden; 
  margin-top: var(--flex-margin-top);
}

.flex-container img {
  flex: 1; 
  width: 35vw; 
  height: auto; 
  margin: 0 5vw; 
}



.text-container {
  margin-top: calc(110vh + var(--flex-margin-top));
  font-family: 'Courier New', Courier, monospace; 
  text-align: left !important; 
}

.text-container h3 {
  font-size: 2vw; 
}

.text-container p {
  font-size: 1.6vw; 
}

.meh li {
  font-size: 1.6vw;
}

.red-text {
  color: red; 
}

.top-left-image {
  position: absolute; 
  top: 3vh;
  left: 4vw;
  width: 5vw; 
  height: 9vh; 
  z-index: 9999;
}

.vertical-list {
  display: none;
  position: fixed;
  width: 15vw;
  height: auto;
  margin-top: -109vh;
  margin-left: 76vw;
  border: 0.1vw dashed blue; 
  background-color: white; 
  padding: 1vh;
  font-size: 1vw;
  font-family: monospace;
  z-index: 100000;
}

a[href="https://x.com/bairs_"],
a[href="https://discord.gg/bairs"] {
    color: #0057FF;
}

a[href="blackpaper.html"] {
    color: #FF0000;
}

a[href="../index.html#mintbairs"] {
    color: #0F50CE;
}

a[href="../index.html#ab"] {
    color: #FF4500;
}


a[href="memes.html"] {
    color: #0F50CE;
}

a[href="aotrt.html"] {
    color: #238700;
}
.vertical-list ul {
  list-style-type: none; 
  padding: 0; 
}

.vertical-list li {
  margin-bottom: 2vh; 
}

.burger-menu {
  display: block; /* Hide the burger menu by default on larger screens */
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000; /* Ensure it's above other content */
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #e7e7e7;
  margin: 5px 0;
  transition: transform 0.3s; /* Add transition for smoother transformation */
}


@media (max-width: 1024px) {
  .top-left-image {
    width: 8vw;
    height: 8vh;
  }
  .meh {
    margin: 0;
    padding-left: 5vw;
  }
  .text-container {
    margin-top: 69vh;
  }
  .subheader {
    margin-top: 5vh;
  }
  .vertical-list {
    margin-top: -65vh;
  }
}

@media (max-width: 412px) {
  .top-left-image {
    width: 7vw;
    height: 4vh;
  }
  .text-container {
    margin-top: 55vh;
  }
  .text-container h3 {
    font-size: 1rem;
  }
  .text-container p {
    font-size: 0.6rem;
  }
  .meh {
    margin: 0;
    padding-left: 5vw;
  }
  .meh li {
    font-size: 0.6rem;
  }
  .flex-container {
    margin-top: 5vh !important;
  }
}

@media (max-width: 430px) {
  .top-left-image {
    width: 9vw;
    height: 6vh;
  }
  .text-container {
    margin-top: 45vh;
  }
  .text-container h3 {
    font-size: 1rem;
  }
  .text-container p {
    font-size: 0.7rem;
  }
  .meh {
    margin: 0;
    padding-left: 5vw;
  }
  .meh li {
    font-size: 0.7rem;
    padding: 0;
  }
  .vertical-list {
    position: fixed;
    top: 1vh;
    display: none;
    margin-top: 8vh;
    margin-left: 55vw;
    z-index: 100000;
    font-size: 0.7rem;
    width: 40vw;
  }
  .vertical-list li {
    margin-bottom: 2vh;
  }
  .burger-menu {
    display: block;
  }
  .subheader {
    margin-top: 3vh;
  }
}