.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
}

/**
 * 98.css
 * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
 * https://github.com/jdan/98.css/blob/main/LICENSE
 */

:root {
  /* Color */
  --surface: #8EAEFB;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #7db080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;
--title-border: #0000ff;
  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;

  /* Some detailed computations for radio buttons and checkboxes */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-top: 3px;
  --checkmark-left: 3px;

  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: Arial;
  font-size: 12px;
  color: #222222;
}

button,
label,
input,
textarea,
select,
option,
ul.tree-view,
.window,
.title-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

u {
  text-decoration: none;
  border-bottom: 0.5px solid #222222;
}

button,
input[type="submit"],
input[type="reset"] {
  box-sizing: border-box;
  border: none;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  border-radius: 0;

  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
}

.vertical-bar {
  width: 4px;
  height: 20px;
  background: #c0c0c0;
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  padding: 2px 11px 0 13px;
}

@media (not(hover)) {
  button:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  input[type="reset"]:not(:disabled):hover {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  }
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  border: 0;
}

:disabled,
:disabled + label,
:read-only,
:read-only + label {
  color: var(--button-shadow);
}

button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
:disabled + label {
  text-shadow: 1px 1px 0 var(--button-highlight);
}

.window {
  box-shadow: inset -1px -1px #242424, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  background: var(--surface);
  padding: 4px;
width:215px;
height:400px;
display:inline-block;
border:1px solid #8EAEFB;
  position: static;
  
}

.title-bar {
 background-image: url(https://file.garden/aJ6eFDu7_yp7XLT7/2%20backgrounds/water.04.jpg);
  background-position: 200px;
    padding: 3px 2px 3px 3px;
  border-style: solid;
  border-color: steelblue;
  border-width: .01px;
    display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar.inactive {
  background: linear-gradient(
    90deg,
    var(--dialog-gray),
    var(--dialog-gray-light)
  );
}

.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="question"] {
  background-image:url("https://file.garden/aJ6eFDu7_yp7XLT7/help.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 5px;
}

.title-bar-controls button[aria-label="cross"] {
  background-image: url("https://file.garden/aJ6eFDu7_yp7XLT7/close.svg");
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
}

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

.title-bar-controls button[aria-label="Help"] {
  background-image: svg-load("./icon/help.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 5px;
}

.title-bar-controls button[aria-label="Close"] {
  margin-left: 2px;
  background-image: svg-load("./icon/close.svg");
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
}


.status-bar {
  margin: 0px 1px;
  display: flex;
  gap: 1px;
}

.status-bar-field {
  box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
  flex-grow: 1;
  padding: 2px 3px;
  margin: 0;
}

.window-body {
  margin: var(--element-spacing);
}

.fieldset {
  border:1px #8EAEFB solid;
box-shadow: inset -1px -1px gainsboro,inset 1px 1px gray,inset -2px -2px lightgray,inset 2px 2px dimgray;
margin:0;
padding:10px;
overflow-y:auto; 
   scrollbar-color: skyblue white;
  scrollbar-width: thin;
height: 96px;
  background: lightsteelblue;
text-align: left;
  font-size: 13px;
}
#pictofieldset {
  height: 148px;
  background-image: url("https://file.garden/aJ6eFDu7_yp7XLT7/2%20backgrounds/graph_paper.png");
  margin:5px;
    font-family: "NDS BIOS";

}

li span {
  position: relative;
  left: -45px;
}

ul {
  margin-left: 10px;
    padding-left: 2px;
}

li{
  margin-left:2px;
  padding left:8px;
}

p {
margin: 5px;
margin-left: 0px;
margin-top: 15px;
  padding: 5px;
}

::marker {
  color: PaleGreen;
}


legend {
  background: var(--surface);
}
.field-row {
  display: flex;
  justify-content: flex-start;
}

[class^="field-row"] + [class^="field-row"] {
  margin-top: var(--grouped-element-spacing);
}

.field-row > * + * {
  margin-left: var(--grouped-element-spacing);
}

.field-row-stacked {
  display: flex;
  flex-direction: column;
}

.field-row-stacked * + * {
  margin-top: var(--grouped-element-spacing);
}

label {
  display: inline-flex;
  align-items: center;
}

input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  background: 0;
  position: fixed;
  opacity: 0;
  border: none;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  line-height: 13px;
}

input[type="radio"] + label {
  position: relative;
  margin-left: var(--radio-total-width);
}

input[type="radio"] + label::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--radio-total-width-precalc)));
  display: inline-block;
  width: var(--radio-width);
  height: var(--radio-width);
  margin-right: var(--radio-label-spacing);
  background: svg-load("./icon/radio-border.svg");
}

input[type="radio"]:active + label::before {
  background: svg-load("./icon/radio-border-disabled.svg");
}

input[type="radio"]:checked + label::after {
  content: "";
  display: block;
  width: var(--radio-dot-width);
  height: var(--radio-dot-width);
  top: var(--radio-dot-top);
  left: var(--radio-dot-left);
  position: absolute;
  background: svg-load("./icon/radio-dot.svg");
}

input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
  outline: 1px dotted #000000;
}

input[type="radio"][disabled] + label::before {
  background: svg-load("./icon/radio-border-disabled.svg");
}

input[type="radio"][disabled]:checked + label::after {
  background: svg-load("./icon/radio-dot-disabled.svg");
}

input[type="checkbox"] + label {
  position: relative;
  margin-left: var(--checkbox-total-width);
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--checkbox-total-width-precalc)));
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  margin-right: var(--radio-label-spacing);
}

input[type="checkbox"]:active + label::before {
  background: var(--surface);
}

input[type="checkbox"]:checked + label::after {
  content: "";
  display: block;
  width: var(--checkmark-width);
  height: var(--checkmark-width);
  position: absolute;
  top: var(--checkmark-top);
  left: calc(
    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
  );
  background: svg-load("./icon/checkmark.svg");
}

input[type="checkbox"][disabled] + label::before {
  background: var(--surface);
}

input[type="checkbox"][disabled]:checked + label::after {
  background: svg-load("./icon/checkmark-disabled.svg");
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  padding: 3px 4px;
  border: none;
  box-shadow: var(--border-field);
  background-color: var(--button-highlight);
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
  height: 21px;
}
input[type="number"] {
  /* need this 1 pixel to fit the spinner controls in box */
  height: 22px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  /* For some reason descenders are getting cut off without this */
  line-height: 2;
}

input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="email"]:read-only,
input[type="password"]:read-only,
input[type="text"]:read-only,
input[type="number"]:read-only,
textarea:disabled {
  background-color: var(--surface);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  padding-right: 32px;
  background-image: svg-load("./icon/button-down.svg");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
  border-radius: 0;
}

select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: svg-load("./icon/indicator-horizontal.svg");
  transform: translateY(-8px);
}

input[type="range"].has-box-indicator::-webkit-slider-thumb {
  background: svg-load("./icon/indicator-rectangle-horizontal.svg");
  transform: translateY(-10px);
}

input[type="range"]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: svg-load("./icon/indicator-horizontal.svg");
  transform: translateY(2px);
}

input[type="range"].has-box-indicator::-moz-range-thumb {
  background: svg-load("./icon/indicator-rectangle-horizontal.svg");
  transform: translateY(0px);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

.is-vertical {
  display: inline-block;
  width: 4px;
  height: 150px;
  transform: translateY(50%);
}

.is-vertical > input[type="range"] {
  width: 150px;
  height: 4px;
  margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0
    var(--range-spacing);
  transform-origin: left;
  transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
}

.is-vertical > input[type="range"]::-webkit-slider-runnable-track {
  border-left: 1px solid grey;
  border-right: 0;
  border-bottom: 1px solid grey;
  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
    1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
}

.is-vertical > input[type="range"]::-moz-range-track {
  border-left: 1px solid grey;
  border-right: 0;
  border-bottom: 1px solid grey;
  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
    1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
}

.is-vertical > input[type="range"]::-webkit-slider-thumb {
  transform: translateY(-8px) scaleX(-1);
}

.is-vertical > input[type="range"].has-box-indicator::-webkit-slider-thumb {
  transform: translateY(-10px) scaleX(-1);
}

.is-vertical > input[type="range"]::-moz-range-thumb {
  transform: translateY(2px) scaleX(-1);
}

.is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
  transform: translateY(0px) scaleX(-1);
}

select:focus {
  color: var(--button-highlight);
  background-color: var(--dialog-blue);
}
select:focus option {
  color: #000;
  background-color: #fff;
}

select:active {
  background-image: svg-load("./icon/button-down-active.svg");
}

a {
  color: var(--link-blue);
}

a:focus {
  outline: 1px dotted var(--link-blue);
}
a:hover {
    text-decoration: underline;
  cursor: url(https://file.garden/aJ6eFDu7_yp7XLT7/dolphin%20fav.gif),auto;
}

ul.tree-view {
  display: block;
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 6px;
  margin: 0;
}

ul.tree-view li {
  list-style-type: none;
}

ul.tree-view a {
  text-decoration: none;
  color: #000;
}

ul.tree-view a:focus {
  background-color: var(--dialog-blue);
  color: var(--button-highlight);
}

ul.tree-view ul,
ul.tree-view li {
  margin-top: 3px;
}

ul.tree-view ul {
  margin-left: 16px;
  padding-left: 16px;
  /* Goes down too far */
  border-left: 1px dotted #808080;
}

ul.tree-view ul > li {
  position: relative;
}
ul.tree-view ul > li::before {
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 6px;
  width: 12px;
  border-bottom: 1px dotted #808080;
}

/* Cover the bottom of the left dotted border */
ul.tree-view ul > li:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 7px;
  bottom: 0px;
  width: 8px;
  background: var(--button-highlight);
}

ul.tree-view details {
  margin-top: 0;
}

ul.tree-view details[open] summary {
  margin-bottom: 0;
}

ul.tree-view ul details > summary:before {
  margin-left: -22px;
  position: relative;
  z-index: 1;
}

ul.tree-view details > summary:before {
  text-align: center;
  display: block;
  float: left;
  content: "+";
  border: 1px solid #808080;
  width: 8px;
  height: 9px;
  line-height: 8px;
  margin-right: 5px;
  padding-left: 1px;
  background-color: #fff;
}

ul.tree-view details[open] > summary:before {
  content: "-";
}

ul.tree-view details > summary::marker,
ul.tree-view details > summary::-webkit-details-marker {
  content: "";
}

pre {
  display: block;
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 12px 8px;
  margin: 0;
}

code,
code * {
  font-family: monospace;
}

summary:focus {
  outline: 1px dotted #000000;
}

::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: var(--button-face);
}

::-webkit-scrollbar-track {
  background-image: svg-load("./icon/scrollbar-background.svg");
}

::-webkit-scrollbar-thumb {
  background-color: var(--button-face);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: svg-load("./icon/button-up.svg");
}
::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: svg-load("./icon/button-down.svg");
}
::-webkit-scrollbar-button:horizontal:start {
  width: 16px;
  background-image: svg-load("./icon/button-left.svg");
}
::-webkit-scrollbar-button:horizontal:end {
  width: 16px;
  background-image: svg-load("./icon/button-right.svg");
}

/** img translation **/

#centerbox
{  height: 300px;
  width: 500px;
   padding: 15px;
  display:inline-block;
  position: static;
    translate: 0px -111px;
}

#imgmove
{ 
  translate: 12px -10px;
}
#imgmove2
{ 
  translate: -9px -10px;
}

#imgmove3
{ 
  translate: 100px 25px;
}

#imgmove4
{ 
  translate: 60px 80px;
}

#topboximg1
{
  translate: -20px -9px;
}
#topboximg2
{
  translate: 19px -9px;
}

#adimg1

{
  position: absolute;
   float: left;
  translate: -210px -80px;
}
#adimg2

{
  position: absolute;
   float: right;
  translate: 310px -80px;
  
}

/// MUSIC PLAYER ///

    .musictitle-bar {
        background-color:#8eaefb
    }
 
    .player {
        width:fit-content;
        border: gray solid 1px;
        border-width: 1px 0px 0px 1px;
        margin-left:auto;
        margin-right:auto;
    }
 
    .controlimg:hover {
        cursor:point;
    }

 
<!-- below is styling to get windows 98 effect. from 98.css [https://jdan.github.io/98.css/] --> 
<style>
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
 
input[type="range"]:focus {
  outline: none;
}
 
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}
 
input[type="range"].has-box-indicator::-webkit-slider-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(-10px);
}
 
input[type="range"]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(2px);
}
 
input[type="range"]::-moz-range-thumb {
  background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  border: 0;
  border-radius: 0;
  height: 21px;
  transform: translateY(2px);
  width: 11px;
  }
 
input[type="range"].has-box-indicator::-moz-range-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(0px);
}
 
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
 
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
 
button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{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}.vertical-bar,button,input[type=reset],input[type=submit]{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]: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,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
 
.musictitle-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}
 
.musictitle-bar-controls button {background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}
 
.musictitle-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}
}
 
.musictitle-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
.musictitle-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;
}
 
 
.musicwindow, .musictitle-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}
 
.musicwindow {
  box-shadow: inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf, inset -2px -2px #808080,
    inset 2px 2px #ffffff;
  background: #8eaefb;
  padding: 3px;
  width:260px;
}
 
.musictitle-bar {
  padding: 3px 2px 3px 3px;
  background-image: url(https://file.garden/aJ6eFDu7_yp7XLT7/2%20backgrounds/water.04.jpg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.musictitle-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}
 
.musictitle-bar-controls {
  display: flex;
}
 
.musictitle-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}
 
.musictitle-bar-controls button:active {
  padding: 0;
}
 
.musictitle-bar-controls button:focus {
  outline: none;
}
 
.musictitle-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}
 
.musictitle-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}
 
.musictitle-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}
 
.musicwindow-body { margin:0px; height:98px; }
 
 
 
input[type=range] {
        -webkit-appearance: none;
        appearance:none;
        width: 100%;
    }
 
    input[type=range]:focus {
        outline: none;
    }
 
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
    }
 
 
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
    }
 
    .flex {display: flex;}
 
    .musictitlebaricon { height:14px; width:14px;}
 
 
    .songtitlewindow {
        background-color:#fff;
        box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
    }
 
    #musicplayer {
        border:2px solid silver; /* border around player */
        border-width: 2px 0px 0px 0px;
        width:160px; /* width of the player */
    }
 
    #imagestyle {
        background:silver; /* background color of player */
        border:2px solid silver; /* border around player */
        width:95px; /* width of the player */
        height:95px;
        box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
    }
 
    .ic {
    	width:90px;
        position:relative;
        bottom:1px;
        right:1px;
        overflow:hidden;
        padding:2px;
        border:2px solid transparent;
    }
 
    .songtitlearrow {
        background-size:100%;
        background-repeat:no-repeat;
        background-image:url(https://files.catbox.moe/f5e8np.png);
        height:21px;
        width:21px;
        position:relative;
        top:2px;
        left:-2px;
        border:0px solid transparent;
        border-width:0px 0px 0px 0px;
    }
 
    .songtitle {
        padding:5px; /* padding around song title */
        border-bottom:0px; /* border under song title */
        display:block;
        font-family:Pixelated MS Sans Serif;
    }
 
    .controls {
        font-size:18px !important; /* size of controls */
        text-align:center;
        width:100%;
        position:relative;
        bottom:10px;
    }
 
    .controls td {
        padding:8px 5px 0px 5px; /* padding around controls */
    }
 
    button {
        min-width:40px;
    }
 
    .seeking {
        background-color:#8eaefb; /* background color of seeking bar */
        display:flex;
        justify-content: space-evenly;
        padding:14px; /* padding around seeking bar */
    }
 
    .current-time {
        padding-right:5px;
    }
 
    .total-duration {
        padding-left:5px;
    }
 
    .controlimg {
    height:15px;
    width:15px;
    }




.buttons-n-blinkers {
  overflow: hidden;
  width: fit-content; /* just for demonstration */
  position: relative;
  width: 600px;
}

@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }
  
  100% {
    transform: translateX(100%);
  }
}

.buttons-n-blinkers > div {
  animation: marquee 80s linear infinite;
  animation-play-state: paused;
  animation-delay: -80s; /* This MUST be -duration/2 */
  width: 100%;
  min-width: fit-content;
  text-wrap: nowrap;
}

.buttons-n-blinkers > div.follower {
  position: absolute;
  top: 0;
  animation-delay: 0s;
}

.buttons-n-blinkers > div.play {
  animation-play-state: running;
}

.buttons-n-blinkers:hover > div.play {
  animation-play-state: paused;
}

 
 /*-- pictochat status stuff --*/
:root {
   /*-- sizing stuff --*/
  --p: 4; /* pixel multiplier. needs to be a unitless integer. */
  --pixel: calc(var(--p) * 1px); /* don't change this */
  --s: calc(var(--pixel) * 3); /* size of the cut. you can change the number on the right of the asterisk for a deeper or shallower cut */
  --wrapper-width: 90%; /* changes the width of the boxes. i recommend keeping the unit as %, vw, or dvw so the boxes scale relative to the page size. this will make your page mobile responsive out of the box. */
  --wrapper-max-width: 68em; /* changes the maximum width of the boxes. makes it easier to read on desktop. */

  /*-- colors --*/
  --box-text: black;
  --box-background: white;
  --box-border: rgb(249, 108, 177);

  /* "date" refers to the upper left hand section, where the username would be in the original pictochat. */
  --date-text: var(--box-border);
  --date-background: rgb(249, 108, 177, 0.3);

  --link: var(--box-border);
  --link-hover:rgb(93, 139, 227);

 

  --box-text-dark: #ddd;
  --box-background-dark: rgb(34, 34, 34);
  --box-border-dark: var(--box-border);

  --date-text-dark: var(--box-border-dark);
  --date-background-dark: var(--date-background);

  --link-dark: var(--box-border-dark);
  --link-hover-dark:var(--link-hover);
}

/*----- fonts -----*/

@font-face {
  font-family:"NDS BIOS";
  src:  url("https://files.catbox.moe/ipi8ww.woff") format("woff");
  font-weight:normal;
  font-style:normal;
}

/*----- body -----*/

* {
  cursor: url(stylus.gif) 0 32, auto;
  -webkit-font-smoothing: subpixel-antialiased; 
}

::-webkit-scrollbar {
  display: none;
}

body {
	background-size: 
		var(--unit) var(--unit),
		var(--unit) var(--unit),
		var(--unit) var(--unit),
		var(--unit) calc(var(--unit) / 24);
  background-color: var(--page-background);
	background-image: url("https://file.garden/aJ6eFDu7_yp7XLT7/2%20backgrounds/trippy3%20bg.gif")
		 
  
}

a {
  text-decoration: none;
  color: var(--link);
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

a:hover{
  color: var(--link-hover);
}

code {
  font-family: unset;
  background: var(--date-background);
}

/*----- wrapper for the messages -----*/

#wrapper {
  width: var(--wrapper-width);
  max-width: var(--wrapper-max-width);
  margin: 0 auto;
  position: relative;
}

/*----- styling for each box -----*/

.box {
  box-sizing: border-box;
  font-family: "NDS BIOS", Arial, sans-serif;
  font-size: calc(var(--pixel) * 16);
  position:relative;
  margin: calc(var(--pixel) * 16) 0;
  background-color:skyblue;
  color: var(--box-text);
  clip-path: polygon(
      var(--s) 0%, 
      calc(100% - var(--s)) 0%, 
      100% var(--s), 100% calc(100% - var(--s)), 
      calc(100% - var(--s)) 100%, 
      var(--s) 100%, 
      0% calc(100% - var(--s)), 
      0% var(--s));
}

.box:before {
  content:"";
  position:absolute;
  inset:0;
  z-index: -1;
  background: linear-gradient(45deg,var(--box-border),var(--box-border));
  --g1:#000 var(--pixel),#0000 0 calc(100% - var(--pixel)),#000 0;
  --g2:#0000   calc(0.707*var(--s)), 
        #000  0 calc(0.707*var(--s) + var(--pixel)),
        #0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
        #000  0 calc(100% - 0.707*var(--s)),
        #0000 0;
  -webkit-mask:
    linear-gradient(45deg ,var(--g2)),
    linear-gradient(-45deg,var(--g2)),
    linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
    linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
    mask:
      linear-gradient(45deg ,var(--g2)),
      linear-gradient(-45deg,var(--g2)),
      linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
      linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
}

/*----- date/username/text in the upper left styling -----*/

.date {
  float: left;
  position: relative;
  z-index: -2;
  padding: calc(var(--pixel) * 0) calc(var(--pixel) * 4);
  color: var(--date-text);
  background: var(--date-background);
  clip-path: polygon(var(--s) 0, 100% 0, 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, 0 100%, 0 var(--s));
  margin-right: calc(var(--pixel) * 3);
  line-height: calc(var(--pixel) * 18);
  margin-top: calc(var(--pixel) * -1);
  box-sizing: border-box;
}

.date:before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(45deg,var(--box-border),var(--box-border));
  --g3:#0000 0 calc(100% - var(--pixel)),#000 0;
  --g4:#0000   calc(0.707*var(--s)), 
        #000  0 calc(0.707*var(--s) + var(--pixel)),
        #0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
        #0000 0;
  -webkit-mask:
    linear-gradient(-45deg,var(--g4)),
    linear-gradient(90deg ,var(--g3)) 100% calc(100% - var(--s)) no-repeat,
    linear-gradient(180deg,var(--g3)) calc(100% - var(--s)) 100% no-repeat;
    mask:
      linear-gradient(-45deg,var(--g4)),
      linear-gradient(90deg ,var(--g3)) 100% calc(100% - var(--s)) no-repeat,
      linear-gradient(180deg,var(--g3)) calc(100% - var(--s)) 100% no-repeat;
}

/*----- styling for the message inside the box -----*/

.message {
  padding: calc(var(--pixel) * 0) calc(var(--pixel) * 4) calc(var(--pixel) * 0) calc(var(--pixel) * 4);
  line-height: calc(var(--pixel) * 18);
}

/*----- unique styles. add these classes to divs with the class "box" -----*/

.onepx {
  --pixel:1px; 
  --s:calc(var(--pixel) * 3);
  width: 340px;
  margin: 0 auto;
}

.blue {
  --date-text: rgb(93, 139, 227);
  --date-background: rgb(93, 139, 227, 0.3);
 --box-background: rgb(93, 139, 227, 0.3);
    --box-border: rgb(93, 139, 227);
  --link-hover:rgb(249, 108, 177);
  
}