@media (max-width: 768px) {

/* =========================
   MOBILE STYLES
   ========================= */
body {
  text-align: center;
  font-family: 'Sans', Arial, Helvetica, sans-serif;
  color: var(--text);
}

/* =========================
   LAYOUT
   ========================= */
.main {
  border: 4px double var(--primary);
  width: 100%;
  height: auto;
  margin: auto;
  padding: 10px;
}

.side,
.sidehorizontal
.status,
.mid,
.stamps,
.pet,
.hack,
.support,
.stickers,
.memes,
.therapy,
.shop,
.ethos,
.self-insert,
.moreee,
.welcome,
.update {
  border: 1px solid var(--primary);
  margin-top: 10px;
}

.side {
  width: 96%;
  height: auto;
}

.lower,
.middle,
.status {
  height: auto;
  display: flex;
  justify-content: space-between; /* Spread items evenly */
  flex-wrap: wrap;                /* Wrap on small screens */
  width: 100%;
  margin: 5px auto;
  box-sizing: border-box;         /* Prevent overflow from padding/borders */
  gap: 5px; 
  min-width: 0;                     /* Space between blocks */
}

.lowerblock,
.middleblock,
.statusblock {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 32%;
  min-width: 0; /* ✅ allows shrinking to fit flex container */
}

.mid {
  width: 96%;
  height: 600px;
  margin-left: 10px;
  overflow: auto;
}

.stamps {
  width: 96%;
  height: 66px;
}


.pet { width: 32%; height: 400px; }
.hack { width: 96%; height: 400px; }
.shop { width: 96%; height: 800px; }
.ethos { width: 96%; height: 400px; }
.memes { width: 96%; height: 400px; }
.therapy { width: 96%; height: 400px; }
.stickers { width: 96%; height: 400px; }

.moreee { float: left; width: 96%; height: 66px; margin-left: 10px; }

.welcome {
  float: left;
  margin-left: 10px;
  width: 96%;
  height: 20px;
  font-family: "Mono";
}

.waaa {
  border: 2px double var(--primary);
  width: 96%;
  height: 100px;
  margin: auto;
  padding: 10px;
}

/* =========================
   NAVIGATION
   ========================= */
.nav {
  background: var(--gradient-main);
}

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

#textlist ul {
  margin: 10px;
  padding: 0;
  width: 18%;
  border-radius: 10px;
  text-align: center;
}

#linkslist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 2%; /* optional spacing between items */
}

#linkslist ul {
  margin: 10px;
  padding: 0;
  width: 18%;
  border-radius: 10px;
  text-align: center;
}

#linkslist li a {
  display: block;
  margin-bottom: 5px;
  padding: 5px;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid var(--primary);
  background: var(--gradient-main);
}

#linkslist li a:hover {
  color: var(--text-light);
  background: var(--gradient-hover);
}
.sidehorizontal {
  width: 96%;
  height: 12%;
}

#linkslisthorizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 10px; /* optional spacing between items */
}

#linkslisthorizontal ul {
  margin: 10px;
  padding: 0;
  width: 18%;
  border-radius: 10px;
  text-align: center;
}

#linkslisthorizontal li a {
  display: block;
  margin-bottom: 5px;
  padding: 5px;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid var(--primary);
  background: var(--gradient-main);
}

#linkslisthorizontal li a:hover {
  color: var(--text-light);
  background: var(--gradient-hover);
}
/* =========================
   SPECIAL SECTIONS
   ========================= */
.head {
  margin: auto;
  margin-bottom: 3px;
  padding: 3px;
  font-size: 18px;
  font-family: 'Mono';
  color: var(--text-light);
  border: 1px solid var(--primary);
  border-radius: 5px;
  -webkit-text-stroke: 2px var(--primary);
  filter: drop-shadow(0 0 1px var(--text-light)) drop-shadow(1px 1px 0.1px var(--primary-dark));
}

.headlower,
.headstatus,
.headstack {
  width: 100%;           /* Full width of the block */
  margin: 5px 0 10px 0;  /* Top/bottom spacing */
  text-align: center;
  font-size: 18px;
  font-family: 'Mono';
  color: var(--text-light);
  border: 1px solid var(--primary);
  border-radius: 5px;
  -webkit-text-stroke: 2px var(--primary);
  filter: drop-shadow(0 0 1px var(--text-light)) drop-shadow(1px 1px 0.1px var(--primary-dark));
}

.inner,
.yay,
.inner, {
  width: 96%;
  height: 600px;
  margin-left: 10px;
  overflow: auto;
}

.support, .self-insert, .update {
  height: 300px;
  padding: 0.1em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
#statuscafe,
#support,
#self-insert,
#update,
#visitors,
#metrics,
#stickers,
#memes,
#rizz,
#lore,
#memes,
#shop,
#therapy {
  height: 300px;
  padding: 0.1em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
  width: 96%;
  box-sizing: border-box;
  margin: 0;
  min-width: 0; /* ✅ prevents forcing parent wider */
}



#hacking {
  width: 92%;
  height: 76%;
  margin: auto;
  margin-top: 10px;
  padding: .5em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
}


#lore {
  width: 92%;
  height: 76%;
  margin: auto;
  margin-top: 2%;
  padding: .5em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
}

#shop {
  width: 92%;
  height: 88%;
  margin: auto;
  margin-top: 2%;
  padding: .5em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
}

#ethos {
  width: 92%;
  height: 76%;
  margin: auto;
  margin-top: 2%;
  padding: .5em; 
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
}


/* =========================
   MISC
   ========================= */
hr {
  border: 1px solid var(--primary);
}

/* Style the tab */
 .tab {
  overflow: hidden;
  
}

/* Style the buttons that are used to open the tab content */
.tab button {
  margin: auto;
  margin-bottom: 3px;
  margin-top: 5px;
  padding: 3px;
  font-size: 22px;
  font-family: 'Mono';
  color: var(--text-light);
  border: 1px solid var(--primary);
  border-radius: 5px;
  -webkit-text-stroke: 2px var(--primary);
  filter: drop-shadow(0 0 1px var(--text-light)) drop-shadow(1px 1px 0.1px var(--primary-dark));
}

/* Change background color of buttons on hover */
.tab button:hover {
}

/* Create an active/current tablink class */
.tab button.active {
}

/* Style the tab content */
.tabcontent {
  margin: auto;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
    margin-bottom: 10px;
  padding: .5em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
  }

/*KOBA'S INFINITE CUSTOM MARQUEE */    

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

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

.scroll-r2l {
  animation: scroll-r2l 25s linear infinite;
}

.scroll-l2r {
  animation: scroll-l2r 25s linear infinite;
}

.marquee {
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
}

.marquee-items {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
}

.marquee-items > * {
  margin-right: 8px;
}
}