.bg, .inner { box-sizing: border-box;}

.bg {
/* for plain background */
background: #FE82B624;

/* vv for image background. remove if want plain */
background-image:url(https://i.imgur.com/Wy0Pm6R.jpg);
background-size:cover;

padding:12px; /* make number bigger/smaller for a bigger/smaller border */
width:100%;
border:1px solid black;
}

.inner {
background: #FFF;
color: #000;
padding:5px;
border:1px solid black;
height:200px; /* set height to "height:fit-content;" to expand with text size */
overflow-y:auto; /* remove overflow if you don't want a scroll */
}

<div class="bg"><div class="inner">
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.
</div></div>

/*A vast majority of this styling comes from 98.css code, if you're making a full windows 98 theme, I suggest you use the stylesheet this is sourced from - https://jdan.github.io/98.css/ */

.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;
}   

.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;
color:#000;
padding: 3px;
width:100%;
}

.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 . i also like the effect the fieldset adds */
.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;
}

<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>

.popbox {
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
filter: drop-shadow(0px 0px 1px #424242);
-webkit-filter: drop-shadow(0px 0px 1px #424242);
background:white;
color:black;
width:calc(100% - 20px);
height:fit-content;
max-height:190px;
overflow-y:auto;
border-radius:10px;
padding:8px 10px 10px 10px;
box-sizing:border box;
margin:0 auto;
}

<div class="popbox">
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.
</div>

.whitecloudybox {
height: 140px;
width: 100%;
border: 10px solid transparent;
box-sizing: border-box;
border-image: url(https://i.postimg.cc/QM9dMFhq/cloud.png) 50 round;
}

.whitecloudyfull { 
width:100%;
height:100%;
overflow-y:auto;
background:#fff;
color:black;
}

<div class="whitecloudybox"><div class="whitecloudyfull">
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.
</div></div>

.circlehold {
width:100%;
height:155px;
}

.circletext {
text-align:center;
display: flex;
justify-content: center;
align-items: center;
color:black;
padding:2px;
position:relative;
bottom:150px;
width:300px;
height:140px;
margin:0 auto;
z-index:2;
text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97999px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.51361px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
font-weight:bold;
}

.circle { 
margin:0 auto;
background:#FFC0CB;
opacity:50%; /* feel free to remove this line if needed */
position:relative;
top:2px;
width:300px;
height:150px;
transform: rotate(-10deg);
border-radius:100%;
}

<div class="circlehold">
<div class="circle"></div>
<div class="circletext"> no scroll for this one </div>
</div>

.glowpad { margin: 0 auto; padding:10px; width:100%; box-sizing:border-box; }

.glow {
margin: 0 auto;
width:100%;
height:150px;
border:3px solid pink;
background:pink;
border-radius:10px;
box-shadow: 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 14px pink;
color:black;
overflow-y:auto;
}

<div class="glowpad"><div class="glow">
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.


</div></div>

.brackets {
border: 3px hotpink solid;
border-width: 0 3px 0 3px;
border-radius:10px;
padding: 0px 4px 0px 4px;
width:100%; /* change number if needed */
height:100px; /* change number if needed */
overflow-y:auto;
}

<div class="brackets">
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.
</div>

/* scrolling version*/
.lacescr {
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
width:100%;
height:100px;
overflow-y:auto;
} 

<div class="lacescr">
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.
</div>

.pinkcloudybox {
height: 139px;
width: 100%;
border: 10px solid transparent;
box-sizing: border-box;
border-image: url(https://i.postimg.cc/GmzyDT0w/BAM.png) 50 round;
}

.pinkcloudyfull {
width: 100%;
height: 100%;
overflow-y: auto;
background: #feb6dc;
color: black;
}

<div class="pinkcloudybox"><div class="pinkcloudyfull">
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.
</div></div>