@font-face {
  font-family: "Pixel Sans Serif";
  src: url(fonts/pixel_sans_serif.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url(fonts/ms_sans_serif.woff) format("woff");
  src: url(fonts/ms_sans_serif.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url(fonts/ms_sans_serif_bold.woff) format("woff");
  src: url(fonts/ms_sans_serif_bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
}


:root {
    --lilith-inactive-color: #2B1B4F;         /* Deep purple background */
    --lilith-outer-color: #3C2E7B;            /* Rich indigo for hover/active */
    --lilith-inner-color: #6DE0F6;            /* Bright teal for highlights */
    --lilith-border-color: #F7C948;           /* Neon yellow border */
    --lilith-window-text-color: #F7C948;      /* Neon yellow text */
    --lilith-window-text-back: #1B1B2F;       /* Dark blue for content */
    --lilith-username-color: #FF6FF2;         /* Vibrant magenta for usernames */
    --lilith-button-color: #6DE0F6;           /* Teal for buttons */
    --lilith-task-color: #FF6FF2;             /* Magenta for tasks */
    --lilith-scrollbar-inner-color: #F7C948;  /* Neon yellow scrollbar */
    --lilith-scrollbar-inner-hover-color: #FF6FF2; /* Magenta on hover */
    --lilith-scrollbar-outer-color: #3C2E7B;  /* Indigo for scrollbar outer */
}

body {
  cursor: url("/cursor.png"), auto;
  color: var(--lilith-window-text-color);
  /* font-family: "MS ui gothic"; */
  image-rendering: pixelated;
  font-size: 17px;
  font-size: 18px;
}

.window {
  border: 2px solid var(--lilith-border-color);
  background: var(--lilith-inactive-color);
  padding: 4px;
  padding-bottom: 16px;
  /* box-shadow: 4px 4px rgba(80,20,255,0.2); */
  /* padding-bottom: 0; */
}

.window::after {
  content: url('/index/window_bottom.png');
  display: block;
  margin-bottom: -4px;
}


/*special*/
/*.wrapper:hover .title*/
.window:hover {
  background: var(--lilith-outer-color);
}
.window:hover .title {
  background: var(--lilith-inner-color);
}

.active {
  background: var(--lilith-outer-color);
}
/**/

.window .title {
  border: 2px solid var(--lilith-border-color);
  background: var(--lilith-inactive-color);
  color: var(--lilith-window-text-color);
  font-family: "Pixelated MS Sans Serif";
  image-rendering: pixelated;
  font-weight: bold;
  /*font-size: 17px;*/
  height: 22px;
  
  /*display: flex;
  align-items: center;
  justify-content: space-between;*/
}

.window .title span {
  /*flex: 1;*/
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  position: relative;
  top: 2px;
}

.active .title {
  background: var(--lilith-inner-color);
}

.title {
    pointer-events: none;
}

.title::before {
  content: url('/index/window_icon_neutral.png');
  float:left;
  padding-right:2px;
  
  width: 22px;
  height: 22px;
  
  /*display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;*/
}

.title::after {
  content: url('/index/window_buttons2.png');
  float:right;
  pointer-events: all;
  
  /*display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;*/
}

.subtitle {
  color: var(--lilith-window-text-color);
  /*font-family: "MS ui gothic";*/
  image-rendering: pixelated;
  font-size: 17px;
  font-weight: bold;
}

.window .content {
  border: 2px solid var(--lilith-border-color);
  background: var(--lilith-window-text-back);
  color: var(--lilith-window-text-color);
  /*font-family: "MS ui gothic";*/
  image-rendering: pixelated;
  /*font-size: 17px;*/
  margin-top: 4px;
  padding: 4px;
}

.button {
  color: var(#000000);
  /*font-family: "MS ui gothic";*/
  image-rendering: pixelated;
  /*font-size: 16px;*/
  font-size: inherit;
  font-family: inherit;
  /*color: var(--lilith-window-text-color);
  background: var(--lilith-button-color);
  border: 2px outset var(--lilith-button-color);*/
  /*padding: 4px;*/
  text-align: center;
  
  border: 4px solid transparent;
  border-image: url(button.png) 4 fill repeat;
}

.button:hover {
  cursor: url("/click.png"), auto;
  /*background: var(--lilith-window-text-back);*/
  border-image: url(button_hovered.png) 4 fill repeat;
}

.button:active {
  /*border-style: inset;*/
  border-image: url(button_pressed.png) 4 fill repeat;
}

.button:disabled {
  /*border-style: inset;*/
  border-image: url(button_disabled.png) 4 fill repeat;
}

.border {
  border: 2px solid var(--lilith-border-color);
}

.fit-content {
  width: max-content;
  height: max-content;
}