/* Style: Default */

/* Basis: Light theme */
 :root {
  --test-red-color: #f00;
  --bg-color: white;
  --bg-color-dark: #0b0b0b;
  --content-color: black;
  --content-color-dark: white;

  --using-bg-color: var(--bg-color);
  --using-content-color: var(--content-color);
  --WIPSCROLL-opacity: 0.075;
  
  --cat-secondary-col: #aaa;
  --cat-secondary-col-a: #888;
  --cat-secondary-col-hover: #555;
  
  --cat-faded-col: #777;
  --cat-faded-col-dark: #bbb;
  
  --footer-offset: 96px;
  
  --container-xl: 1192px;
  --container-lg: 992px;
  --container-md: 768px;
  --container-sm: 576px; /* Any size under this is smaller */
}

/* Dark theme */
.dark {
  --using-bg-color: var(--bg-color-dark);
  --using-content-color: var(--content-color-dark);
  --WIPSCROLL-opacity: 1;
}

@media screen and (max-width: 768px),
  screen and (max-height: 576px) {
  :root {
    --footer-offset: 70px;
  }
}

.cat-before-load, .cat-before-load *:not(.cat-load-exception) {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background-color: var(--using-bg-color);
  color: var(--using-content-color);
  font-family: Terminus, monospace;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Animations */
@keyframes infiniscroll-wipscroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-5738px, 0, 0);
  }
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0101010f;
}
 
::-webkit-scrollbar-thumb {
  border-radius: 50rem;
  background: #8888886f;
  transition: background 0.2s ease, opacity 0.2s ease;
  
}

::-webkit-scrollbar-thumb:hover {
  background: #5555558f;
}

::webkit-scrollbar-corner {
  visibility: hidden;
}

/*
Class styles
*/
.cat-no-interact {
  pointer-events: none;
  user-select: none;
}

.cat-whiskers::before {
  content: '\227D';
}

.cat-whiskers::after {
  content: '\227C';
}

.caticle-body {
  display: block;
  margin: 0 auto;
  max-width: var(--container-xl);
  padding: 0 1rem 0 1rem;
}

.caticle-body-p {
  padding: 0 1rem 0 1rem;
}

@media screen and (min-width: 768px) {
  .caticle-body {
    padding: 0 8rem 0 8rem;
  }
  
  .caticle-body-p {
    padding: 0 8rem 0 8rem;
  }
}

/* Colors */
.cat-secondary {
  color: var(--cat-secondary-col, #aaa);
}

.cat-faded {
  color: var(--cat-faded-col, #777);
}

.dark .cat-faded {
  color: var(--cat-faded-col-dark, #bbb);
}

a.cat-secondary, .cat-secondary a {
  color: var(--cat-secondary-col-a, #888);
}

a:hover.cat-secondary, .cat-secondary a:hover {
  color: var(--cat-secondary-col-hover, #555);
}

/* Display */
.cat-block {
  display: block;
}

.cat-grid {
  display: grid;
}

.cat-flex {
  display: flex;
}

.cat-flex-row {
  flex-direction: row;
}

.cat-flex-row-rev {
  flex-direction: row-reverse;
}

.cat-flex-column {
  flex-direction: column;
}

.cat-flex-column-rev {
  flex-direction: column-reverse;
}

.cat-flex-wrap {
  flex-wrap: wrap;
}

.cat-flex-nowrap {
  flex-wrap: nowrap;
}

.cat-align-content-center {
  align-content: center;
}

.cat-align-self-center {
  align-self: center;
}

.cat-align-self-end {
  align-self: end;
}

.cat-fixed {
  position: fixed;
}

.cat-relative {
  position: relative;
}

.cat-absolute {
  position: absolute;
}

/* Type-dependent centering */
div.cat-center, p.cat-center,
h1.cat-center, h2.cat-center, 
h3.cat-center, h4.cat-center, 
a.cat-center, b.cat-center, 
i.cat-center, li.cat-center, 
ul.cat-center, span.cat-center, 
button.cat-center, img.cat-center, 
canvas.cat-center, footer.cat-center {
  text-align: center;
}

div.cat-block.cat-center, img.cat-block.cat-center, canvas.cat-block.cat-center, footer.cat-block.cat-center {
  margin: 0 auto;
}

/* Tooltip container */
.cat-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

/* Tooltip text */
.cat-tooltip .cat-tooltip-context {
	visibility: hidden;
	opacity: 0;
	width: auto;
	max-width: min(100vw - 64px, 704px);
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 5px;
	border-radius: 6px;
	border-color: #333333;
	border-width: 2px;
	border-style: solid;
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-bottom: 8px;
	z-index: 1338;
	transition: opacity 0.25s ease;
	transform: translateX(-50%);
	overflow-wrap: break-word;
}

.cat-tooltip:hover .cat-tooltip-context {
  visibility: visible;
  opacity: 1
}

@media screen and (max-width: 768px) {
  .cat-tooltip .cat-tooltip-bottom.cat-tooltip-context {
    position: fixed;
    bottom: 2rem;
    top: auto;
    left: 50%;
  }
  .cat-tooltip .cat-tooltip-top.cat-tooltip-context {
    position: fixed;
    top: 2rem;
    bottom: auto;
    left: 50%;
  }
}

/* Dark/Light theme switch class*/
.cat-theme-switch {
  top: 1.5rem;
  left: 1.5rem;
  z-index: 1337;
}

@media screen and (max-width: 768px) {
  .cat-theme-switch {
    top: 1rem;
    left: 1rem;
    transform: scale(0.8);
  }
}

/* End of Dark/Light theme switch class */

.cat-border-secondary {
  border-color: var(--cat-secondary-col);
  border-width: 2px;
  border-style: solid;
}

.cat-rounded-small {
  border-radius: 4px;
}

.cat-rounded-medium {
  border-radius: 16px;
}

.cat-rounded-big {
  border-radius: 32px;
}

/*
Unique ID element styles
*/
/* General SPREAD */
#SPREAD {
   min-height: calc(100vh - var(--footer-offset, 96px));
   position: relative;
}

/* EXP exclusive SPREAD (maintenance lockout version) */
#SPREAD-GRID {
  margin: 0 auto;
  
  min-height: calc(100vh - var(--footer-offset, 96px));
  max-height: calc(100vh - var(--footer-offset, 96px));
  max-width: var(--container-xl);
  
  display: grid;
  grid-template-rows: 60%;
  position: relative;
  
  overflow-x: hidden;
  overflow-y: auto;
}

#EXP_DIAGPORTRAIT {
  width: min(304px, 100%);
  height: min(286px, 100%);
  object-fit: contain;
}

#EXP_DIAGFIELD {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  overflow-y: auto;
  height: 60%;
}

#WIPSCROLL {
  background-image: url("/assets/exp/wipptn02.png");
  background-repeat: repeat-x;
  width: 17217px;
  height: 110px;
  position: absolute;
  bottom: 50%;
  opacity: var(--WIPSCROLL-opacity);
  z-index: -1;
  
  animation: infiniscroll-wipscroll 60s linear infinite;
  transition: opacity 0.5s ease;
}

#WIPSCROLL-WRAPPER {
	width: 100%;
	overflow: hidden;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-height: 576px) and (orientation: landscape) {
  #SPREAD-GRID {
    grid-template-rows: 100%;
    grid-template-columns: repeat(2, 50%);
    padding: 0 8px 0 8px;
    align-items: center;
  }
  
  #EXP_DIAGPORTRAIT {
    align-self: center;
  }
  
  #EXP_DIAGFIELD.caticle-body-p {
    padding: 0 1rem 0 1rem;
  }
}

/* Dark/Light mode toggle button style */

#DARKLIGHT-TOGGLE {
  opacity: 0;
}

#DARKLIGHT-TOGGLE-outln {
	width: 56px;
	height: 38px;
	border-radius: 50rem;
	background: var(--bg-color-dark);
	padding: 3px;
  cursor: pointer;
  transition: background 0.5s ease, margin-left 0.5s ease;
}

.dark #DARKLIGHT-TOGGLE-outln {
  background: var(--bg-color);
}

.dark #DARKLIGHT-TOGGLE-outln:active {
  margin-left: 12px;
}

html:not(.dark) #DARKLIGHT-TOGGLE-outln:active {
  margin-left: -12px;
}

/* Default light mode */
#DARKLIGHT-TOGGLE-switch {
  position: relative;

  pointer-events: none;
  user-select: none;
	width: 42px;
	height: 38px;
	background: var(--using-bg-color);
	border-radius: 50rem;
	margin-left: 14px;
  overflow: hidden;
	transition: margin-left 0.15s ease-out, width 0.15s ease-out, background 0.5s ease;
}

#DARKLIGHT-TOGGLE-outln:hover #DARKLIGHT-TOGGLE-switch {
  width: 46px;
  margin-left: 10px;
}

.dark #DARKLIGHT-TOGGLE-switch {
	margin-left: 0;
}

.dark #DARKLIGHT-TOGGLE-outln:hover #DARKLIGHT-TOGGLE-switch {
  margin-left: 0;
}

#DARKLIGHT-TOGGLE-partsolid {
  background: var(--bg-color-dark);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 10px;
  margin-left: 12px;
  border-color: var(--bg-color);
  border-width: 2px;
  border-style: solid;
  z-index: 2;
  position: relative;
  transition: background 0.5s ease, width 0.5s ease, height 0.5s ease, margin-left 0.15s ease, margin-top 0.15s ease;
}
#DARKLIGHT-TOGGLE-partsunray {
  width: 4px;
  height: 8px;
  position: relative;
  margin-left: 19px;
  margin-top: -13px;
  transition: margin-left 0.15s ease, margin-top 0.15s ease, transform 0.5s ease;
}
#DARKLIGHT-TOGGLE-partsunray * {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-color-dark);
}

#DARKLIGHT-TOGGLE-partsunray div:nth-child(1) {
  left: 0;
  top: -8px;
}
#DARKLIGHT-TOGGLE-partsunray div:nth-child(2) {
  top: 8px;
  left: 0;
}
#DARKLIGHT-TOGGLE-partsunray div:nth-child(3) {
  top: -4px;
  left: 7px;
  transform: rotate(50deg);
}
#DARKLIGHT-TOGGLE-partsunray div:nth-child(4) {
  top: -4px;
  left: -7px;
  transform: rotate(-50deg);
}
#DARKLIGHT-TOGGLE-partsunray div:nth-child(5) {
  top: 4px;
  left: 7px;
  transform: rotate(125deg);
}
#DARKLIGHT-TOGGLE-partsunray div:nth-child(6) {
  top: 4px;
  left: -7px;
  transform: rotate(50deg);
}
.dark #DARKLIGHT-TOGGLE-partsolid {
  background: var(--bg-color);
  width: 16px;
  height: 16px;
  margin-top: 9px;
  margin-left: 10px;
}
html:not(.dark) #DARKLIGHT-TOGGLE-outln:hover #DARKLIGHT-TOGGLE-partsolid {
  margin-left: 16px;
}
html:not(.dark) #DARKLIGHT-TOGGLE-outln:hover #DARKLIGHT-TOGGLE-partsunray {
  margin-left: 23px;
}

#DARKLIGHT-TOGGLE-partclip {
	position: absolute;
	top: 0px;
	left: -8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--using-bg-color);
	transition: background 0.5s ease, top 0.3s ease-out, left 0.3s ease-out;
	z-index: 2;
}

.dark #DARKLIGHT-TOGGLE-partclip {
	top: 5px;
	left: 17px;
}

.dark #DARKLIGHT-TOGGLE-partsunray {
  transform: rotate(145deg);
}

/* Frame containing website updates */
#UPDATES-FRAME {
  min-height: 250px;
}