.about_test label,
.about_test input
{
  color:black!important;
}

@font-face {
  font-family: 'chicago';
  src: url('fonts/ms-sans-serif-1.otf');
  xsrc: url('fonts/Grand9K.ttf');
  font-weight: normal;
  font-style: normal;
}

body, div, p,
button,
label,
input,
legend,
textarea,
select,
option,
table,
ul.tree-view,
.window,
.title-bar,
pre{
  font-family: chicago!important;
}

body {
  maxrgin: 0;
  color: var(--ink);
  /*ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* monospace for body */
  background-color: #4AADA5 !important;
  /*url("https://files.catbox.moe/5q4kpx.png") repeat center top fixed; /* tiled background */
  image-rendering: pixelated;
  /* crisp retro look for bitmaps */
}


.align_container {
  width: 100%;
}

.in_container {
  margin-left: auto;
  margin-right: auto;
}

.xjuchi_face {
  width: 150px;
}

.xjuchi_about {
  width: 250px;
}

.about_container {
  display: flex;
  margin-bottom: 12px;
}

.window-body {
  display: block;
  /*! align-items: flex-start; */ /* Aligns items at the top */
  /*! gap: 1rem; */              /* Space between image and text */
}

.juchi_face {
  max-width: 140px; /* Or whatever width you want */
  height: auto;
  display: block;
}

.juchi_about {
  /*! flex: 1; */ /* Takes remaining space */
  margin-left: 20px;
  width: 100%;
  display: block;
  margin-top: 22px;
}

.juchi_about ul li::marker {
  content: "- ";             /* Asterisk symbol */
  font-family: Chicago, sans-serif;
  font-size: 1.2em;
}


.juchi_about input{
  width: 60px;
}



/* FOLDERS*/

.folder-grid {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  padding: 1rem;
}

.folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*! margin-left: 17px; */
}

.folder-icon {
  width: 42px;
  /*! height: 48px; */
  /*! margin-bottom: 0.5rem; */
  /*! border: 2px solid #000; */
  /*! image-rendering: pixelated; */
  padding-left: 4.5px;
  padding-right: 4.5px;
}

bodyx {
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
}


/* Temporary colors */
.bg1 { /*! background-color: lightblue; */ }
.bg2 { background-color: lightgreen; }
.bg3 { background-color: khaki; }
.bg4 { background-color: pink; }

.folder-name {
  font-size: 11px;
  text-align: center;
  /*! font-family: "chicago", sans-serif; */
}

.address_bar {
  border: 0;

  /* outer border lines */
  border-top:    1px solid #808080; /* gray top */
  border-left:   1px solid #808080; /* gray left */
  border-bottom: 1px solid #ffffff; /* white bottom */
  border-right:  1px solid #ffffff; /* white right */

  /* inner bevel lines */
  box-shadow:
    inset  0  1px 0 #ffffff, /* white inside top */
    inset  1px 0 0 #ffffff,  /* white inside left */
    inset -1px 0 0 #808080,  /* gray inside right */
    inset  0 -1px 0 #808080; /* gray inside bottom */
}

.address_divider {
  width: 3.1px;                 /* a little wider so the bevel shows */
              /* spacing around it */
     /* nearly full bar height */

  background: linear-gradient(
    to right,
    #ffffff 0%,    /* left edge = white */
    #c0c0c0 50%,   /* middle = mid gray */
    #808080 100%   /* right edge = dark gray */
  );
  margin-left: 3px;
  height: 17px;
  margin-top: 3px;
  margin-right: 4px;
}


/*.about_test input {
  width: 100%;
}

.about_test label {
  width: 50%;
}*/


.testimg {
  border: 1px solid #000;       /* inner black */
  outline: 1px solid #808080;   /* outer gray */
  outline-offset: 0;            /* sits flush against the border */
  display: inline-block;        /* keeps sizing predictable for imgs */
  width: 99%;
  margin-bottom:10px;
  margin-top: 20px;
}


button.default{
  margin-top: 5px;
  float: right;
}


/* TERMINAL */

/* Win98-looking shell in a 98.css sunken panel */
.cmd98 {
  background: #000;
  color: #c0c0c0;                /* switch to #00ff00 for green-on-black */
  colorx: #4aada5;
  padding: 6px 8px;
  height: 70px;                 /* adjust height for your gap */
  overflow: auto;                /* classic scrollbars if content grows */
  width: 174px;
  font-size: 11px;
  margin-top: 11px;
}

.cmd98__out {
  margin: 0;
  white-space: pre;              /* preserve spacing like a real console */
}

/* blinking block cursor */
.cursor {
  display: inline-block;
  width: 8px;
  height: 12px;
  background: currentColor;
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink { 50% { opacity: 0; } }


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

span#langselect label{
  margin-top: 10px;
  margin-right: : 2px;
}




/* FOLDERS */
/* Base tile */
.folder {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /*! width: 96px; */                 /* icon slot size */
  padxding: 6px 8px;
  marxgin: 6px;
  user-select: none;
  cursor: default;
  border: 1px solid transparent;  /* becomes bevel on hover */
  background: transparent;
}

/* Hover = raised button (Win98 rollover) */
.folder:hover {
  background: var(--button-face, #d4d0c800);
  border-top-color:   var(--button-highlight, #ffffff);
  border-left-color:  var(--button-highlight, #ffffff);
  border-right-colxor: var(--button-shadow,   #808080);
  border-bottom-coxlor:var(--button-shadow,   #808080);
}

/* Optional: dotted focus rectangle on hover */
.folder:hover::after {
  content: "";
  position: absolute;
  inset: 0px;
  border: 1px dotted #000;
  pointer-events: none;
}

/* Pressed (mouse down) = sunken */
.folder:active {
  background: var(--button-face, #c0c0c080);
  border-top-colorx:   var(--button-shadow,   #808080);
  border-left-colorx:  var(--button-shadow,   #808080);
  border-right-color: var(--button-highlight, #ffffff);
  border-bottom-color:var(--button-highlight, #ffffff);
}
.folxder:active .folder-icon { transform: translate(1px,1px); } /* tiny nudge */

div.scripts{
  padding-top: 10px;
}

.scripts {
  user-select: none;      /* Prevents text selection */
  cursor: pointer;        /* Makes it look clickable */
}


.displaynone {
  display: none!important;
}