@font-face {
    font-family: 'fmono';
    src: url('../assets/FreeMonoBold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('../assets/FreeMonoBold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

html {
    min-height: 100vh;
    background-image: linear-gradient(to top, #c2fcff, white);
    color: #071c2dff;
}

b {
    font-weight: normal;
    color: #008000;
}

a {
    font-weight: normal;
    color: #008000;
    text-decoration-thickness: 2px;
    text-decoration-color: #008000;
}

.disbox {
    font-family: "fmono";
    max-width: 300px;
    filter: drop-shadow(5px 5px 4px #707070);
    height: fit-content;
}

.disboxp {
    color: #000080;
    outline: solid;
    outline-width: 2px;
    outline-color: black;
    background-color: white;
    margin: 0px;
    padding: 5px;
}

.disboxh {
    background-color: #c2fcff;
    outline: solid;
    outline-width: 2px;
    margin: 0;
    margin-bottom: 2px;
    padding-left: 5px;
}

.ico {
    margin-bottom: -3px;
}

/* ─── SVG overlay ────────────────────────────────────────── */
#arrows {
  position: absolute;
  inset: 0;                    /* fill the scene */
  width: 100%;
  height: 100%;
  pointer-events: none;        /* clicks pass through to divs */
  overflow: visible;           /* arrows can leave the box if needed */
}


/* Arrow path style */
.arrow-path {
  fill: none;
  stroke: #aaa9a2;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Win32 classic scrollbar */
::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}

::-webkit-scrollbar-track {
  background: repeating-conic-gradient(
    #b0b0b0 0% 25%,
    #c8c8c8 0% 50%
  ) 0 0 / 2px 2px;
}

::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:active {
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

::-webkit-scrollbar-button {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  display: block;
  width: 17px;
  height: 17px;
}

::-webkit-scrollbar-button:active {
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

/* Up arrow */
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpolygon points='8.5,4 13,13 4,13' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Down arrow */
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpolygon points='8.5,13 4,4 13,4' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Left arrow */
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpolygon points='4,8.5 13,4 13,13' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Right arrow */
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpolygon points='13,8.5 4,4 4,13' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

::-webkit-scrollbar-corner {
  background: #c0c0c0;
}

::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
  display: none;
}