/* =========================
   THEME COLORS
   ========================= */
:root {
  --primary: #77BBFF;         /* replaces hotpink */
  --primary-dark: #04427f;    /* for shadows/borders if needed */
  --text: #00468c;            /* keep your original text color or change */
  --text-light: #ffffff;
  --gradient-main: linear-gradient(rgb(2, 0, 119) 0%, rgb(52, 57, 166) 45%, rgb(140, 182, 255) 47%, rgb(13, 0, 99) 100%);
  --gradient-hover: linear-gradient(180deg,rgb(45, 50, 197) 0%, rgb(181, 228, 255) 45%, rgb(133, 131, 255) 47%, #90adff 60%, rgb(212, 244, 255) 100%);
}

/* =========================
   FONTS
   ========================= */
@font-face {
  font-family: "Mono";
  src: url(/website/fonts/PixelifySans-Medium.ttf);
}

@font-face {
  font-family: "Bold";
  src: url(/website/fonts/PixelifySans-Bold.ttf);
}

@font-face {
  font-family: "Sans";
  src: url(/website/fonts/PixelifySans-Regular.ttf);
}

/* =========================
   BASE 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: 920px;
  height: 1750px;
  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 {
  float: right;
  width: 220px;
  height: 570px;
}

.status {
  margin-top: 10px;
  float: left;
  width: 220px;
  height: 130px;
}

.mid {
  float: left;
  width: 450px;
  height: 530px;
  margin-left: 10px;
  overflow: auto;
}

.stamps {
  float: left;
  width: 680px;
  height: 32px;
}

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

.pet { width: 300px; height: 321px; }
.hack { width: 300px; height: 321px; }
.support { width: 130px; height: 321px; }
.stickers { width: 300px; height: 321px; }
.shop { width: 300px; height: 321px; }
.ethos { width: 280px; height: 321px; }
.self-insert { width: 220px; height: 321px; }
.update { width: 220px; height: 321px; overflow: auto; font-size: 16px; font-family: 'Sans'; }

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

.welcome {
  float: left;
  color: #81f2ff;
  margin-left: 10px;
  width: 900px;
  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: 900px;
  height: 200px;
  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: 200px;
  border-radius: 10px;
  text-align: center;
}

#linkslist ul {
  margin: 10px;
  padding: 0;
  width: 200px;
  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 {
  float: left;
  width: 900px;
  height: 100px;
}

#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: 200px;
  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: 30px;
  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 {
  margin: auto;
  margin-bottom: 3px;
  padding: 3px;
  font-size: 30px;
  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");
}

.headstack {
  margin: auto;
  margin-bottom: 3px;
  margin-top: 5px;
  padding: 3px;
  font-size: 30px;
  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 {
  border: 1px dashed var(--primary);
  background-color: white;
}

#statuscafe {
  width: 160px;
  height: 100px;
  margin: auto;
  margin-top: 10px;
  padding: .5em;
  overflow: auto;
  border-radius: 10px;
}

#statuscafe-username { margin-bottom: .5em; }
#statuscafe-content { margin: 0 1em 0.5em 1em; }

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

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

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

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

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

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

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

#ethos {
  width: 240px;
  height: 240px;
  margin: auto;
  margin-top: 10px;
  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;
}