@media (max-width: 768px) {

/* =========================
   MOBILE STYLES
   ========================= */
body {
  text-align: center;
  background-image: url("/website/img/background/Background.gif");
  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;
  background-color: white;
  background-image: url("/website/img/background/stars\ 6.jpg");
}

.side,
.sidehorizontal
.status,
.mid,
.stamps,
.pet,
.hack,
.support,
.stickers,
.shop,
.ethos,
.self-insert,
.moreee,
.welcome,
.update {
  background-image: url("/website/img/background/repeatingcat.gif");
  border: 1px solid var(--primary);
  margin-top: 10px;
}

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

.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;                      /* Space between blocks */
}

.statusblock {
  flex: 1 1 300px; /* Grow, shrink, minimum width */
  display: flex;
  flex-direction: column; /* Stack header above content */
  box-sizing: border-box;
  max-width: 32%; /* Optional: prevent 3 blocks from exceeding width */
}

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

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

.lower {
  display: flex;
  flex-wrap: wrap;          /* Allow wrapping on small screens */
  justify-content: space-between; /* Spread blocks evenly */
  gap: 10px;                /* Space between blocks */
  width: 100%;
  margin: 10px auto;
  box-sizing: border-box;
  margin-top: 10px;
}

.lowerblock {
  flex: 1 1 calc(32% - 10px); /* Grow, shrink, min width to fit 3 per row */
  display: flex;
  flex-direction: column;   /* Stack header above content */
  box-sizing: border-box;
  min-width: 250px;         /* Ensures responsive wrapping on small screens */
  margin-top: 10px;
}

.support, .self-insert, .update {
  height: 300px;
  padding: 0.1em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}


.pet,
.hack,
/*.support,*/
.stickers,
.shop,
.ethos,
/*.self-insert,*/
/*.update {
  border: 1px double var(--primary);
  float: left;
  margin-left: 10px;
}*/

.pet { width: 32%; height: 400px; }
.hack { width: 96%; height: 400px; }
/*.support { width: 32%; height: 400px; }*/
.stickers { width: 96%; height: 800px; }
.shop { width: 96%; height: 800px; }
.ethos { width: 96%; height: 400px; }
/*.self-insert { width: 58%; height: 400px; }*/
/*.update { width: 32%; height: 400px; overflow: auto; font-size: 16px; font-family: 'Sans'; }*/

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

.welcome {
  float: left;
  color: #81f2ff;
  margin-left: 10px;
  width: 96%;
  height: 20px;
  font-family: "Mono";
  background: linear-gradient(180deg,rgb(28, 0, 105) 0%, rgb(122, 215, 255) 45%, rgb(98, 137, 255) 47%, rgb(21, 0, 253) 60%, rgb(15, 0, 73) 100%);
}

.waaa {
  border: 2px double var(--primary);
  width: 96%;
  height: 6%;
  margin: auto;
  padding: 10px;
  background-image: url("/website/img/background/backgrpunddark.gif");
  background-size: cover;
}

/* =========================
   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;
  color: #ffffff;
  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;
  color: #ffffff;
  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));
  background-image: url("/website/img/background/Background.gif");
}

.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));
  background-image: url("/website/img/background/Background.gif");
}

.inner,
.yay,

#statuscafe,
#visitors,
#metrics {
  height: 300px;
  padding: 0.1em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
  background-color: white;
  width: 100%;           /* Fill the block */
  box-sizing: border-box; /* Include padding/border in width */
  margin: 0;             /* Remove auto margin that caused overflow */
}

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

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

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

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

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

#ethos {
  width: 92%;
  height: 76%;
  margin: auto;
  margin-top: 2%;
  padding: .5em;
  overflow: auto;
  border-radius: 10px;
  border: 1px dashed var(--primary);
  background-color: white;
}
/* =========================
   MISC
   ========================= */
hr {
  border: 1px solid var(--primary);
}

/* Style the tab */
 .tab {
  overflow: hidden;
  border: 0px solid #ccc;

  
}

/* 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));
  background-image: url("/website/img/background/stars.gif");
}

/* Change background color of buttons on hover */
.tab button:hover {
    color:rgba(108, 115, 255, 0.81);
}

/* Create an active/current tablink class */
.tab button.active {
    olor:rgba(117, 126, 255, 0.77);
}

/* 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);
  background-color: white;
  }

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