/* =========================
   THEME COLORS
   ========================= */
:root {
  --primary: #e942f5;         /* replaces hotpink */
  --primary-dark: #b32db3;    /* for shadows/borders if needed */
  --text: #cb16ff;            /* keep your original text color or change */
  --text-light: #ffffff;
  --gradient-main: linear-gradient(#cb16ff, #ff7cfb 40%, #ffc0ff);
  --gradient-hover: linear-gradient(#FFC3E3, #FFCCE7 40%, #e942f5);
}

/* =========================
   FONTS
   ========================= */
@font-face {
  font-family: "Mono";
  src: url(/fonts/PixeloidMono.woff);
}

@font-face {
  font-family: "Bold";
  src: url(/fonts/PixeloidSans-Bold.woff);
}

@font-face {
  font-family: "Sans";
  src: url(/fonts/PixeloidSans.woff);
}

/* =========================
   BASE STYLES
   ========================= */
body {
  text-align: center;
  background-image: url("/img/background/tilingspooky.png");
  font-family: 'Sans', Arial, Helvetica, sans-serif;
  color: var(--text);
}

/* =========================
   LAYOUT
   ========================= */
.main {
  border: 4px double var(--primary);
  width: 920px;
  height: 1900px;
  margin: auto;
  padding: 10px;
  background-color: white;
  background-image: url("/img/background/tilingcake.png");
}

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

.side {
  float: right;
  width: 220px;
  height: 600px;
}

.lower,
.middle,
.status {
  margin-top: 10px;
  float: left;
  width: 220px;
  height: 530px;
}

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

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

.pet,
.hack,
.support,
.stickers,
.therapy,
.memes,
.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; }
.therapy { width: 300px; height: 321px; }
.memes { 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: 56px; margin-left: 10px; }

.welcome {
  float: left;
  color: #3a0063;
  margin-left: 10px;
  width: 900px;
  height: 20px;
  font-family: "Mono";
  background: linear-gradient(#cb16ff, #ff7cfb 40%, #ffc0ff);
}

.waaa {
  border: 2px double var(--primary);
  width: 900px;
  height: 300px;
  margin: auto;
  padding: 10px;
  background-image: url("/img/art/Thumbnailpunkcut.png");
  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: #cb16ff;
  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: #cb16ff;
  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,
.headlower {
  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("/img/background/tilinggingham.png");
}

.headstatus,
.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("/img/background/tilinggingham.png");
}

.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: 100px;
  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;
}

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

#memes {
  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: 25px;
  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("/img/background/tilinggingham.png");
}

/* Change background color of buttons on hover */
.tab button:hover {
    color:rgba(158, 5, 209, 0.81);
}

/* Create an active/current tablink class */
.tab button.active {
    olor:rgba(93, 0, 114, 0.77);
}

/* Style the tab content */
.tabcontent {
  margin: auto;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  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;
<<<<<<< HEAD
}
=======
}
>>>>>>> 7168729 (20)