@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

/*=========== Theme =====*/
:root {
  --outline-color: #000000;
  --outline-width: 4px;
  --hard-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
  --comic-font: 'Patrick Hand', cursive;
  --neg-shadow: inset 8px 8px 0px rgba(0, 0, 0, 0.2);
}

/*=========== Body =====*/
body {
  --bg-main: #f4f7fb;
  --bg-header: #afc3cf;
  --bg-header-inner: #86aabc;
  --bg-segment: #2f4330;
  --bg-main-area: #afc3cf;
  --bg-app-card: #6d818c;
  --bg-power-outer: #6f808c;
  --bg-power-btn: #4f7b3a;
  --surface-soft: #d1dae1;
  --surface-strong: #5c8d67;
  --surface-muted: #5f6368;
  --text-main: #f5f8fb;
  --text-accent: #fcc208;
  --text-contrast: #ffffff;
  --text-stroke-color: #000000;
  --text-stroke-strong: 1px;
  --text-stroke-soft: 0.8px;
  --text-shadow-strong: 2px 2px 0 rgba(0, 0, 0, 0.35);
  --text-shadow-soft: 1px 1px 0 rgba(0, 0, 0, 0.25);
  --icon-power: #f7fbff;
  --toggle-pointer: #ff5b5b;
  --toggle-segment-start: #7ea4bd;
  --toggle-segment-mid: #5f6570;
  --toggle-segment-end: #d3e3ef;
  --knurl-light: #e4edf3;
  --knurl-dark: #8c9ba8;
  --slider-thumb: #e45a5a;
  --slider-thumb-alt: #6ecf8b;
  --lcd-bg: #8ea72b;
  --lcd-on: #173f19;
  --lcd-off: rgba(23, 63, 25, 0.22);
  --on: #3af075;
  --off: rgba(58, 240, 117, 0.15);
  --online: #3af075;
  --offline: #ff5a5a;
  --pending: #ffb347;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

/*=========== Dark Mode =====*/
body.dark-mode {
  --bg-main: #171d26;
  --bg-header: #1d2632;
  --bg-header-inner: #2f3c4c;
  --bg-segment: #0f151b;
  --bg-main-area: #1d2632;
  --bg-app-card: #243241;
  --bg-power-outer: #3a4757;
  --bg-power-btn: #2f6f55;
  --surface-soft: #3a4552;
  --surface-strong: #2d6b57;
  --surface-muted: #39414d;
  --text-main: #eaf2fb;
  --text-accent: #ffe38a;
  --text-contrast: #eef7ff;
  --text-stroke-color: #000000;
  --text-stroke-strong: 1.2px;
  --text-stroke-soft: 0.8px;
  --text-shadow-strong: 1px 1px 0 rgba(0, 0, 0, 0.28);
  --text-shadow-soft: 1px 1px 0 rgba(0, 0, 0, 0.2);
  --icon-power: #d8ecff;
  --toggle-pointer: #ff8b7a;
  --toggle-segment-start: #4f7d9f;
  --toggle-segment-mid: #2e3946;
  --toggle-segment-end: #8ab6d6;
  --knurl-light: #8fa3b5;
  --knurl-dark: #435364;
  --slider-thumb: #e45a5a;
  --slider-thumb-alt: #57d7b0;
  --lcd-bg: #5e6f2a;
  --lcd-on: #bff59a;
  --lcd-off: rgba(191, 245, 154, 0.18);
  --on: #73d7ff;
  --off: rgba(115, 215, 255, 0.16);
  --online: #73d7ff;
  --offline: #ff6d6d;
  --pending: #ffc36a;
}

body {
  font-family: 'Patrick Hand', cursive;
  color: var(--text-main);
  -webkit-text-stroke: var(--text-stroke-soft) #000000;
  paint-order: stroke fill;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  background-color: var(--bg-main);
  text-shadow: var(--text-shadow-soft);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  overscroll-behavior: none;
}

/*=========== Surface =====*/
.app,
.power,
.threed,
.power-btn {
  border: var(--outline-width) solid var(--outline-color);
  box-shadow: var(--hard-shadow);
  border-radius: 20px;
}

.power-btn:active,
.app:active {
  transform: translate(-1px, -2px);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}

/*=========== Shell =====*/
.shell {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.content:nth-of-type(1) {
  transform: translate3d(0, 0, 0);
}

.content:nth-of-type(2) {
  transform: translate3d(0, 100%, 0);
}

.shell.show-monitoring .content:nth-of-type(1) {
  transform: translate3d(0, -100%, 0);
}

.shell.show-monitoring .content:nth-of-type(2) {
  transform: translate3d(0, 0, 0);
}

/*=========== Header =====*/
header {
  width: 100%;
  height: clamp(13vh, 12vw, 12vw);
  background-color: var(--bg-header);
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 65%;
  margin-left: clamp(1vw, 2vw, 2vw);
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 65%;
}

.shadow {
  width: 100%;
  height: 100%;
  filter: drop-shadow(15px 8px 0px rgba(0, 0, 0, 0.4));
}

.border {
  background-color: black;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%,
    100% 0%,
    100% 65%,
    60% 65%,
    55% min(100%, 25vw),
    45% min(100%, 25vw),
    40% 65%,
    0% 65%);
}

.header {
  background-color: var(--bg-header-inner);
  width: 100%;
  height: 100%;
  clip-path: polygon(4px 4px,
      calc(100% - 4px) 4px,
      calc(100% - 4px) calc(65% - 4px),
      calc(60% + 2px) calc(65% - 4px),
      55% calc(100% - 4px),
      45% calc(100% - 4px),
      calc(40% - 2px) calc(65% - 4px),
      4px calc(65% - 4px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

/*=========== Main =====*/
main {
  background-color: var(--bg-main-area);
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  max-height: calc(100vh - clamp(13vh, 12vw, 12vw));
}

main > .apps-layout {
  flex: 1;
  min-height: 0;
}

main > #charts {
  flex: 1;
  min-height: 0;
}

main > .hint {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: 1rem;
}

/*=========== Hint =====*/
.hint {
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Patrick Hand', cursive;
  color: var(--text-main);
  paint-order: stroke fill;
  -webkit-text-stroke: var(--text-stroke-soft) var(--text-stroke-color);
  text-shadow: var(--text-shadow-soft);
  letter-spacing: 1px;
  animation: bounce 1s infinite ease-in-out;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.arrow {
  width: 16px;
  height: 16px;
  border-right: 4px solid var(--outline-color);
  border-bottom: 4px solid var(--outline-color);
  transform: rotate(45deg);
  border-radius: 2px;
}

.arrow-up {
  transform: rotate(-135deg);
}

.back-hint {
  margin-top: 0.5rem;
  margin-bottom: 0;
  flex-direction: column-reverse;
}