@font-face {
    font-family: 'win95ru';
    src: url('EpilepsySans.ttf') format('opentype');
}

@font-face {
    font-family: 'win95';
    src: url('W95FA.otf') format('opentype');
}


.win98popup {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    /* font-family: "Microsoft Sans Serif", sans-serif; */
    background: #c2c6ca;
    font-size: 16px;
    -webkit-font-smoothing: none;
    width: 500px;
    height: auto;
    box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px #C2C6CA, inset -1px -1px #85898d, inset 2px 2px white;
  
    button {
      background: #c2c6ca;
      border: none;
      padding: 0;
      border-radius: 0;
      outline: none;
    }
  
    .shadow {
      box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px white,
        inset -1px -1px #85898d;
    }
  
    .bar {
      display: flex;
      flex-flow: row nowrap;
      font-weight: bold;
      justify-content: space-between;
      width: calc(100% - 11px);
      height: 13px;
      font-size: 14px;
      color: white;
      background: #00a;
      padding: 2px 3px 3px;
      margin: 3px 2px 1px 3px;
      p {
        margin: 0;
      }
      button {
        width: 15px;
        height: 13px;
        &:active {
          box-shadow: 0.5px 0.5px 0 0.5px white, inset 1px 1px black,
            inset -1px -1px #c2c6ca, inset 2px 2px #85898d;
          svg {
            transform: translateX(1px) translateY(1px);
          }
        }
        svg {
          margin: 3px 3px 3px 4px;
        }
      }
    }
    .buttons {
      display: flex;
      flex-flow: row nowrap;
      margin: 1px 15px 14px 14px;
      button {
        width: 74px;
        height: 22px;
        display: grid;
        &:not(:last-child){
          margin-right: 7px;
        }
        p {
          font-size: 12px;
          margin: auto;
        }
        img {
          margin: 4px 3px 3px 4px;
          display: none;
        }
        p, img {
          grid-column: 1;
          grid-row: 1;
        }
        &:focus {
          outline: none;
          box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px black,  inset -1px -1px black, inset 2px 2px white, inset -2px -2px #85898d;
          img {
            display: block;
          }
        }
        &:active {
          box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px black,
            inset -1px -1px #85898d, inset 2px 2px #85898d;
          outline: none;
          p, img {
            transform: translateX(1px) translateY(1px);
          }
        }
      }
    }
  }
  
  html, body{
    height: 100%;
  }
body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* 'win95', sans-serif */
    font-family: 'win95', 'win95ru';
    background-color: #018281;
    overflow-y: auto; /* добавляем вертикальную прокрутку */
}

  #text{
    font-size: 16px;
  }

  .win98popup > div:not(.bar):not(.buttons) {
    padding: 5px;
    box-sizing: border-box;
}

#desktop {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #018281;
}

/* Каждое окно как на рабочем столе */
.window {
    position: absolute;
    cursor: default;
    user-select: none;
}

/* Во время перетаскивания */
.window.active {
    z-index: 9999;
}

/* Чтобы бар показывал, что его можно двигать */
.bar {
    cursor: move;
}

#desktop {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #018281;
    display: block;
}

/* Каждое окно как на рабочем столе */
.window {
    position: absolute;
    cursor: default;
    user-select: none;
    width: 300px;
}

/* При перетаскивании */
.bar {
    cursor: move;
}

/* Активное окно */
.window.active .bar {
    background: #000080; /* насыщенный синий */
    color: white;
}

/* Неактивное окно */
.window:not(.active) .bar {
    background: #808080; /* серая полоса */
    color: #dcdcdc;
}

#desktop {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #018281;
    overflow: auto; /* <-- теперь можно прокручивать */
    touch-action: none; /* чтобы не мешали свайпы при перетаскивании */
}

.window {
    position: absolute;
    cursor: default;
    user-select: none;
    width: 300px;
}

.bar {
    cursor: move;
}

/* Активное окно */
.window.active .bar {
    background: #000080;
    color: white;
}

/* Неактивное окно */
.window:not(.active) .bar {
    background: #808080;
    color: #dcdcdc;
}