@font-face {
  font-family: 'winsystem';
  src: url('font/system-font/system-font.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ms-sans-serif';
  src: url('font/ms-sans-serif/ms-sans-serif-1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


* {
  --scale: 2;
  --windows-grey: #c0c0c0;

  --window-title: #000080;
  --window-background: #fff;

  --bar-height: calc(18px * var(--scale));
  --font-size: calc(12px * var(--scale));
  --font-size-sm: calc(10px * var(--scale));
  --unit-size: calc(1px * var(--scale));

}

body {
  background: url('image/bg/Winlogo.png');
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'winsystem', sans-serif;
  font-size: var(--font-size);
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}

* {
  /* only correct choice */
  box-sizing: border-box;
  /** same font, same size everywhere */

}

hw-window {

  display:block;
  border: 2px solid black;              /* inner black */
  box-shadow:
    0 0 0 4px var(--windows-grey),     /* middle grey */
    0 0 0 6px black;                   /* outer black */

  display: flex;
  flex-direction: column;
  background: black;
  position: absolute;
  gap: var(--unit-size);
  cursor: pointer;

  > * {
    background-color: var(--window-background);
  }

  /* Cap width at ~5 icons across: 5 × icon width + icongrid padding + border */
  max-width: calc(5 * 64px * var(--scale) + 16px * var(--scale) + 4px);

  &[maximized] {
    width: calc(100vw - calc(6px * var(--scale)));
    height: calc(100vh - calc(6px * var(--scale)));
    max-width: none;
  }


  menu {
    margin: 0;
    height: var(--bar-height);
    display: flex;
    padding-left: calc(8px * var(--scale));
    gap: calc(4px * var(--scale));
    li {
      list-style: none;
      padding: 0 calc(4px * var(--scale));
      margin: 0;
      display: flex;
      align-items: center;
      margin: 0;
      gap: 5px;

      &:hover {
        background-color: var(--window-title);
        color: white;
      }
    }

  }
  hw-titlebar {
    background: black;
    color: white;
    height: var(--bar-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--unit-size);
    padding: 0;
    h1 {
      background: var(--window-background);
      color: black;
      font-weight: normal;
      height: 100%;
      padding: var(--unit-size);
      font-size: var(--font-size);
      margin:0;
      text-align: center;
      flex: 1;
    }

    button {
      height: var(--bar-height);
      width: var(--bar-height);
      background-color: #c0c0c0;
      border-style: solid;
      border-radius: 0;
      border-color: white #808080 #808080 white;
      border-width: var(--unit-size) calc(2px * var(--scale)) calc(2px * var(--scale)) var(--unit-size);
      /* Hide text. Its there just for accessbility */
      font-size: 0;
      background-repeat: no-repeat;
      background-position: center center;
      image-rendering: pixelated;

      &.maximize {
        background-image: url('image/icons/other/arrow-up.png');
        background-size: calc(7px * var(--scale)) calc(4px * var(--scale));
      }
      &.minimize {
        background-image: url('image/icons/other/arrow-down.png');
        background-size: calc(7px * var(--scale)) calc(4px * var(--scale));
      }
      &.context-menu {
        background-image: url('image/icons/other/minus.png');
        background-size: calc(8px * var(--scale)) calc(4px * var(--scale));
        border: none;
      }

    }

  }
  &[active] hw-titlebar h1 {
    background: var(--window-title);
    color: white;
  }

  &[maximized] hw-titlebar {
    button.maximize {
      background-image: url('image/icons/other/arrow-up-down.png');
      background-size: calc(7px * var(--scale)) calc(10px * var(--scale));
    }
  }

  > .content {
    flex: 1;
    display: flex;
    height: 100%;
    background: var(--window-background);
  }

}



hw-icon {
  a {
    text-decoration: none;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(64px * var(--scale));
    gap: calc(4px * var(--scale));
  }
  a:focus span {
    background-color: var(--window-title);
    color: white;
  }
  img {
    width: calc(32px * var(--scale));
    height: calc(32px * var(--scale));
    image-rendering: pixelated;
  }
  span {
    padding: var(--unit-size);
    font-size: var(--font-size-sm);
    font-family: 'ms-sans-serif', sans-serif;
    text-align: center;
  }
}

hw-icongrid {
  display: flex;
  flex-wrap: wrap;
  padding: calc(8px * var(--scale));
  flex: 1;
}

hw-iconlist {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: calc(8px * var(--scale));
}

hw-open {
  button {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
  }
}

.main-window {
  min-width: calc(300px * var(--scale));
  min-height: calc(200px * var(--scale));
}

.desktop-icons {
  position: fixed;
  bottom: calc(8px * var(--scale));
  left: calc(8px * var(--scale));
}