@font-face {
  font-family: "Pixel Sans Serif";
  src: url(../pixel_sans_serif.ttf) format("tff");
  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: #E2E2E2;
    --lilith-outer-color: #94F1E1;
    --lilith-inner-color: #EDD0EE;
    --lilith-border-color: #4932C9;
    --lilith-window-text-color: #4932C9;
    --lilith-window-text-back: #F9EFF9;
    --lilith-username-color: #5072D6;
    --lilith-button-color: #F8E1FB;
    --lilith-task-color: #F3E1F7;
    --lilith-scrollbar-inner-color: #DB8ED6;
    --lilith-scrollbar-inner-hover-color: #B471B0;
    --lilith-scrollbar-outer-color: #C5EAFC;
}

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('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: "MS ui gothic";*/
  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('window_icon_neutral.html');
  float:left;
  padding-right:2px;
  
  width: 22px;
  height: 22px;
  
  /*display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;*/
}

.title::after {
  content: url('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(--lilith-window-text-color);
  /*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;
}