* {
  margin: 0;
  padding: 0;
}


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



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





/* DESKTOP ICON 1*/

#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: "W95FARegular";
  font-size: 12px;
  color: #fff;
  text-align: center;
}
#highlight {
  content: url(" ");
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#painticon1:active #highlight,
#painticon1: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 {

}

/* DESKTOP ICON 1 END */



/* DESKTOP ICON 2*/

#painticon2,
#painticon2:active,
#highlight2 {
  display: block;
  position: absolute;
  top: 51px;
  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.*/
} 
#painticon2 p {
  position: relative;
  margin-top: 1px;
  font-family: "W95FARegular";
  font-size: 12px;
  color: #fff;
  text-align: center;
}
#highlight2 {
  content: url(" ");
  opacity: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#painticon2:active #highlight2,
#painticon2:focus #highlight2 {
  opacity: 0.75;
}
#painticon2:active p,
#painticon2: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 {

}

/* DESKTOP ICON 2 END */



/* DESKTOP ICON 3 */

#painticon3,
#painticon3:active,
#highlight3 {
  display: block;
  position: absolute;
  top: 100px;
  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.*/
} 
#painticon3 p {
  position: relative;
  margin-top: 1px;
  font-family: "W95FARegular";
  font-size: 12px;
  color: #fff;
  text-align: center;
}
#highlight3 {
  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;
}
#painticon3:active #highlight2,
#painticon3:focus #highlight2 {
  opacity: 0.75;
}
#painticon3:active p,
#painticon3: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 {

}

/* DESKTOP ICON 3 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,

/* UNVERSAL BORDERS 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: "W95FARegular";
  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 */



/* 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: "W95FARegular";
  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 */



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


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


/* 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: "W95FARegular";
  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(97% - 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: "W95FARegular";
  font-size: 12px;
  color: #000;
  text-align: left;
}
.context-menu li,
.filestab li,
.start-content li {
  position: relative;
  width: calc(81% - 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: 7px;
}
.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;
  top: 3px
}
.start-content {
  display: none;
  position: absolute;
  width: 164px;
  bottom: 100%;
  z-index: 99;
  height: 209px;
}
.start-content > ul > li {
  padding-right: 0;
  padding-left: 32px;
}
.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: 6px;
}
.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: -1px;
  margin-right: 7px;
}
.start-content > ul > li:nth-last-child(2) {
  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: 1px;
}
.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: 5px;
}
.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: "W95FARegular";
  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 {
  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;
}

.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: 4px;
  font-family: "W95FARegular";
  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!!! */