@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@property --iridescent {
  syntax:       "<number>";
  initial-value: 0;
  inherits:     true;
}
@keyframes flipX {
  0% {transform: scaleX(1);}
  50% {transform: scaleX(-1);}
  100% {transform: scaleX(1);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes wobble {
  0%, 100% {rotate: -5deg;}
  50% {rotate: 5deg;}
}
@keyframes hover {
  0%, 100% {transform: translateY(-5px);}
  50% {transform: translateY(5px);}
}
@keyframes iridescent {
  to { --iridescent: 360; }
}
@keyframes link {
  0% { color: #ff8080; }
  16% { color: #ffff80; }
  33% { color: #80ff80; }
  50% { color: #80ffff; }
  66% { color: #8080ff; }
  83% { color: #ff80ff; }
  100% { color: #ff8080; }
}
:root {
  --cursoridle: url("/Media/Cursor.svg") 0 0, auto;
  --diamondtile: conic-gradient(from 45deg, var(--primary) 25%, var(--secondary) 25% 50%, var(--primary) 50% 75%, var(--secondary) 75%);
  --diagonalstripe: repeating-linear-gradient(45deg, var(--primary), var(--primary) 100px, var(--secondaryfull) 100px, var(--secondaryfull) 200px);
  --iridescent: 0;
}
:root[data-theme="day"] {
  --backgroundimage: url("/Media/BGDay.png");
  --highlight: #ffd700ff;
  --primary: #fff7ccff;
  --secondary: #ffef9980;
  --secondaryfull: #ffef99ff;
  --tertiary: #998000ff;
}
:root[data-theme="night"] {
  --backgroundimage: url("/Media/BGNight.png");
  --highlight: #0080ffff;
  --primary: #0067ccff;
  --secondary: #004d9980;
  --secondaryfull: #004d99ff;
  --tertiary: #99ccffff;
}
* {
  cursor: var(--cursoridle);
  text-decoration: none; 
  box-sizing: border-box;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  color: #fff;
}
html {
  min-height: 100vh;
  font-size: 20px;
}
html, body {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}
a:hover, .holder:hover, .holder:hover .textsub, .sectioncontent svg a:hover .textsub {
  z-index: 99;
  animation: link 3s linear infinite;
}
.pagewrapper {
  margin-top: 33px;
  margin-bottom: 33px;
}
.pagebar, .pagecontent, .pagebarswitch, .pagebarinnards, .switchholder, .switch, .switchlabel, .searchlabel, .sectioncontent, .branchitem, .treetank, .emblem, .emblemdetails, .stat, .container, .holder, .wrapper, .quirk, .type, .navigator {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page, .pagegifted {
  width: 80%;
  height: 100%;
  margin: auto;
}
.page {
  display: flex;
}
.pagegifted {
  display: none;
}
.pagecontent {
  width: 100%;
  background-image: var(--diamondtile);
  background-position: center center;
  background-size: 150px 150px;
  border-radius: 20px 0px 0px 20px;
  border: 1px var(--primary) solid;
  padding: 5px;
  position: relative;
  flex-direction: column;
  backdrop-filter: blur(3px) brightness(1.1);
  gap: 5px
}
.pagebar, .pagebarswitch {
  background-color: var(--secondaryfull);
  border-radius: 0px 20px 20px 0px;
  border: 1px var(--primary) solid;
  border-left: none;
}
.pagebar {
  width: 100px;
  padding: 5px;
  position: relative;
}
.pagebarinnards {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  left: 0;
  right: 0;
}
.pagebarswitch {
  width: 40px;
  height: 40px;
  position: absolute;
}
.pagebarswitch svg {
  z-index: 2;
  height: 30px;
  width: 30px;
  fill: var(--tertiary);
  left: -1px;
}
.switchholder{
  position: relative;
  background-color: var(--primary);
  border-radius: 50%;
  border: 1px var(--primary) solid;
  width: 80px;
  height: 80px;
}
.switchholder:hover .switchlabel{
  display: block;
}
.switchlabel {
  z-index: 1;
  position: absolute;
  display: none;
  width: 300px;
  top: 50%;
  right: calc(100% + 15px);
  transform: translateY(-50%);
  background-color: var(--tertiary);
  border: 1px solid var(--tertiary);
  border-radius: 15px;
  padding: 5px;
}
.switch {
  transform-origin: center center;
  height: 80%;
  width: 80%;
  z-index: 8;
}
.switch svg {
  transform-origin: center;
  fill: var(--tertiary);
  stroke: var(--primary);
  stroke-width: 0.333px;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
  overflow: visible;
}
.searchwrapper {
  display: flex;
  position: relative;
}
.search {
  background-color: var(--tertiary);
  border-radius: 0px 99px 99px 0px;
  border: 1px var(--tertiary) solid;
  width: 200px;
  height: 78px;
  color: #ffffff;
  font-size: 20px;
  font-family: "Ubuntu", sans-serif;
}
.searchlabel {
  z-index: 10;
  position: absolute;
  width: 200px;
  top: calc(100% + 5px);
  transform: translateX(82px);
  background-color: var(--tertiary);
  border: 1px solid var(--tertiary);
  border-radius: 15px;
  padding: 5px;
  flex-direction: column;
  gap: 5px;
  z-index: 9;
}
.searchlabelitem {
  border-radius: 10px;
  width: 100%;
  color: #fff;
}
.searchwrapper.open {
  z-index: 9;
}
.sectionheader {
  width: 100%;
  border-radius: 15px;
  background-color: var(--secondaryfull);
  border: 1px solid var(--secondaryfull);
  padding: 5px 0px 5px 0px;
}
.sectioncontent {
  background-image: var(--diagonalstripe);
  background-position: center center;
  border-radius: 0px 0px 15px 15px;
  border: 1px solid var(--secondaryfull);
  border-top: none;
  margin-top: -5px;
  padding: 5px;
  width: 90%;
  flex-direction: column;
  gap: 5px;
}
.textbig {
  font-weight: bold;
  font-size: 30px;
}
.textsub {
  font-size: 15px;
  color: #ffffff80;
  font-style: italic;
}
.emblem {
  height: 250px;
  aspect-ratio: 1/1;
}
.emblemdetails {
  gap: 5px;
}
.stat {
  border-radius: 50%;
  aspect-ratio: 1/1;
  height: 70px;
  border: 1px solid var(--secondaryfull);
  font-weight: bold;
  font-size: 30px;
}
.container {
  display: inline-block;
  width: 100%;
  border-radius: 99px;
  border: 1px solid var(--secondaryfull);
  padding: 5px;
  border-radius: 10px;
  gap: 5px;
}
.holder {
  flex-direction: column;
}
.holder img {
  height: 70px;
}
.quirk, .type {
  width: 100%;
  padding: 5px;
  border-radius: 10px;
}
.quirk a, .type a {
  flex: 1;
}
.sortcontrols {
  gap: 5px
}
@import url("magic.css");