adapted windows 98

<!-- vast majority of this code is pulled from 98 css but edited so it only effects this certain scrollbox. if you are making everything windows 98 themed i reccomend you use the css stylesheet
cred to https://jdan.github.io/98.css/ -->
<style>
.title-bar-controls button {border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}

.title-bar-controls button {background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}

.title-bar-controls button:not(:disabled):active {box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}

@media (not(hover)){
	button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}

.title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
.title-bar-controls button::-moz-focus-inner {border:0}


@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/1za99g.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/z7csle.woff") format("woff");
  src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}


.window, .title-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}

.window {
  box-shadow: inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf, inset -2px -2px #808080,
    inset 2px 2px #ffffff;
  background: #c0c0c0;
  padding: 3px;
  width:300px;
}

.title-bar {
  background:linear-gradient(90deg, purple, orchid, pink);
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}

.title-bar-controls button:active {
  padding: 0;
}

.title-bar-controls button:focus {
  outline: none;
}

.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat}

.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat}

.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px}

.window-body {
  margin: 8px;
}

/* literally only part ive custom coded so it scrolls V */
.fieldset {
border:1px gray solid;
box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px, white 1px 0px 0px;
margin:0;
padding:10px;
overflow-y:auto;
height: 190px;}
</style>

<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">A Window With Stuff In It</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <div class="fieldset">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.<br><br>

Duis pharetra malesuada fermentum. Donec pellentesque metus id lectus imperdiet tristique. In semper, velit et porta vulputate, ex neque aliquam lacus, nec lacinia magna est sit amet est. Vestibulum sit amet lacinia nisl. Aliquam erat volutpat. Integer pulvinar lectus id turpis pretium, non convallis urna pharetra. Nulla pulvinar quam non risus lobortis, non faucibus orci elementum. Nullam sed justo mi. Cras posuere, velit sed tincidunt placerat, justo ex gravida sem, ut viverra mi tellus sed erat. Proin sollicitudin felis dolor. Phasellus et arcu molestie, blandit diam scelerisque, fermentum elit. Sed et lectus non est dignissim gravida ut sed mauris.<br><br>

Phasellus sit amet lacus nulla. Quisque scelerisque lacus vel quam dapibus, scelerisque faucibus nisl auctor. Donec gravida molestie nisl, et aliquam est suscipit id. Maecenas a porta magna. Nulla at condimentum lacus. Vivamus ultricies sem vel dolor imperdiet porttitor. Suspendisse orci odio, molestie in augue sed, bibendum interdum urna. Mauris maximus nisi et sapien pharetra, sed consequat enim convallis. Aenean dictum ligula at auctor laoreet. Donec elementum dui vitae tortor venenatis, sed pretium eros semper. Morbi semper malesuada ipsum sit amet tincidunt. Donec iaculis iaculis pretium.
</div>
  </div>
</div>