/* its like the past or something man */

:root {
  --aero-frame-top:   rgba(236, 243, 247, 0.66);
  --aero-frame-bot:   rgba(168, 186, 198, 0.58);
  --aero-frame-edge:  rgba(0, 0, 0, 0.62);
  --aero-highlight:   rgba(255, 255, 255, 0.8);

  --vista-text:       #1e1e1e;
  --vista-btn-border: #707070;

  --vista-font: "Segoe UI", "Frutiger Linotype", "Lucida Grande", Tahoma, Verdana, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--vista-font);
  font-size: 15px;
  color: var(--vista-text);
  background-color: #0b6470;
  background-image:
    url("Image%20Assets/background.png"),
    url("Image%20Assets/background.jpg"),
    radial-gradient(ellipse 70% 40% at 18% 100%, rgba(232, 240, 60, 0.8), transparent 70%),
    radial-gradient(ellipse 60% 45% at 86% 100%, rgba(120, 255, 240, 0.65), transparent 70%),
    radial-gradient(ellipse 50% 60% at 8% 40%, rgba(40, 200, 90, 0.6), transparent 70%),
    linear-gradient(160deg, #0a4f63 0%, #118a86 45%, #1c9a68 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.page-desktop.is-anniversary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    url("Image%20Assets/background%202.png"),
    url("Image%20Assets/background%202.jpg"),
    url("Image%20Assets/background%202.jpeg"),
    url("Image%20Assets/background%202.webp"),
    url("Image%20Assets/background2.png"),
    url("Image%20Assets/background2.jpg"),
    url("Image%20Assets/background2.jpeg"),
    url("Image%20Assets/background2.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.is-anniversary .desktop__icons {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.is-anniversary .desktop__icons .icon {
  position: absolute;
  margin: 0;
  pointer-events: auto;
}

.window__body--app > .google {
  flex: 1;
  min-height: 0;
}

.google {
  overflow: auto;
  font: 13px Arial, Helvetica, sans-serif;
  color: #000000;
  background: #ffffff;
}

.google a {
  color: #0000cc;
  text-decoration: underline;
  cursor: pointer;
}

.google__top {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  border-bottom: 1px solid #e5e5e5;
}

.google__top > div {
  display: flex;
  gap: 12px;
}

.google__logo {
  margin: 20px 0 14px;
  font: bold 64px/1 Georgia, "Times New Roman", serif;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

.google__logo--small {
  margin: 0;
  font-size: 30px;
  letter-spacing: -1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.google__field {
  position: relative;
  width: 305px;
  margin: 0 auto;
}

.google__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 22px;
  padding: 1px 3px;
  font: 13px Arial, Helvetica, sans-serif;
  color: #000000;
  cursor: default;
  background: #ffffff;
  border: 1px solid #7f9db9;
  outline: 0;
  caret-color: transparent;
}

.google__adv {
  position: absolute;
  top: -2px;
  left: 100%;
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
}

.google__adv--inline {
  position: static;
  margin: 0;
}

.google__buttons {
  display: flex;
  gap: 0;
  justify-content: center;
  margin-top: 3px;
}

.google__button {
  padding: 2px 8px;
  font: 13px Arial, Helvetica, sans-serif;
  color: #000000;
  cursor: pointer;
  background: linear-gradient(to bottom, #f6f6f6, #dcdcdc);
  border: 1px solid #707070;
  border-radius: 3px;
}

.google__promo {
  margin: 34px 0 0;
  text-align: center;
}

.google__promo + .google__promo {
  margin-top: 24px;
}

.google__copy {
  margin: 20px 0;
  font-size: 10px;
  text-align: center;
}

.google__head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 8px;
}

.google__head .google__input {
  width: 300px;
}

.google__stats {
  display: flex;
  justify-content: space-between;
  padding: 3px 10px;
  background: #e5ecf9;
  border-top: 1px solid #3366cc;
}

.google__result {
  margin: 16px 10px;
  max-width: 560px;
}

.google__title {
  font-size: 16px;
}

.google__url {
  color: #008000;
  font-size: 12px;
}

.obit {
  padding-bottom: 16px;
}

.obit__bar {
  padding: 8px 14px;
  font: bold 15px Georgia, "Times New Roman", serif;
  color: #ffffff;
  background: #4a5568;
}

.obit__main {
  display: flex;
  gap: 20px;
  padding: 18px 20px 4px;
}

.obit__photo {
  flex: none;
  width: 150px;
}

.obit__photo img,
.obit__photo svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #cccccc;
}

.obit__info {
  min-width: 0;
}

.obit__name {
  margin: 4px 0 2px;
  font: normal 22px Georgia, "Times New Roman", serif;
  color: #000000;
}

.obit__dates {
  margin-bottom: 16px;
  color: #555555;
}

.obit__heading {
  margin: 0 0 6px;
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #000000;
}

.obit__text {
  margin: 0;
  max-width: 420px;
  line-height: 1.5;
}

.obit__back {
  display: inline-block;
  margin: 18px 0 0 20px;
}

.google__unavailable {
  padding: 90px 20px;
  text-align: center;
}

.google__unavailable-text {
  margin-bottom: 18px;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: #3399ff;
  color: #ffffff;
}

.button {
  display: inline-block;
  min-width: 76px;
  padding: 0.3em 1em;
  font: inherit;
  font-size: 0.9em;
  color: #000000;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 45%, #dddddd 50%, #cfcfcf 100%);
  border: 1px solid var(--vista-btn-border);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.button:hover,
.button:focus-visible {
  background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 45%, #bee6fd 50%, #a7d9f5 100%);
  border-color: #3c7fb1;
  outline: 0;
}

.window {
  position: relative;
  width: min(432px, 92vw);
  padding: 0 7px 7px;
  border: 1px solid var(--aero-frame-edge);
  border-radius: 7px;
  background: linear-gradient(to bottom, var(--aero-frame-top), var(--aero-frame-bot));
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--aero-highlight), 0 8px 24px rgba(0, 0, 0, 0.45);
}

.window__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 27px;
  padding-left: 2px;
  user-select: none;
  touch-action: none;
}

.window__title {
  overflow: hidden;
  font-size: 12px;
  color: #22272b;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.9);
}

.window__controls {
  position: relative;
  top: -1px;
  display: flex;
  flex: none;
  align-items: flex-start;
  height: 20px;
}

.window__btn,
.window__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.window__btn {
  width: 29px;
  border: 1px solid #33424e;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 5px;
  background: linear-gradient(to bottom, #e3ebf1 0%, #b8c7d3 46%, #8ea1b1 50%, #b7c7d4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.window__btn:hover,
.window__btn:focus-visible {
  outline: 0;
  background: linear-gradient(to bottom, #eaf6fd 0%, #c4e5f6 46%, #7fbfe6 50%, #a7d9f5 100%);
}

.window__close {
  width: 47px;
  border: 1px solid #4a1409;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(to bottom, #e9a99c 0%, #d9705c 46%, #c1301a 50%, #d65a3d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.window__btn + .window__close {
  border-radius: 0 0 5px 0;
}

.window__close:hover,
.window__close:focus-visible {
  outline: 0;
  background: linear-gradient(to bottom, #f6c3b8 0%, #ee8a72 46%, #dc3a1c 50%, #f07a58 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 8px rgba(255, 110, 70, 0.8);
}

.window__close svg,
.window__btn svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.window__body {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.window__body--logo {
  display: block;
  padding: 12px 20px;
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 58%, #ececec 58%, #f4f4f4 100%);
}

.window__body--logo img {
  display: block;
  width: 100%;
  height: auto;
}

body.page-desktop {
  overflow: hidden;
}

.desktop {
  position: fixed;
  inset: 0 0 32px 0;
  z-index: 6;
  overflow: hidden;
}

.desktop__icons {
  position: absolute;
  top: 14px;
  left: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  height: calc(100% - 20px);
}

.desktop__windows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 108px;
  padding: 6px 4px;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  color: #ffffff;
  text-align: center;
  word-break: break-word;
  cursor: default;
  user-select: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.7);
}

.icon__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.icon__img svg,
.icon__img img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.is-anniversary .icon__img,
.is-anniversary .icon--light .icon__img {
  filter: grayscale(1) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.is-anniversary .icon--light.icon--keep-color .icon__img {
  filter: none;
}

.is-anniversary .icon--keep-color .icon__img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.icon:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}

.icon.is-selected,
.icon:focus-visible {
  outline: 0;
  background: rgba(80, 150, 230, 0.45);
  border-color: rgba(160, 205, 255, 0.85);
}

.icon--light {
  color: #1e1e1e;
  text-shadow: none;
}

.icon--light .icon__img {
  filter: none;
}

.icon--light:hover {
  background: #eaf4fd;
  border-color: #b8d6fb;
}

.icon--light.is-selected,
.icon--light:focus-visible {
  background: #cde8ff;
  border-color: #7da2ce;
}

.window--app {
  position: absolute;
  display: flex;
  flex-direction: column;
  max-width: 96vw;
  max-height: 100%;
  pointer-events: auto;
  background: linear-gradient(to bottom, rgba(226, 232, 236, 0.5), rgba(170, 182, 190, 0.44));
}

.window--app[hidden] {
  display: none;
}

.window--app.is-active {
  background: linear-gradient(to bottom, var(--aero-frame-top), var(--aero-frame-bot));
  box-shadow: inset 0 0 0 1px var(--aero-highlight), 0 12px 36px rgba(0, 0, 0, 0.6);
}

.window--app:not(.is-active) .window__title {
  color: #5b646b;
}

.window__body--app {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.window__body--app > .explorer,
.window__body--app > .player,
.window__body--app > .notepad,
.window__body--app > .chars,
.window__body--app > .placeholder {
  flex: 1;
  min-height: 0;
}

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: #1c3f7a;
  background: linear-gradient(to bottom, #ffffff 0%, #f3f8fe 100%);
}

.placeholder__icon svg,
.placeholder__icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.placeholder h2 {
  margin: 8px 0 0;
  font-size: 1.5em;
  font-weight: 400;
}

.placeholder p {
  margin: 0;
  color: #5a6c85;
}

.notepad {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #000000;
}

.notepad__menu {
  display: flex;
  flex: none;
  gap: 14px;
  padding: 3px 9px;
  font-size: 12px;
  color: #1e1e1e;
  cursor: default;
  user-select: none;
  background: linear-gradient(to bottom, #f9fbfd, #e4eaf1);
  border-bottom: 1px solid #b9c3cf;
}

.notepad__text {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  font: 13px/1.5 Consolas, "Lucida Console", "Courier New", monospace;
  color: #000000;
  white-space: pre;
  background: #ffffff;
  border: 0;
  outline: 0;
}

.notepad__text a {
  color: #0645ff;
  text-decoration: underline;
}

.notepad__text a:hover {
  color: #0025b3;
}

.chars {
  display: flex;
  flex-direction: column;
  overflow: auto;
  font-family: Calibri, Carlito, "Segoe UI", Tahoma, sans-serif;
  color: #000000;
  background: #ffffff;
}

.chars__home {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.chars__links {
  display: flex;
  gap: 90px;
  font-size: 15px;
}

.chars__link {
  color: #0645ff;
  text-decoration: underline;
  cursor: pointer;
}

.chars__link:hover {
  color: #0025b3;
}

.chars__foot {
  position: absolute;
  bottom: 3px;
  left: 4px;
  font-size: 10px;
}

.wiki {
  flex: none;
  padding: 12px 20px 24px;
  font: 13px/1.6 Arial, Helvetica, sans-serif;
  color: #000000;
  background: #ffffff;
}

.wiki .chars__link {
  color: #0645ad;
  text-decoration: none;
}

.wiki .chars__link:hover {
  text-decoration: underline;
}

.wiki__nav {
  font-size: 11px;
}

.wiki__title {
  margin: 10px 0 0;
  padding-bottom: 2px;
  font: normal 26px/1.3 "Linux Libertine", Georgia, Times, serif;
  color: #000000;
  border-bottom: 1px solid #aaaaaa;
}

.wiki__sub {
  margin: 4px 0 14px;
  font-size: 11px;
  color: #666666;
}

.wiki__layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.wiki__article {
  flex: 1;
  min-width: 0;
}

.wiki__heading {
  margin: 0 0 6px;
  padding-bottom: 2px;
  font: normal 20px/1.3 "Linux Libertine", Georgia, Times, serif;
  color: #000000;
  border-bottom: 1px solid #aaaaaa;
}

.wiki__subheading {
  margin: 14px 0 4px;
  font: bold 15px/1.3 Arial, Helvetica, sans-serif;
  color: #000000;
}

.wiki__text {
  margin: 0 0 10px;
}

.infobox {
  flex: none;
  width: 220px;
  font-size: 12px;
  line-height: 1.4;
  background: #f9f9f9;
  border: 1px solid #aaaaaa;
  border-collapse: collapse;
}

.infobox__title {
  padding: 5px 8px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background: #ccccff;
  border: 1px solid #aaaaaa;
  border-bottom: 0;
}

.infobox__pic {
  padding: 8px;
  text-align: center;
  border: 1px solid #aaaaaa;
}

.infobox__pic img,
.infobox__pic svg {
  display: block;
  width: 100%;
  max-height: 200px;
  height: auto;
  object-fit: contain;
  border: 1px solid #cccccc;
}

.infobox__cap {
  margin-top: 4px;
  font-size: 11px;
  color: #444444;
}

.infobox th,
.infobox td {
  padding: 4px 8px;
  vertical-align: top;
  text-align: left;
  border: 1px solid #aaaaaa;
}

.infobox th {
  width: 1%;
  white-space: nowrap;
  background: #eeeeff;
}

.explorer {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #1e1e1e;
  background: #ffffff;
}

.explorer__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: #1c3f7a;
  background: linear-gradient(to bottom, #f7fafd, #e4ecf6);
  border-bottom: 1px solid #b8c7dc;
}

.explorer__main {
  display: flex;
  flex: 1;
  min-height: 0;
}

.explorer__nav {
  flex: none;
  width: 148px;
  padding: 8px 6px;
  overflow: auto;
  background: #f3f7fc;
  border-right: 1px solid #d0daea;
}

.explorer__navhead {
  padding: 2px 6px 5px;
  font-weight: bold;
  color: #1c3f7a;
}

.explorer__place {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 6px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.explorer__place:hover,
.explorer__place:focus-visible {
  outline: 0;
  background: #e3effc;
  border-color: #c4dbf5;
}

.explorer__place.is-current {
  background: #d3e5fa;
  border-color: #a8c8ef;
}

.explorer__placeicon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
}

.explorer__placeicon svg,
.explorer__placeicon img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.is-anniversary .explorer__placeicon {
  filter: grayscale(1);
}

.explorer__files {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 14px;
  overflow: auto;
}

.explorer__crumb {
  margin: 0 -3px;
  padding: 1px 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.explorer__crumb:hover,
.explorer__crumb:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.7);
  border-color: #b8d6fb;
}

.explorer__empty {
  width: 100%;
  padding-top: 40px;
  color: #6d6d6d;
  text-align: center;
}

.explorer__files .icon {
  width: 104px;
}

.explorer__status {
  padding: 4px 10px;
  color: #4a5b75;
  background: #f2f6fb;
  border-top: 1px solid #d0daea;
}

.player {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #e8f1f8;
  background: radial-gradient(ellipse at 50% 0%, #1d3a55 0%, #0b1622 60%, #060b12 100%);
}

.player__video {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.player__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__info {
  min-width: 0;
  padding: 12px 18px 10px;
}

.player__label {
  color: #7fb6e0;
  font-size: 11px;
}

.player__title {
  margin: 4px 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.player__status {
  min-height: 1.3em;
  color: #ffb4a8;
}

.player__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 10px 10px;
  overflow: auto;
  list-style: none;
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.player__track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.player__track:hover,
.player__track:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.player__track.is-current {
  background: linear-gradient(to bottom, rgba(110, 185, 255, 0.4), rgba(40, 110, 200, 0.35));
  border-color: rgba(150, 210, 255, 0.7);
}

.player__num {
  width: 16px;
  color: #7fb6e0;
  text-align: right;
}

.ambience {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 200px;
  height: 200px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.sidebar {
  position: fixed;
  top: 22px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 126px;
}

@media (max-width: 1099px), (max-height: 560px) {
  .sidebar {
    display: none;
  }
}

.calendar {
  position: relative;
  padding: 16px 0 12px;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(to bottom, #f26a1b 0%, #d94c00 100%);
  border: 1px solid #ffb27a;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.calendar::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 6px;
  right: 6px;
  height: 9px;
  border-radius: 2px;
  background: repeating-linear-gradient(to right, #ececec 0 3px, transparent 3px 8px);
}

.calendar__month {
  font-size: 12px;
  font-weight: 600;
}

.calendar__day {
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.calendar__weekday {
  font-size: 12px;
  font-weight: 600;
}

.clock {
  display: block;
  width: 126px;
  height: 126px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}

.clock text {
  font-family: var(--vista-font);
  font-size: 10px;
  fill: #2b2b2b;
}

.photo {
  height: 96px;
  padding: 3px;
  background: #ffffff;
  border: 1px solid #8fa6ba;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px 0 58px;
  color: #ffffff;
  font-size: 12px;
  background: linear-gradient(to bottom, #6b7273 0%, #3c4243 8%, #1c2021 50%, #0b0d0e 52%, #16191b 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.orb {
  position: absolute;
  left: 6px;
  bottom: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #9fd0ff 0%, #2f78c9 42%, #15458a 72%, #0a2854 100%);
  border: 1px solid #0a1a30;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 6px rgba(80, 160, 255, 0.55);
}

.taskbar__tasks {
  display: flex;
  flex: 1;
  gap: 4px;
  min-width: 0;
  margin-left: 2px;
  overflow: hidden;
}

.taskbar__task {
  display: inline-flex;
  flex: 0 1 172px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  font: inherit;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 50%, rgba(120, 180, 230, 0.2) 51%, rgba(180, 220, 255, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.taskbar__task span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taskbar__icon {
  display: flex;
  flex: none;
}

.taskbar__icon svg,
.taskbar__icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.taskbar__task:hover {
  filter: brightness(1.2);
}

.taskbar__task.is-active {
  background: linear-gradient(to bottom, rgba(120, 190, 255, 0.55), rgba(40, 110, 200, 0.45) 50%, rgba(90, 170, 240, 0.5) 51%, rgba(150, 210, 255, 0.55));
  border-color: rgba(190, 225, 255, 0.85);
}

.taskbar__tray time {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  white-space: pre;
}

.taskbar__tray {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
  padding-left: 10px;
}

/* this section is the login screen lol */
.page-login {
  overflow: hidden;
}

.login {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 4vh;
  color: #ffffff;
}

.login::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 55%,
    transparent 80%,
    rgba(120, 195, 245, 0.3) 84%,
    rgba(30, 100, 180, 0.4) 100%
  );
}

.login__user {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 250px;
}

.login__avatar {
  width: 146px;
  height: 146px;
  padding: 7px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(238, 247, 251, 0.92), rgba(150, 186, 206, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(30, 60, 80, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35);
}

.login__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 1px solid rgba(70, 40, 20, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(circle at 50% 50%, #7a4c0c 0 5%, #d9a52a 6% 15%, transparent 16%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(120, 20, 0, 0.4) 100%),
    repeating-conic-gradient(from -5deg at 50% 50%, #ff8b3f 0deg 7deg, #f26522 7deg 14deg, #d84a12 14deg 20deg);
}

.login__name {
  margin: 14px 0 9px;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 30, 60, 0.7), 0 0 10px rgba(0, 70, 130, 0.45);
}

.login__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.login__input {
  width: 226px;
  height: 25px;
  padding: 0 6px;
  font-family: var(--vista-font);
  font-size: 12px;
  color: #111111;
  background: #ffffff;
  border: 1px solid #6d7f96;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.login__input:focus {
  outline: 0;
  border-color: #3c7fb1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 6px rgba(80, 170, 255, 0.85);
}

.login__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 50% 25%, #a5d3ff 0%, #3a8be0 50%, #124f9c 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 50, 110, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.login__go:hover,
.login__go:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px rgba(0, 50, 110, 0.6), 0 0 8px rgba(120, 200, 255, 0.95);
}

.login__hint {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 30, 60, 0.75);
  opacity: 0.9;
}

.login__error {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 280px;
  text-align: center;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0, 30, 60, 0.75);
}

.login__error p {
  margin: 0;
}

.login.has-error .login__row,
.login.has-error .login__hint {
  display: none;
}

.login.has-error .login__error {
  display: flex;
}

.login__welcome {
  display: none;
  font-size: 32px;
  font-weight: 300;
  text-shadow: 0 1px 6px rgba(0, 30, 60, 0.7);
}

.login.is-signing-in .login__user {
  display: none;
}

.login.is-signing-in .login__welcome {
  display: block;
}

.login__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 34px;
}

.login__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 32px;
  font-weight: 300;
  text-shadow: 0 1px 4px rgba(0, 30, 60, 0.55);
}

.login__brand small {
  align-self: flex-end;
  padding-bottom: 5px;
  font-size: 17px;
}

.login__access,
.login__power {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.login__access {
  width: 38px;
  background: linear-gradient(to bottom, #6fa4de 0%, #2e63a8 50%, #1c4a8c 52%, #2f6db5 100%);
  border: 1px solid #10284a;
}

.login__power {
  width: 58px;
  gap: 8px;
  background: linear-gradient(to bottom, #c95a5a 0%, #9c1c1c 50%, #7a0d0d 52%, #a52323 100%);
  border: 1px solid #3d0505;
}

@media (max-width: 640px) {
  .login__footer {
    padding: 0 16px;
  }

  .login__brand {
    font-size: 22px;
  }

  .login__brand small {
    display: none;
  }
}