:root {
  --pos: 1px;
}

body {
    font-family: 'Press Start 2P', sans-serif;
    margin: 0;
    overflow-x: hidden;
  }

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

.basesite {
  background-image: url("aotrtback.webp");
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

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

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

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: calc(var(--pos) * 9);
  transform: translateX(calc(var(--pos) * 20));
  background-color: rgba(0,0,0,0);
}

.header-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--pos) * 4);
  padding: calc(var(--pos));
  white-space: nowrap;
}

.header-text h1 {
  letter-spacing: calc(var(--pos) * 2);
  margin: 0; 
  text-align: center;
}

.header-text h5 {
  overflow-x: hidden;
  letter-spacing: 0.1vw;
  margin: 0; 
  text-align: center;
}

.red { color: #ff0e3a; }
.orange { color: #ffa800; }
.green { color: #46db12; }
.blue { color: #0038ff; }
.lightblue { color: #35def5; }
.purple { color: #ab41ff; }
.pink { color: #ff33ad; }
.yellow { color: #ffe605; }

.subheader {
  display:block;
  background-color: #ff5c00;
  padding: calc(var(--pos) * 1);
  text-align: center; 
  margin-top: calc(var(--pos) * 15);
  padding-left: calc(var(--pos) * 5);
  padding-right: calc(var(--pos) * 5);
  border: 0.5vw dashed #ffff00; 
}

.subheader h5 {
  font-family: 'Comic Sans MS', sans-serif, arial, cursive;
  letter-spacing: 0.2vw; 
  margin: 0; 
  font-size: 1.5vw;
  color: black;
  white-space: nowrap;
}

.vertical-list {
  display: none;
  position: absolute;
  width: calc(var(--pos) * 19);
  height: auto;
  margin-top: calc(var(--pos) * 15);
  margin-left: calc(var(--pos) * 117);
  border: calc(var(--pos) * 0.4) dashed blue; 
  background-color: white; 
  padding: 1vh;
  font-size: calc(var(--pos) * 1.5);
  font-family: monospace;
  z-index: 1000000;
}

.vertical-list.mobile {
  position: absolute;
  margin-left: calc(var(--pos) * 95);
  z-index: 100000;
  font-size: calc(var(--pos) * 3);
  width: calc(var(--pos) * 30) !important;
  font-family: monospace;
  width: calc(var(--pos) * 19);
}

.vertical-list ul {
  list-style-type: none; 
  padding: 0; 
}

.vertical-list li {
  margin-bottom: calc(var(--pos) * 1.6);
}

.image-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Adjust based on your layout needs */
  background-color: #333; /* Example background color */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: absolute;
  margin-left: calc(var(--pos) * 4);
  top: calc(var(--pos) * 60);
  display: grid; 
  grid-template-columns: calc(var(--pos) * 4) calc(var(--pos) * 4) calc(var(--pos) * 4);
  grid-template-rows: calc(var(--pos) * 4) calc(var(--pos) * 4) calc(var(--pos) * 4) calc(var(--pos) * 4);
  gap: calc(var(--pos) * 34) calc(var(--pos) * 55);
  grid-template-areas: 
    ". . ."
    ". central-image ."
    ". central-image ."
    ". . ."; 
  font-size: calc(var(--pos) * 1.4);
  font-family: 'Comic Sans MS', 'Comic Neue', sans-serif, arial, helvetica, cursive;
  color: white;
}

.container img {
  width: calc(var(--pos) * 19);
}

.grey {
  color: #ACACAC;
}
.central-image { 
  grid-area: central-image;
}

.center {
  position: absolute;
  top: calc(var(--pos) * 103);
  left: calc(var(--pos) * 47);
}

.center img {
  width: calc(var(--pos) * 50);
  height: calc(var(--pos) * 50);
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg); /* Starting rotation angle */
  }
  to {
    transform: rotate(-360deg); /* Ending rotation angle (counterclockwise) */
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

@media only screen and (min-width: 360px) {
    .marquee__group span {
        font-size: 3vw;
    }
}

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;
}