/* Font for tab links & main text */
@font-face {
  font-family: "w95a";
  src: url("W95FARegular.ttf") format("truetype");
}

/* Font for window title */
@font-face {
  font-family: "dia";
  src: url("AdobeDia.ttf") format("truetype");
}

/* Fonts for start menu side logo */
@font-face {
  font-family: "FRABK";
  src: url("FRABK.ttf") format("truetype");
}
@font-face {
  font-family: "FRAHV";
  src: url("FRAHV.ttf") format("truetype");
}

/* FONTS END */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* BODY */

html,
body {
  max-width: 100vw;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #008080;
  font-size: 10px;
  color: #000;
  cursor: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20cursor.jpg"), default;
}

/* LINKS */

a,
a:hover,
a:active {
  color: #0000ff;
  cursor: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20pointer.jpg"), pointer;
}
a:visited {
  color: #800080;
}

/* LINKS END */

/* HEADERS */

h1,
h2 {
  display: block;
  margin: 0;
  font-weight: 400;
  color: #000;
  cursor: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20text%20select.jpg") 3.5 8, text;
}
h1 {
  font-family: "FRAHV";
  font-size: 4em;
  word-wrap: break-word;
}
h2 {
  font-family: "w95a";
  font-size: 1.5em;
}

/* HEADERS END */

/* CRT & TEXT FITLERS */

/* Adapted from source: http://aleclownes.com/2017/02/01/crt-display.html */

/* I understand that these filters might be a bit much so, for photosensitivity reasons, they
     are disabled on page load. Respectfully, I ask you to do the same. Feel free to completely
     disable/remove these filters if you so choose! They are purely an aesthetic choice.*/

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
      -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
      -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
      -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
      -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
      -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
      -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
      -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
      -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
      -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
      -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
      -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
      -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
      -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
      -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
      -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
      -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
      -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
      -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
}
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  z-index: 9999;
  pointer-events: none;
}
span, p, ul, a, h1, h2,
.text-animate,
.tooltiptext, .tooltiptext2, .tooltiptext3, .tooltiptext4 {
  animation: textShadow 1.8s infinite;
}
/* If you add anything else here that you want to have this shadow-effect, you will also need to add it to the corresponding toggle script for this. */
.animate-toggle {
  animation: none;
}

/* FILTERS END */

/* DESKTOP PAINT ICON */

#painticon,
#painticon:active,
#highlight {
  display: block;
  position: absolute;
  top: 1px;
  left: 10.5px;
  background-color: transparent;
  border: none;
  cursor: inherit;
/* All buttons on this page use cursor: inherit so they have the same as the default cursor as buttons
     don't inherit it automatically. Changing this will change the buttons cursor from the webpage default
     to the users default cursor.*/
}
#painticon p {
  position: relative;
  margin-top: 1px;
  font-family: "w95a";
  font-size: 12px;
  color: #fff;
  text-align: center;
}
#highlight {
  content: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/paint%20app%20icon%20overlay.svg");
  opacity: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#painticon:active #highlight,
#painticon:focus #highlight {
  opacity: 0.75;
}
#painticon:active p,
#painticon:focus p {
  background-color: #000080;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ffff00' stroke-width='2' stroke-dasharray='1%2c 1' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}
#painticon p.focus {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ff0000' stroke-width='2' stroke-dasharray='1%2c 1' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}

/* DESKTOP PAINT ICON END */

/* UNIVERSAL BORDERS */

/* A LOT of elements on this page share borders, so I decided to lump them all together rather than have them
     specified in each element. If you add more submenus, remember to add them here! */

/* Non-universal sections that reuse the same borders are placed in said sections, for ease of access. */

/* Main content, menus & submenus */

.context-menu,
#paintbox,
.start-content,
.startsub1,
.startsub2,
.startsub3,
.contextsub1,
.contextsub2,
.filesub1,
.filesub2,
.filesub3 {
  background-color: #c0c0c0;
  border: none;
  box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset, /* Outer left & outer right */
  0 1px 0 0 #c0c0c0 inset, 0 -1px 0 0 #000 inset, 2px 0 0 0 #fff inset, /* Outer top, outer bottom, & inner left */
  -2px 0 0 0 #808080 inset, 0 2px 0 0 #fff inset, 0 -2px 0 0 #808080 inset; /* Inner right, inner top, & inner bottom */
/* The following two are optional and for support of older browsers. */
  -moz-box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 0 -1px 0 0 #000 inset, 2px 0 0 0 #fff inset,
  -2px 0 0 0 #808080 inset, 0 2px 0 0 #fff inset, 0 -2px 0 0 #808080 inset;
  -webkit-box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 0 -1px 0 0 #000 inset, 2px 0 0 0 #fff inset,
  -2px 0 0 0 #808080 inset, 0 2px 0 0 #fff inset, 0 -2px 0 0 #808080 inset;
}

/* Window function & start button */

.close,
#maximize,
.restore,
.minimize,
.left,
.right,
.startbtn {
  background-color: #c0c0c0;
  border: none;
  box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
    0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
    0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
  -moz-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
    0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
    0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
  -webkit-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
    0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
    0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
  cursor: inherit;
}

/* Window function & start button (pressed) */

.close:active,
#maximize:active,
.restore:active,
.minimize:active,
.left:active,
.right:active,
.startbtn:active,
.startbtn:focus {
  background-color: #c0c0c0;
  border: none;
  box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
    0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
    0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset;
  -moz-box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
    0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
    0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset;
  -webkit-box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
    0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
    0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset;
}

/* Links hub buttons & inner palette colours */

.itembox1,
.itembox2,
.itembox3,
.itembox4,
.itembox5,
.itembox6,
.itembox7,
.itembox8,
.innercolour1,
.innercolour2 {
  background-color: #c0c0c0;
  box-shadow: 1px 0 0 0 #fff inset, 0 1px 0 0 #fff inset,
  -1px 0 0 0 #808080 inset, 0 -1px 0 0 #808080 inset;
  -moz-box-shadow:1px 0 0 0 #fff inset, 0 1px 0 0 #fff inset,
  -1px 0 0 0 #808080 inset, 0 -1px 0 0 #808080 inset;
  -webkit-box-shadow: 1px 0 0 0 #fff inset, 0 1px 0 0 #fff inset,
  -1px 0 0 0 #808080 inset, 0 -1px 0 0 #808080 inset;
}

/* White & light grey borders. */

.underinset,
.bottombox1,
.bottombox2,
.bottombox3,
.clockbox {
  box-shadow: 1px 0 0 0 #808080 inset, 0 1px 0 0 #808080 inset,
  -1px 0 0 0 #fff inset, 0 -1px 0 0 #fff inset;
  -moz-box-shadow: 1px 0 0 0 #808080 inset, 0 1px 0 0 #808080 inset,
  -1px 0 0 0 #fff inset, 0 -1px 0 0 #fff inset;
  -webkit-box-shadow: 1px 0 0 0 #808080 inset, 0 1px 0 0 #808080 inset,
  -1px 0 0 0 #fff inset, 0 -1px 0 0 #fff inset;
}

/* UNVERSAL BORDERS END */

/* CONTEXT MENU */

/* You can choose to completely omit this as using this code
      breaks functonality of the normal context (right-click) menu. 
      It's a purely stylistic choice to have! If you do choose to omit it,
      please remember to remove/hide the HTML as well. */

.context-menu {
  position: absolute;
  display: none;
  z-index: 1000;
}
.context-menu ul li ul li {
  height: 16px;
  margin-right: 20px;
  padding-left: 22px;
  line-height: 14px;
}

/* Further styling for this is together with the other
     menus, where some styling is combined together. */

/* CONTEXT MENU END */

/* TOOLTIPS */

.tooltip .tooltiptext,
.tooltip2 .tooltiptext2,
.tooltip3 .tooltiptext3,
.tooltip4 .tooltiptext4 {
  display: block;
  position: absolute;
  width: 150px;
  height: fit-content;
  background-color: #ffffe0;
  padding: 4px;
  box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 0 -1px 0 0 #000 inset;
  -moz-box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 0 -1px 0 0 #000 inset;
  -webkit-box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 0 -1px 0 0 #000 inset;
  font-family: "w95a";
  font-size: 12px;
  color: #000;
  text-align: center;
  visibility: hidden;
  z-index: 500;
}
.tooltip .tooltiptext {
  top: 100%;
  right: 0;
}
.tooltip2 .tooltiptext2 {
  bottom: 100%;
  z-index: 98;
}
.tooltip3 .tooltiptext3 {
  bottom: 100%;
  left: 100%;
  text-align: left;
}
.tooltip4 .tooltiptext4 {
  top: -50%;
  left: 100%;
}
.tooltip:hover .tooltiptext,
.tooltip2:hover .tooltiptext2,
.tooltip3:hover .tooltiptext3,
.tooltip4:hover .tooltiptext4 {
  visibility: visible;
}

/* TOOLTIPS END */

/* MAIN PAINTBOX */

#paintbox {
  display: block;
  position: absolute;
  min-width: 750px;
  min-height: 518px;
  top: 0;
  left: 75px;
}
/* Please, feel free to make this as large or as small as you would like! */
.resizable {
  max-width: 100vw;
  max-height: calc(100vh - 28px);
  overflow: hidden;
  resize: both;
}
/* Note: Changing or removing this overflow property will remove the resizability of this element. */

/* TITLE BAR */

#paintboxwindowtitle {
  display: block;
  position: absolute;
  width: calc(100% - 8px);
  height: 18px;
  top: 4px;
  left: 4px;
  background-color: #000080;
  cursor: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20move.jpg") 10.5 10.5, move;
  /* Some of the custom cursors on this page have numbers in their styling; this is so they are properly centered in their element. If you change the cursors and notice any discrepencies, change the numbers to whatever the width and height are of your new cursor(s). */
  z-index: 10;
}
#paintboxwindowtitle p {
  margin-top: -4px;
  margin-left: 1px;
  font-family: "dia";
  font-size: 1.9em;
  letter-spacing: 0.20px;
  color: #fff;
}
#paintboxwindowtitle img {
  margin-right: 3px;
  margin-bottom: -1px;
  margin-left: 1px;
}

/* CLOSE, MAX, RESTORE, & MIN BUTTONS */

.closemaxmin {
  display: block;
  position: absolute;
  width: 50px;
  height: 18px;
  top: 4px;
  right: 4px;
  z-index: 12;
}
.close,
.close:active,
#maximize,
#maximize:active,
.restore,
.restore:active,
.minimize,
.minimize:active {
  display: block;
  position: absolute;
  width: 16px;
  height: 14px;
  top: 2px;
}
.close img,
.close:active img,
#maximize img,
#maximize:active img,
.restore img,
.restore:active img,
.minimize img,
.minimize:active img {
  position: absolute;
  width: 12px;
  height: 10px;
  top: 2px;
  left: 2px;
}
.close:active img,
#maximize:active img,
.restore:active img,
.minimize:active img {
  top: 3px;
  left: 3px;
}

/* CLOSE */

.close,
.close:active {
  right: 2px;
}

/* MAX & RESTORE */

#maximize,
#maximize:active,
.restore:active,
.restore {
  right: 20px;
}

/* MINIMIZE */

.minimize,
.minimize:active {
  right: 36px;
}

/* CLOSE, MAX, RESTORE, & MIN BUTTONS END */

/* TITLE BAR END */

/* FILESTAB */

.filewrap {
  position: relative;
  overflow: hidden;
}
.filestab {
  display: inline-block;
  width: calc(100% - 30px);
  height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  margin-top: 5px;
  margin-left: 15px;
  white-space: nowrap;
  scrollbar-width: none;
}
.filestab img {
  display: inline-block;
  margin-bottom: 2px;
}
.file-open1 {
  background-color: #c0c0c0;
  padding-bottom: 3px;
  border: none;
  cursor: inherit;
}
.filestab > a,
.file-open1,
.file-open1:active,
.filestab > a:hover,
.file-open1:hover,
.file-open1:focus {
  display: inline-block;
  position: relative;
  padding-top: 2px;
  padding-right: 6px;
  padding-left: 6px;
  font-family: "w95a";
  font-size: 12px;
  letter-spacing: 0.35px;
  color: #000;
  text-align: center;
  text-decoration: none;
}
.filestab > a:hover,
.file-open1:hover,
.file-open1:focus {
  height: 18px;
  background-color: #000080;
  color: #fff;
}
.filestab > a:last-child,
.filestab > a:last-child:hover {
  margin-left: -4px;
}
.file-open1:hover img[src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/down%20arrow.svg"],
.file-open1:focus img[src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/down%20arrow.svg"] {
  -webkit-filter: invert(1);
  filter: invert(1);
}
/* Due to various conflicting choices in styling, this submenu in particular needs to stay styled separately from the rest; the display property is necessary to stay as fixed so it breaks out of overflow.*/
.filesub1 {
  display: none;
  position: fixed;
  width: 164px;
  top: 0;
  left: 0;
  z-index: 999;
}

/* As with the context-menu above, further styling for this menu is with the other submenus. */

/* FILESTAB SCROLL */

/* Below this is the coding for the arrows on either side of the
     filestab. If you don't want or need to use them, please
     remove/disable this section, as well as remove/disable
     the HTML and JS. If you remove them, you should also
     remove the overflow-x for the filestab, as well.*/

.left,
.right {
  display: inline-block;
  position: sticky;
  width: 10px;
  height: 18px;
  top: 23px;
  background-color: #c0c0c0;
  border: none;
  cursor: inherit;
  z-index: 5;
}
.left {
  left: 4px;
}
.right {
  left: calc(100% - 14px);
}
.left img,
.right img {
  margin-bottom: 2px;
}
.left:active img,
.right:active img {
  margin-bottom: 1px;
  margin-left: 1px;
}

/* FILESTAB SCROLL END */

/* FILESTAB END */

/* INNER POSITION */

.minbox {
  position: absolute;
  width: 100%;
  height: 100%;
}
.paintinner {
  display: block;
  position: absolute;
  top: 43px;
  left: 61px;
  box-shadow: 1px 0 0 0 #808080 inset, -1px 0 0 0 #fff inset, 0 -1px 0 0 #808080,
  0 1px 0 0 #fff;
  -moz-box-shadow: 1px 0 0 0 #808080 inset, -1px 0 0 0 #fff inset, 0 -1px 0 0 #808080,
  0 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 0 #808080 inset, -1px 0 0 0 #fff inset, 0 -1px 0 0 #808080,
  0 1px 0 0 #fff;
}

/* INNER POSITION END */

/* LEFT SECTION */

/* LINKS HUB */

.itemchooser {
  position: relative;
  width: 56px;
  min-height: 400px;
  float: left;
  left: 4px;
}
.itembox1,
.itembox2,
.itembox3,
.itembox4,
.itembox5,
.itembox6,
.itembox7,
.itembox8,
.itembox1:active,
.itembox2:active,
.itembox3:active,
.itembox4:active,
.itembox5:active,
.itembox6:active,
.itembox7:active,
.itembox8:active,
.itembox1:focus,
.itembox2:focus,
.itembox3:focus,
.itembox4:focus,
.itembox5:focus,
.itembox6:focus,
.itembox7:focus,
.itembox8:focus {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  top: -1px;
  left: 4px;
  border-top: none;
  border-left: none;
}
.itembox1,
.itembox2,
.itembox3,
.itembox4,
.itembox5,
.itembox6,
.itembox7,
.itembox8 {
  border-right: 1px #000 solid;
  border-bottom: 1px #000 solid;
}
.itembox1:active,
.itembox2:active,
.itembox3:active,
.itembox4:active,
.itembox5:active,
.itembox6:active,
.itembox7:active,
.itembox8:active,
.itembox1:focus,
.itembox2:focus,
.itembox3:focus,
.itembox4:focus,
.itembox5:focus,
.itembox6:focus,
.itembox7:focus,
.itembox8:focus {
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/svg%20files/transparent.svg");
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  box-shadow: 1px 0 0 0 #000 inset, 0 1px 0 0 #000 inset, 2px 0 0 0 #808080 inset,
  0 2px 0 0 #808080 inset, -1px 0 0 0 #c0c0c0 inset, 0 -1px 0 0 #c0c0c0 inset;
  -moz-box-shadow: 1px 0 0 0 #000 inset, 0 1px 0 0 #000 inset, 2px 0 0 0 #808080 inset,
  0 2px 0 0 #808080 inset, -1px 0 0 0 #c0c0c0 inset, 0 -1px 0 0 #c0c0c0 inset;
  -webkit-box-shadow: 1px 0 0 0 #000 inset, 0 1px 0 0 #000 inset, 2px 0 0 0 #808080 inset,
  0 2px 0 0 #808080 inset, -1px 0 0 0 #c0c0c0 inset, 0 -1px 0 0 #c0c0c0 inset;
}
.itembox1 img,
.itembox2 img,
.itembox3 img,
.itembox4 img,
.itembox5 img,
.itembox6 img,
.itembox7 img,
.itembox8 img {
  position: absolute;
  top: 2px;
  left: 2px;
}
.itembox1:active img,
.itembox2:active img,
.itembox3:active img,
.itembox4:active img,
.itembox5:active img,
.itembox6:active img,
.itembox7:active img,
.itembox8:active img,
.itembox1:focus img,
.itembox2:focus img,
.itembox3:focus img,
.itembox4:focus img,
.itembox5:focus img,
.itembox6:focus img,
.itembox7:focus img,
.itembox8:focus img {
  position: absolute;
  top: 3px;
  left: 3px;
}

/* LINKS HUB END */

/* FILTER TOGGLES */

.underinset {
  display: inline-block;
  position: relative;
  width: 41px;
  height: 66px;
  margin-top: 2px;
  margin-left: 8px;
}
.checkboxes {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 13px;
}
.checkboxcrt,
.checkboxtext {
  display: block;
  position: relative;
  width: 13px;
  height: 13px;
  background-color: #fff;
  margin-bottom: 14px;
  margin-left: 2px;
  border: none;
  box-shadow: 1px 0 0 0 #808080 inset, -1px 0 0 0 #fff inset,
  0 1px 0 0 #808080 inset, 0 -1px 0 0 #fff inset, 2px 0 0 0 #000 inset,
  -2px 0 0 0 #c0c0c0 inset, 0 2px 0 0 #000 inset, 0 -2px 0 0 #c0c0c0 inset;
  -moz-box-shadow: 1px 0 0 0 #808080 inset, -1px 0 0 0 #fff inset,
  0 1px 0 0 #808080 inset, 0 -1px 0 0 #fff inset, 2px 0 0 0 #000 inset,
  -2px 0 0 0 #c0c0c0 inset, 0 2px 0 0 #000 inset, 0 -2px 0 0 #c0c0c0 inset;
  -webkit-box-shadow: 1px 0 0 0 #808080 inset, -1px 0 0 0 #fff inset,
  0 1px 0 0 #808080 inset, 0 -1px 0 0 #fff inset, 2px 0 0 0 #000 inset,
  -2px 0 0 0 #c0c0c0 inset, 0 2px 0 0 #000 inset, 0 -2px 0 0 #c0c0c0 inset;
  cursor: inherit;
}
.checkboxcrt:active,
.checkboxtext:active {
  background-color: #c0c0c0;
}
.checkboxcrt p,
.checkboxtext p {
  display: block;
  position: absolute;
  width: fit-content;
  height: fit-content;
  margin-top: -8px;
  margin-left: 14px;
  padding: 1px;
  font-family: "w95a";
  font-size: 10px;
  color: #000;
}
.checkboxcrt.checked,
.checkboxtext.checked {
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/svg%20files/checkmark%207x7.svg");
  background-size: 7px 7px;
  background-position: center center;
  background-repeat: no-repeat;
}
.checkboxcrt:active p,
.checkboxtext:active p {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='1%2c 1' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}

/* FILTER TOGGLES END */

/* SEPARATORS */

.hubline,
.paletteline {
  width: 56px;
  float: left;
  left: 4px;
  border-top: 1px #808080 solid;
  border-bottom: 1px #fff solid;
  z-index: 1;
}
.hubline {
  position: relative;
  margin-top: -2px;
}
.paletteline {
  position: absolute;
  bottom: 76px;
}

/* SEPARATORS END */

/* LEFT SIDE END */

/* CANVAS & CANVAS TEXT */

.canvas {
  display: block;
  position: relative;
  min-width: 683px;
  height: 398px;
  left: 1px;
  overflow: hidden;
  background-color: #808080;
  margin-right: 2px;
  box-shadow: 0 -1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset,
  0 1px 0 0 #000 inset, 1px 0 0 0 #000 inset;
  -moz-box-shadow: 0 -1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset,
  0 1px 0 0 #000 inset, 1px 0 0 0 #000 inset;
  -webkit-box-shadow: 0 -1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset,
  0 1px 0 0 #000 inset, 1px 0 0 0 #000 inset;
}
/* If you've changed the size of the overall paintbox, you can also change the size of the canvas accordingly. The paintbox width is 67px bigger than the canvas, and the paintbox height is 120px bigger than the canvas.*/
.canvastext {
  display: inline-block;
  position: relative;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  top: 0;
  left: 4px;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  background-color: #fff;
  margin-top: 4px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  font-family: "w95a";
  font-size: 14px;
  color: #000;
  text-align: justify;
}
.canvas ul {
  display: block;
  list-style-type: disc;
  margin-top: -5px;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;
  padding-left: 25px;
  cursor: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20text%20select.jpg") 3.5 8, text;
}
.canvastext p {
  margin-top: 4px;
  margin-bottom: 10px;
  cursor: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20text%20select.jpg") 3.5 8, text;
}

/* RESIZE BOXES */

.resizewrap {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

/* The following boxes start in the bottom left corner and go around the canvas clockwise. */

.edgebox1,
.edgebox2,
.edgebox3,
.edgebox4,
.edgebox5,
.edgebox6,
.edgebox7,
.edgebox8 {
  position: absolute;
  width: 3px;
  height: 3px;
}
.edgebox1,
.edgebox2,
.edgebox3,
.edgebox4,
.edgebox5 {
  background-color: #fff;
  border-top: 1px #000080 solid;
  border-left: 1px #000080 solid;
}
.edgebox6,
.edgebox7,
.edgebox8 {
  background-color: #000080;
  border-left: 1px #000080 solid;
  border-top: 1px #000080 solid;
}
/* Bottom left */
.edgebox1 {
  top: calc(100% - 20px);
  left: 1px;
}
/* Middle left */
.edgebox2 {
  top: calc(50% - 10px);
  left: 1px;
}
/* Top left */
.edgebox3 {
  top: 1px;
  left: 1px;
}
/* Top middle */
.edgebox4 {
  top: 1px;
  left: calc(50% - 10px);
}
/* Top right */
.edgebox5 {
  top: 1px;
  left: calc(100% - 20px);
}
/* Right middle */
.edgebox6 {
  top: calc(50% - 10px);
  left: calc(100% - 20px);
}
/* Bottom right */
.edgebox7 {
  top: calc(100% - 20px);
  left: calc(100% - 20px);
}
/* Bottom middle */
.edgebox8 {
  top: calc(100% - 20px);
  left: calc(50% - 10px);
}

/* RESIZE BOXES END */

/* CANVAS TEXT END */

/* SCROLLBARS */

.scrollbarvertical,
.scrollbarhorizontal {
  display: block;
  position: absolute;
  background-color: #c0c0c0;
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/svg%20files/transparent.svg");
}
.scrollbarvertical {
  width: 16px;
  height: calc(100% - 18px);
  top: 1px;
  right: 1px;
}
.scrollbarhorizontal {
  width: calc(100% - 18px);
  height: 16px;
  bottom: 1px;
  left: 1px;
}
.scrollblock {
  display: block;
  position: absolute;
  width: 17px;
  height: 17px;
  right: 0;
  bottom: 0;
  background-color: #c0c0c0;
}
.scrollbarup,
.scrollbarup:active,
.scrollbardown,
.scrollbardown:active,
.scrollbarupdown,
.scrollbarupdown:active,
.scrollbarleft,
.scrollbarleft:active,
.scrollbarright,
.scrollbarright:active,
.scrollbarsidetoside,
.scrollbarsidetoside:active {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #c0c0c0;
  cursor: inherit;
}
.scrollbarup,
.scrollbardown,
.scrollbarupdown,
.scrollbarleft,
.scrollbarright,
.scrollbarsidetoside {
  border-top: none;
  border-right: none;
  border-bottom: 1px #000 solid;
  border-left: none;
  box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 2px 0 0 0 #fff inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #fff inset, 0 -1px 0 0 #808080 inset;
  -moz-box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 2px 0 0 0 #fff inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #fff inset, 0 -1px 0 0 #808080 inset;
  -webkit-box-shadow: 1px 0 0 0 #c0c0c0 inset, -1px 0 0 0 #000 inset,
  0 1px 0 0 #c0c0c0 inset, 2px 0 0 0 #fff inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #fff inset, 0 -1px 0 0 #808080 inset;
}
.scrollbarup:active,
.scrollbardown:active,
.scrollbarupdown:active,
/*
.scrollbarleft:active,
.scrollbarright:active,
*/
.scrollbarsidetoside:active {
  border: none;
  box-shadow: none;
  outline: 1px #808080 solid;
  outline-offset: -1px;
}
.scrollbarup,
.scrollbarup:active,
.scrollbarupdown,
.scrollbarupdown:active,
.scrollbarleft,
.scrollbarleft:active,
.scrollbarsidetoside,
.scrollbarsidetoside:active,
.scrollbarup img,
.scrollbardown img,
.scrollbarleft img,
.scrollbarright img {
  top: 0;
  left: 0;
}
.scrollbarup:active img,
.scrollbardown:active img,
/*
.scrollbarleft:active img,
.scrollbarright:active img*/ {
  margin-top: 1px;
  margin-left: 1px;
}
.scrollbardown,
.scrollbardown:active {
  bottom: 0;
  left: 0;
}
.scrollbarupdown,
.scrollbarupdown:active {
  margin-top: 16px;
}
.scrollbarright,
.scrollbarright:active {
  top: 0;
  right: 0;
}
.scrollbarsidetoside,
.scrollbarsidetoside:active {
  margin-left: 16px;
}
.scrollbarsidetoside,
.scrollbarsidetoside:active {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
/* Since the above styling occurs after all the other styling for the horizontal scrollbar,
     it overrides everything else. It shouldn't cause any problems, but if it does you can
     just remove the .scrollbarsidetoside from the styling that comes before this last section!
     I have also put the :active styling for the right and left buttons inside comment tags so they
     don't change appearance when they are clicked. Remove all this if you want to have the horizontal
     scrollbar visible again. */

/* SCROLLBARS END */

/* CANVAS & CANVAS TEXT END */

/* BOTTOM SECTION */

/* COLOUR PALETTE */

.palettearea {
  display: block;
  position: absolute;
  width: 256px;
  height: 62px;
  bottom: 12px;
  left: 4px;
}
.palettebox {
  display: block;
  position: absolute;
  width: 32px;
  height: 33px;
  top: 4px;
  left: 0;
  margin-right: 2px;
  border-top: none;
  border-bottom: 1px #fff solid;
}
.paletteselect {
  display: block;
  position: relative;
  width: 30px;
  height: 31px;
  float: left;
  top: 5px;
  left: 0;
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/svg%20files/transparent.svg");
  border-top: 1px #808080 solid;
  border-left: 1px #808080 solid;
  box-shadow: 0 1px 0 0 #000 inset, 1px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 0 0 0 white;
  -moz-box-shadow: 0 1px 0 0 #000 inset, 1px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 0 0 0 white;
  -webkit-box-shadow: 0 1px 0 0 #000 inset, 1px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 0 0 0 white;
}
.innercolour1,
.innercolour2 {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
  top: 10px;
  left: 9px;
  outline: 1px #c0c0c0 solid;
  outline-offset: -2px;
}
.innercolour1 {
  top: 11px;
  left: 10px;
  background-color: #fff;
}
.innercolour2 {
  top: -14px;
  left: 3px;
  background-color: #000;
}
.palettecoloursa,
.palettecoloursb {
  position: relative;
  float: left;
  top: 5px;
  left: 1px;
}
.palettecoloursa {
  width: 16px;
  height: 15px;
  border-top: none;
  border-right: 1px #fff solid;
  border-left: none;
  box-shadow: 0 1px 0 0 #808080 inset, 1px 0 0 0 #808080 inset,
  0 2px 0 0 #000 inset, 2px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 0 0 0 #808080;
  -moz-box-shadow: 0 1px 0 0 #808080 inset, 1px 0 0 0 #808080 inset,
  0 2px 0 0 #000 inset, 2px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 0 0 0 #808080;
  -webkit-box-shadow: 0 1px 0 0 #808080 inset, 1px 0 0 0 #808080 inset,
  0 2px 0 0 #000 inset, 2px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 0 0 0 #808080;
}
.palettecoloursb {
  width: 16px;
  height: 17px;
  border-top: 1px #fff solid;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  border-left: none;
  box-shadow: 0 1px 0 0 #808080 inset, 1px 0 0 0 #808080 inset,
  0 2px 0 0 #000 inset, 2px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 1px 0 0 #808080, 1px 0 0 0 #808080;
  -moz-box-shadow: 0 1px 0 0 #808080 inset, 1px 0 0 0 #808080 inset,
  0 2px 0 0 #000 inset, 2px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 1px 0 0 #808080, 1px 0 0 0 #808080;
  -webkit-box-shadow: 0 1px 0 0 #808080 inset, 1px 0 0 0 #808080 inset,
  0 2px 0 0 #000 inset, 2px 0 0 0 #000 inset, 0 -1px 0 0 #c0c0c0 inset,
  -1px 0 0 0 #c0c0c0 inset, 1px 1px 0 0 #808080, 1px 0 0 0 #808080;
}

/* COLOUR PALETTE END */

/* CREDITS & COORDINATES */

.bottomsection {
  display: block;
  position: absolute;
  width: calc(100% - 8px);
  bottom: 7px;
  left: 4px;
  border-top: 1px #808080 solid;
  border-right: none;
  box-shadow: 0 1px 0 0 #fff inset;
  -moz-box-shadow: 0 1px 0 0 #fff inset;
  -webkit-box-shadow: 0 1px 0 0 #fff inset;
}
.bottombox1,
.bottombox2,
.bottombox3 {
  display: inline-block;
  height: 21px;
  top: 3px;
}
.bottombox1 {
  position: relative;
  min-width: calc(100% - 251px);
  left: 4px;
}
.bottombox2,
.bottombox3 {
  position: absolute;
  width: 115px;
}
.bottombox2 {
  right: 130px;
}
.bottombox3 {
  right: 13px;
}
.bottombox1 p,
.bottombox2 p,
.bottombox3 p {
  display: inline-block;
  position: relative;
  bottom: -7px;
  left: 3px;
  font-family: "w95a";
  font-size: 12px;
  color: #000;
}
.bottombox2 p,
.bottombox3 p {
  bottom: -3px;
  left: 4px;
}
/* If you choose to change the last two boxes from showing coordinates,
     remove this second class of p styling to .bottombox2 and .bottombox3
     for proper alignment. */
.bottombox1 a {
  display: inline-block;
  bottom: 0;
  left: 2px;
  margin-right: 5px;
}
.bottombox2 img,
.bottombox3 img {
  display: inline-block;
  position: relative;
  top: 1px;
  left: 1px;
  margin-right: 0;
}

/* CREDITS & COORDINATES END */

/* BOTTOM SECTION END */

/* TASKBAR, START MENU, & SUBMENUS */

.taskbar {
  display: block;
  position: absolute;
  width: 100%;
  height: 27px;
  bottom: 0;
  background-color: #c0c0c0;
  border-top: 1px #fff solid;
  box-shadow: 0 -1px 0 0 #dfdfdf;
  -moz-box-shadow: 0 -1px 0 0 #dfdfdf;
  -webkit-box-shadow: 0 -1px 0 0 #dfdfdf;
  z-index: 200;
}

/* START BUTTON */

.startbtn,
.startbtn:active,
.startbtn:focus {
  width: 54px;
  height: 22px;
  cursor: inherit;
}
.startbtn {
  background-color: #c0c0c0;
  margin-right: -4px;
  margin-left: 0;
  box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
  0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
  -moz-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
  0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
  -webkit-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
  0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
}
.startbtn:active,
.startbtn:focus {
  box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
  0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
  0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset;
  -moz-box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
  0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
  0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset;
  -webkit-box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
  0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
  0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset;
}
.startbtn p,
.startbtn:active p,
.startbtn:focus p {
  display: inline-block;
  position: relative;
  top: 1px;
  padding-bottom: 3px;
  font-family: "w95a";
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.75px;
  color: #000;
}
.startbtn:active p,
.startbtn:focus p {
  width: 48px;
  height: 16px;
  top: 1px;
  padding-top: 1px;
  padding-left: 2px;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='1%2c 1' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}
.startbtn img {
  display: inline-block;
  position: relative;
  bottom: -1px;
  margin-right: 3px;
  margin-left: 0;
}
.startbtn span {
  display: inline-block;
  position: relative;
  bottom: 2px;
  margin-right: -1px;
}
.sidewayslogo {
  display: block;
  position: absolute;
  width: 21px;
  height: calc(100% - 6px);
  bottom: 3px;
  left: 3px;
  background-color: #808080;
  padding-bottom: 7px;
  font-family: "FRAHV";
  font-size: 2.1em;
  line-height: 21px;
  writing-mode: sideways-lr;
  color: #c0c0c0;
  z-index: 50;
}

/* START BUTTON END */

/* SUBMENUS */

/* For these example submenus, I've given them general names to describe what menu they
     apply to. You can change the names to whatever you would like to make them easier to
     style & remember which is which, if you want! The default names are self-explanatory. */

/* PARENT MENUS */

.context-menu ul,
.filestab ul,
.start-content ul {
  list-style: none;
  font-family: "w95a";
  font-size: 12px;
  color: #000;
  text-align: left;
}
.context-menu li,
.filestab li,
.start-content li {
  position: relative;
  width: calc(100% - 6px);
  left: 3px;
}
.context-menu a,
.filestab a,
.start-content a {
  color: #0000ff;
  text-decoration: none;
}
.context-menu ul li:hover,
.filestab ul li:hover,
.start-content ul li:hover {
  background-color: #000080;
  color: #fff;
}
ul li:hover > span,
ul li:hover > span a {
  color: #fff;
}
.context-menu ul li:first-child,
.filestab ul li:first-child,
.start-content ul li:first-child {
  margin-top: 3px;
}
.context-menu ul li:last-child,
.filestab ul li:last-child,
.start-content ul li:last-child {
  margin-bottom: 3px;
}
.context-menu > ul > li,
.filestab ul li  {
  height: 17px;
  margin-right: 20px;
  padding-left: 22px;
  line-height: 15px;
}
.context-menu li:hover .context-invert1,
.contextsub1 li:hover .context-invert2,
.filesub1 li:hover .file-invert1,
.filesub2 li:hover .file-invert2,
.start-content ul li:hover .start-invert1,
.startsub1 li:hover .start-invert2,
.startsub1 ul li:hover .start-invert3 {
  -webkit-filter: invert(1);
  filter: invert(1);
}

/* PARENT MENUS END */

/* START MENU */

.start {
  display: inline-block;
  position: relative;
  bottom: -2px;
  left: 2px;
  margin-right: 10px;
}
.start-content {
  display: none;
  position: absolute;
  width: 164px;
  bottom: 100%;
  z-index: 99;
}
.start-content > ul > li {
  height: 32px;
  padding-right: 0;
  padding-left: 31px;
}
.start-content ul li ul li {
  height: 20px;
  padding-right: 0;
  padding-left: 6px;
}
.start-content ul li span,
.start-content ul li ul li span {
  display: inline-block;
  position: relative;
  bottom: 4px;
}
.start-content ul li ul li span {
  bottom: 2px;
}
.start-content ul li ul li:has(span):not(:has(img)),
.start-content ul li ul li ul li:has(img[src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg"]) {
  padding-top: 5px;
  padding-left: 29px;
}
.start-content > ul > li img:first-child {
  position: relative;
  top: 4px;
  margin-right: 11px;
}
.start-content > ul > li:nth-last-child(2) {
  height: 35px;
  border-top: none;
  border-bottom: 3px #c0c0c0 solid;
  box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
  -moz-box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
  -webkit-box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
}
.start-content > ul > li:last-child {
  margin-top: 7px;
}
.start-content > ul > li > ul > li img:first-child {
  position: relative;
  top: 2px;
  margin-right: 7px;
}
.start-content ul li ul li:first-child {
  margin-top: 4px;
}
.start-content ul li ul li:last-child {
  margin-bottom: 4px;
}
.show {
  display: block;
}

/* START MENU END */

/* MENUS SEPARATORS */

/* This is for styling the separators for the filestab & context-menus. You don't 
      need to use them if you don't want, but I like how they organize the list-items! */

/* If you're confused on how to use these separators, please go to the features page of this layout. */

.context-menu > ul > li:nth-child(2),
.context-menu > ul > li:nth-child(6),
.context-menu > ul > li:nth-child(8),
.context-menu > ul > li > ul > li:nth-child(3),
.context-menu > ul > li > ul > li:nth-child(4),
.context-menu > ul > li > ul > li > ul > li:nth-child(3),
.context-menu > ul > li > ul > li > ul > li:nth-child(5),
.filestab > ul > li:nth-child(3),
.filestab > ul > li:nth-child(6),
.filestab > ul > li:nth-child(8),
.filestab > ul > li > ul > li:nth-child(3),
.filestab > ul > li > ul > li > ul > li:nth-child(2),
.filestab > ul > li > ul > li > ul > li:nth-child(4) {
  margin-top: 6px;
}
.context-menu > ul > li:first-child,
.context-menu > ul > li:nth-child(5),
.context-menu > ul > li:nth-child(7),
.filestab > ul > li:nth-child(2),
.filestab > ul > li:nth-child(5),
.filestab > ul > li:nth-child(7),
.filestab> ul > li > ul > li:nth-child(2),
.filestab > ul > li > ul > li > ul > li:nth-child(1),
.filestab > ul > li > ul > li > ul > li:nth-child(3) {
  height: 20px;
  border-top: none;
  border-bottom: 3px solid #c0c0c0;
  box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
  -moz-box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
  -webkit-box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
}
.context-menu > ul > li ul li:first-child {
  height: 16px;
}
.context-menu > ul > li > ul > li:nth-child(2),
.context-menu > ul > li > ul > li:nth-child(3),
.context-menu > ul > li > ul > li > ul > li:nth-child(2),
.context-menu > ul > li > ul > li > ul > li:nth-child(4) {
  height: 19px;
  border-top: none;
  border-bottom: 3px solid #c0c0c0;
  box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
  -moz-box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
  -webkit-box-shadow: 0 1px 0 0 #808080, 0 2px 0 0 white;
}

/* MENUS SEPARATORS END */

/* MENU POSITIONING */
 
.startsub1,
.startsub2,
.startsub3,
.contextsub1,
.contextsub2,
.filesub2,
.filesub3 {
  display: none;
  position: absolute;
  width: 167px;
  height: fit-content;
  top: -4px;
  left: calc(100% - 3px);
  background-color: #c0c0c0;
  z-index: 2;
}
/*Feel free to change the width of these submenus if you need to! */

.start-content ul li:hover .startsub1,
.start-content ul li ul li:hover .startsub2,
.start-content ul li ul li ul li:hover .startsub3,
.context-menu ul li:hover .contextsub1,
.context-menu ul li ul li:hover .contextsub2,
.filestab ul li:hover .filesub2,
.filestab ul li ul li:hover .filesub3 {
  display: block;
}
.startsub1,
.contextsub1,
.contextsub2,
.filesub2,
.filesub3 {
  top: -3px;
}

/* MENU POSITIOINING END */

/* ARROWS */

.context-open1,
.context-open2,
.file-open2,
.file-open3,
.start-open1,
.start-open2,
.start-open3 {
  position: relative;
  height: auto;
  float: right;
  margin-right: 6px;
}
.context-open1,
.file-open2,
.file-open3,
.context-open2 {
  top: 4px;
}
.start-open1 {
  top: 11px;
}
.start-open3 {
  top: 0;
}
.start-open2 {
  top: 5px;
}

/* ARROWS END */

/* CHILDREN, GRANDCHILDREN, ETC., MENUS END */

/* SUBMENUS END */

/* WINDOW TABS */

.painttab,
.painttabmin {
  display: inline-block;
  position: absolute;
  width: 160px;
  height: 22px;
  bottom: 2px;
  background-color: #c0c0c0;
  cursor: inherit;
}
.painttab {
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/svg%20files/transparent.svg");
  border: none;
  box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
  0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
  0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset, 0 3px 0 0 #fff inset;
  -moz-box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
  0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
  0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset, 0 3px 0 0 #fff inset;
  -webkit-box-shadow: 1px 0 0 0 #000 inset, -1px 0 0 0 #fff inset, 0 1px 0 0 #000 inset,
  0 -1px 0 0 #fff inset, 2px 0 0 0 #808080 inset, -2px 0 0 0 #dfdfdf inset,
  0 2px 0 0 #808080 inset, 0 -2px 0 0 #dfdfdf inset, 0 3px 0 0 #fff inset;
}
.painttabmin {
  background-image: none;
  border: none;
box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
  0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
  -moz-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
  0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
  -webkit-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #000 inset, 0 1px 0 0 #fff inset,
  0 -1px 0 0 #000 inset, 2px 0 0 0 #dfdfdf inset, -2px 0 0 0 #808080 inset,
  0 2px 0 0 #dfdfdf inset, 0 -2px 0 0 #808080 inset;
}
.painttab p,
.painttabmin p {
  display: inline-block;
  position: absolute;
  font-family: "w95a";
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.5px;
  color: #000;
}
.painttab p {
  bottom: 4px;
  left: 23px;
}
.painttabmin p {
  bottom: 5px;
  left: 23px;
  font-weight: 400;
}
.painttab img,
.painttabmin img {
  display: inline-block;
  position: absolute;
}
.painttab img {
  bottom: 2px;
  left: 4px;
}
.painttabmin img {
  bottom: 3px;
  left: 4px;
}

/* WINDOW TABS END */

/* CLOCK */

.clockbox {
  display: inline-block;
  position: absolute;
  width: 81px;
  height: 22px;
  right: 2px;
  bottom: 2px;
}
.clockbox img {
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 3px;
}
#clock {
  display: inline-block;
  position: relative;
  right: -7px;
  bottom: 3px;
  font-family: "w95a";
  font-size: 12px;
  text-align: center;
}

/* CLOCK END */

/* TASKBAR & START MENU END */

/* TEXT HIGHLIGHT */

::-moz-selection {
  color: #fff;
  background: #000080;
}
::selection {
  color: #fff;
  background: #000080;
}

/* TEXT HIGHLIGHT END */

/* END OF STYLING!!! */