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


/* Win 98 css starts here */

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

:root {
  /* Color */
  --text-color: #222222;
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #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-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);
  --default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
  --default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
  --default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
  --default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);


  /* 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);
  --border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);

  /* Tabs */
  --border-tab: inset -1px 0 var(--window-frame),
    inset 1px 1px var(--button-face),
    inset -2px 0 var(--button-shadow),
    inset 2px 2px var(--button-highlight)
}

@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: var(--text-color);
}

button,
label,
input,
legend,
textarea,
select,
option,
table,
ul.tree-view,
.window,
.title-bar,
li[role=tab] {
  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;
  color: transparent;
  text-shadow: 0 0 var(--text-color);
  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;
}

button.default,
input[type="submit"].default,
input[type="reset"].default {
  box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
}

.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);
  text-shadow: 1px 1px var(--text-color);
}

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

@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,
input[readonly],
input[readonly] + 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: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;
}

.title-bar {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
  padding: 3px 2px 3px 3px;
  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="Minimize"],
.title-bar-controls button[aria-label].minimize {
  background-image: svg-load("./icon/minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
}

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

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

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

.title-bar-controls button[aria-label="Help"],
.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"],
.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: var(--border-status-field);
  flex-grow: 1;
  padding: 2px 3px;
  margin: 0;
}

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

fieldset {
  border-image: svg-load("./icon/groupbox-border.svg") 2;
  padding: calc(2 * var(--border-width) + var(--element-spacing));
  padding-block-start: var(--element-spacing);
  margin: 0;
}

legend {
  background: var(--surface);
}

.field-row {
  display: flex;
  align-items: center;
}

[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;
  user-select: none;
}

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;
  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="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
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"],
input[type="url"],
input[type="tel"],
input[type="search"],
select {
  height: 21px;
}
input[type="number"] {
  /* need this 1 pixel to fit the spinner controls in box */
  height: 22px;
}
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

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

input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="email"]:read-only,
input[type="url"]:read-only,
input[type="tel"]:read-only,
input[type="password"]:read-only,
input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="search"]: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="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]: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);
  box-shadow: none;
  border: none;
}

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);
}

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");
}

.window[role=tabpanel] {
  position: relative;
  z-index: 2;
}

menu[role=tablist] {
  position: relative;
  margin: 0 0 -2px 0;
  text-indent: 0;
  list-style-type: none;
  display: flex;
  padding-left: 3px;
}

menu[role=tablist] > li {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  box-shadow: var(--border-tab);
  z-index: 1;
}

menu[role=tablist] > li[aria-selected=true] {
  padding-bottom: 2px;
  margin-top: -2px;
  background-color: var(--surface);
  position: relative;
  z-index: 8;
  margin-left: -3px;
}

menu[role=tablist] > li > a {
  display: block;
  color: #222;
  margin: 6px;
  text-decoration: none;
}
menu[role=tablist] > li[aria-selected=true] > a:focus {
  outline: none;
}
menu[role=tablist] > li > a:focus {
  outline: 1px dotted #222;
}

menu[role=tablist].multirows > li {
  flex-grow: 1;
  text-align: center;
}
.sunken-panel {
  box-sizing: border-box;
  border: 2px groove transparent;
  border-image: svg-load("./icon/sunken-panel-border.svg") 2;
  overflow: auto;
  background-color: #fff;
}

table {
  border-collapse: collapse;
  position: relative;
  text-align: left;
  white-space: nowrap;
  background-color: #fff;
}

table > thead > tr > * {
  position: sticky;
  top: 0;
  height: 17px;
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  background: var(--surface);
  box-sizing: border-box;
  font-weight: normal;
  padding: 0 var(--grouped-element-spacing);
}

table.interactive > tbody > tr {
  cursor: pointer;
}

table > tbody > tr.highlighted {
  color: #fff;
  background-color: var(--dialog-blue);
}

table > tbody > tr > * {
  padding: 0 var(--grouped-element-spacing);
  height: 14px;
}

.progress-indicator {
	height: 32px;
	position: relative;
  box-shadow: var(--border-sunken-inner);
  padding: 4px 4px;
  border: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}


.progress-indicator > .progress-indicator-bar {
  height: 100%;
  display: block;
  background-color: var(--dialog-blue);
}

.progress-indicator.segmented > .progress-indicator-bar {
  width: 100%;
  background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
  background-image: linear-gradient(
    90deg,
    var(--dialog-blue) 0 16px,
    transparent 0 2px
  );
  background-repeat: repeat;
  background-size: 18px 100%;
}

.field-border {
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 2px;
}

.field-border-disabled {
  background: var(--surface);
  box-shadow: var(--border-field);
  padding: 2px;
}

.status-field-border {
  background: var(--surface);
  box-shadow: var(--border-status-field);
  padding: 1px;
}

/* Olliveen css code that i am trying to learn */

* {
  box-sizing: border-box;
}

@font-face { 
    font-family: 'PixelOperator';
    src: url('../fonts/PixelOperator.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
 
@font-face { 
  font-family: 'fontstuck';
  src: url('../fonts/fontstuck.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face { 
  font-family: 'CipherFontB';
  src: url('../fonts/CipherFontB.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} 

html {
cursor: url("/img/cursor.png"), auto;  
}

/* header font */
.header, h1, h2, h3, h4, h5, .footer  {
  font-family: 'PixelOperator';
}

/* body font */
p, li, small, .rdropdown-content, .sdropdown-content { 
  font-family: 'PixelOperator';
  font-size: 17px;
}

small { 
  font-family: 'PixelOperator';
  font-size: 15px;
}

ul {
 list-style-type: square;
 line-height: 1.15;
}

a {
  color: rgb(225, 66, 3);
  text-decoration: none;
}

a:hover {
  color: mediumvioletred;
  text-decoration: none;
}

table {
  white-space: wrap !important;
}

button { 
  border: 2px outset white;
  border-radius: 0px;
}

button:hover {
  border: 2px inset white;
  background-color: lightgray;
}

audio {
  width: 200px;
  height: 30px;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  margin-top: -2px;
  border: 1px dashed orange;
  border-radius: 20px;
} 

::-moz-selection { /* Code for Firefox */
  color: white;
  background: orangered;
}

::selection {
  color: white;
  background: orangered;
} 

::selection span {
  background: linear-gradient(to right, #ce2e37, #d2771e, #d4cb1f, #81c220, #21a184, #2582b5);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

body {
  background-image: url("/img/Illustration.png"); 
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
  background-repeat: repeat;
  image-rendering: pixelated; 
  margin: 0px;
  width: 100%;
  min-width: 900px;
}

.frame {
  pointer-events: none;
  user-select: none;
  margin-left: -70px;
}

.box {
  height: 85.5vh;
  min-height: 640px;
}

.windowwrapper {
  display: flex;
  min-height: 100%;
}

#div2 {
  height: 170px;
  width: 330px;
  right: 65px;
  top: 410px;
  text-align: center;
  position: absolute;
  z-index: 5;
}

#div1 {
  height: 500px;
  width: 318px;
  top: 200px;
  right: 200px;
  z-index: 999;
  display: none;
  position: absolute;
  z-index: 6;
}
  
#div3 {
  height: 275px;
  width: 246px;
  top: 220px;
  right: 30px;
  text-align: center;
  position: absolute;
  z-index: 3;
}

#div5 {
  height: 225px;
  width: 220px;
  top: 200px;
  left: 500px;
  text-align: center;
  position: absolute;
  z-index: 2;
}

#div5 img {
  margin: 2px;
  border: 2px groove transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
}

#div6 {
  top: 65vh;
  right: 0;
  text-align: center;
  position: absolute;
  z-index: 3;
  display: none;
}

#div7 {
  width: 320px;
  top: 60vh;
  left: 1vh;
  text-align: center;
  padding: 0px;
  position: absolute;
  z-index: 3;
}

#emptywindow {
  background-color: white;
  padding-top: 10px;
  margin: 5px;
  border: 2px groove transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;  position: relative;
}

#header4 {
  font-size: 20px;
}

#div4 {
  max-width: 960px;
  width: 100%;
  top: 25px;
  left: 30px;
  position: relative;
  z-index: 3;
  margin-right: 20px;
}

.windowwrapper2 {
  display: flex;
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  width: 100%;
  position: relative;
}

.sidethingy {
  text-align: center;
  margin-left: auto;
  margin-right: 1vh;
  margin-top: 10px;
  width: 300px;
  order: 2;
}

.topmenu {
  margin-left: 20px;
  font-size: 18px;
  display: flex;
  margin-top: -3px;
}

.msbody {
  display: flex;
}

.msnav {
  margin: 5px;
  margin-left: 15px;
}

.navcolumn {
  width: 75px;
  margin-top: 5px;
  display: flex;
}

.navcolumnrow {
  display: flex;
}

.navbuttons, .navbuttonsactive {
  width: 37px;
  height: 35px;
	background: rgb(204, 203, 203);
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px grey, inset 2px 2px #fff;
  text-align: center;
  padding-top: 2px;
}

.navbuttons img {
  width: 33px;
  text-align: center;
}

.navbuttonsactive img {
  width: 33px;
}

.navbuttonsactive:hover {
  background-image: url(/img/mspaint/buttonbg.png);
  background-size: contain;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #000000, inset -2px -2px grey, inset 2px 2px #000000;
}

.emptyboxfordecorationiguess {
  width: 60px;
  height: 210px;
  border: 2px inset white;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

hr {
  border-top: 2px solid darkgray;
  border-bottom: 2px solid white;
}

.msfooter {
  position: relative;
}

.colors {
  margin-left: 50px;
  margin-top: 10px;
  height: 40px;
}

.main {
  display: flex;
  background-image: url("/img/sun.png"), url("/img/olliveen.png"), url("/img/flowers.png"), url("/img/hearts.png"), url("/img/rainbow.png"), url("/img/stars.png"), url("/img/music1.png"), url("/img/music2.png"), url("/img/nav2.png");
  background-color: white;
  background-attachment: local, local, local, local, local, local, local, local, local;
  background-position: 720px 0px, top center, bottom right, 250px 390px, 600px 220px, 755px 1100px, 750px 450px, 245px 990px, 110px 10px;
  background-size: 130px, 200px, 300px, 100px, 150px, 50px, 50px, 55px, 90px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  color: black;
  padding: 30px;
  padding-top: 92px;
  margin-right: 10px;
  height: 520px;
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  border: 2px groove transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;  position: relative;
}

.main span {
  background: linear-gradient(to right, #ce2e37, #d2771e, #d4cb1f, #81c220, #21a184, #2582b5);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
 
.nav {
  text-align: center;
  color: white;
  padding: 10px;
  width: 100px;
  margin-left: auto;
  margin-right: 1vh;
  margin-top: 10px;
  order: 2;
}

.nav a {
  position: relative;
}

.shortcut {
position: absolute;
width: 40px;
}

.link {
  text-align: center;
  margin-left: -20px;
}

.link span {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0 5px 0 5px;
}

.link button {
  background: none;
  border: none;
}

.link button:focus {
  border: none;
}

/* Column */

.leftcolumn {
  float: left;
  height: auto;
  width: 25%;
  margin-top: -40px;
}

.rightcolumn {
  float: left;
  height: auto;
  width: 75%;
  padding-left: 25px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.welcome {
  background-image: url(/img/welcome.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  text-align: center;
  width: 300px;
  height: 250px;
  top: 420px;
  left: 1120px;
  padding: 35px;
  padding-top: 50px;
  z-index: 999;
}

.welcome p {
    margin-bottom: -10px;
}

.welcome a {
  color:rgba(56, 112, 129, 0.8);
}

.welcome a:hover {
  color:rgba(164, 88, 107, 0.8);
}

/* shrines */
.shrines, .links, .ocs {
  background-color: rgb(203, 203, 203);
  line-height: 90%;
  position: relative;
  font-size: 18px;
  border: 2px solid rgb(203, 203, 203);
  padding: 0 3px 4px 3px;
}

.shrines:hover, .links:hover, .ocs:hover {
  background-color: rgb(203, 203, 203);
  border: 2px outset white;
}

.shrines:focus, .links:focus, .ocs:focus {
  background-color: rgb(203, 203, 203);
  border: 2px inset white;
}

.sdropdown-content {
  width: 200px;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 24px;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
  z-index: 1;
}

.sdropdown-content a, .ldropdown-content a, .odropdown-content a {
  color: black;
  margin: 2px;
  padding: 5px;
  text-decoration: none;
  display: block;
}

/* links */
.ldropdown-content {
  width: 130px;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 24px;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
  z-index: 2;
}

.odropdown-content {
  width: 130px;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 24px;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
  z-index: 2;
}

.dropdown {
  position: relative;
  z-index: 20;
}

.dropdown hr {
  border-top: 2px solid darkgray;
  border-bottom: 2px solid white;
  width: 95%;
  margin: -2px auto -2px auto;
}

.show {display: block;}

details {
  margin-left:300px;
}
details:nth-of-type(2) {
  margin-left:370px
}

details summary {
  margin:3px;
  background-color: rgb(203, 203, 203);
  position: relative;
  width: fit-content;
  height: 30px;
  list-style:none;
  text-align:center;
  font-family:monospace;
  line-height:30px;
  font-size:16px;
}

details summary:hover {
  outline:2px outset rgb(223, 223, 223);
}

details[open] summary {
  outline:2px inset rgb(223, 223, 223);
}

 details .details-content{
  font-size: 18px;
  position: relative;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
  z-index: 1;
}

.details-content a {
  color: black;
  margin: 2px;
  padding: 5px;
  text-decoration: none;
  display: block;
  
}


/* Cards */
.todo {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  margin-bottom: 15px;
  border-style: solid;
  border-color: hotpink;
  border-width: 3px;
  width: 330px; 
}

.event {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-style: solid;
  border-color: gold;
  border-width: 3px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.caprisun {
  width: 200px;
}

.card2 {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  margin-bottom: 10px;
  margin-left:10px;
  margin-right: 10px;
  border-style: solid;
  border-color: turquoise;
  border-width: 3px;
}

.card2 p, h2 {
  margin-top: .5em ;
  margin-bottom: .5em ;
} 

.mebutton {
  display: flex;
  flex-direction: column;
}
 
.mybutton {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  border: 12px solid transparent;
  border-image: url(/img/rainbowborder2.png) 30% stretch;
  width: 200px;
}

.mybuttoncopy {
  background-color: rgba(255, 255, 255, 0.8);
  color: mediumseagreen;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  margin-top: -5px;
  width: 100px;
}

.latestart {
  text-align: center;
  width: 200px; 
  height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  display: block;
  border: 12px solid transparent;
  border-image: url(/img/rainbowborder2.png) 30% stretch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  object-fit: cover;
}

.art {
  margin: 0 10px 10px 10px;
}

.wrapper {
  display: flex;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: -15px;
  margin-top:-10px;
  height: auto;
}

.wrapper2 {
  display: flex;
  margin-left: 30px;
  margin-bottom: -5px;
}

.results {
  text-align: center;
  width: 220px; 
  background-color: rgba(255, 255, 255, 0.8);
  display: block;
  padding: 10px;
  padding-top: 1px; 
  border-style: solid;
  border-color: orange;
  border-width: 3px;
  margin-left: auto;
  margin-right: auto;
  margin: 11px;
}

.song {
  color: black;
  margin-right: auto;
  margin-left: auto;
  height: 230px;
  width: 230px;
  background: white;
  border: 2px groove transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
  
}

.songoftheweek {
  color: black;
  text-align: center;
  margin-top: -15px;
}

/* music player start */
      
#musicplayer{
  display: block;
  width: 310px;
}

.songtitle{
    padding: 4px; /* padding around song title */
    border-bottom: 1px solid var(--toolbarborder); /* border under song title */
    display:block;
}

.controls{
    font-size: 15px !important; /* size of controls */
    background-color: var(--contentbg); /* background color of controls */
    text-align:center;
    width:100%;
}

.controls td{
    padding: 8px 1px 0px 2px; /* padding around controls */
}

.seeking{
    display:flex;
    justify-content: space-evenly;
    padding: 8px; /* padding around seeking bar */
}

.current-time{
    padding-right: 5px;
}

.total-duration{
    padding-left: 5px;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
    color: var(--link); /* color of controls */
}

i.fas:hover{
    cursor: var(--cursorhov);
    color: var(--linkhov);
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background-color: var(--contentbg); /* background color of seeking bar - make the color same as .seeking background color */
    cursor: var(--cursorhov);
}

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

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px; /* thickness of seeking track */
    cursor: var(--cursorhov);
    background-image: url("/img/stars3.gif");
    border: 2px groove transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
}


input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: url("/img/nyancat.gif");
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    box-shadow: none;
    height: 18px;
    width: 38px;
    margin-top: -3px;
}

/* settings for firefox browsers */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px; /* thickness of seeking track */
    cursor: var(--cursorhov);
    background: white;
    border: 2px groove transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
}

input[type="range"]::-moz-range-progress {
    background-image: url("/img/stars3.gif");
    background-size: 100px;
    height: 8px; 
}

input[type=range]::-moz-range-thumb {
    background: url("/img/nyancat.gif");
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    border-radius: 0;
    transform: translateY(2px);
    height: 18px;
    width: 38px;
    cursor: var(--cursorhov);
    border:none;
}

    /* music player end */

.tune {
  display: flex; 
  align-items: center; 
  font-size: 0.5em; 
  padding: 12px; 
  border-radius: 16px; 
  background-color: #ffffff3d; 
  grid-column: 1/3
}

.tune-state {
  margin: -12px; 
  margin-right: 0; 
  height: calc(1em + 24px); 
  border-radius: inherit; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  transition: background-color 0.2s
}

.updates {
  border: 2px groove transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  margin: 3px;
  border-style: solid;
  border-width: 3px;
  height: 420px;
  overflow: auto;
}

.emptycard {
  text-align: center; 
  position: relative;
  margin-bottom: 10px;
}

.webrings {
  text-align: center; 
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.intheround a {
  color: goldenrod;
}

.intheround a:hover {
  color: rgb(199, 6, 32);
}

.hotline a {
  color: hotpink;
}

.hotline a:hover {
  color: pink;
}

.retronaut a {
  color: mediumslateblue;
}

.retronaut a:hover {
  color: mediumturquoise;
}

#transring {
  width: 244px;
  margin: auto;
}

#we_bring {
  width: 188px;
  margin: auto !important;
}

.stamps {
  text-align: center;
  width: 150px;
  height: 200px;
  overflow: hidden ;
}

.marquee__item {
  animation-duration: 50s ;
  animation-iteration-count: infinite ;
  animation-name: marquee-content ;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-delay: 3s;
}

@keyframes marquee-content {
  from {
    transform: translateY( 0% );
  }
  to {
    transform: translateY( -95% );
  }
}

.buttons {
  color: black;
  text-align: center;
  margin-bottom: 10px;
  line-height: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: left;
}

/* Footer */
.footer {
  background-image: url("/img/timebox.png");
  background-color: rgb(203, 203, 203);
  background-attachment:scroll;
  background-size: 100px;
  background-position: right;
  background-repeat: no-repeat;
  text-align: left;
  padding-top: 1px;
  padding-bottom: 10px;
  margin-top: 10vh;
  color: black;
  clear: both;
  height: 35px;
  line-height: 1px;
  border-top: 2px solid white;
  display: flex;
  position: relative;
  z-index: 90 !important;
}

/* resources */
.start { 
  background-image: url(/img/startplain.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgb(203, 203, 203);
  position: relative;
  width: 70px;
  height: 29px;
  top: 1px;
  z-index: 92 !important;
}

.start:focus {
  background-image: url(/img/startclick.png)
}

.dropup {
  line-height: normal;
  border: none;
  position: relative;
}

.dropup button {
  border: none;
}

.dropup-content {
  width: 180px;
  font-size: 16px;
  display: none;
  position: absolute;
  z-index: 20;
  margin-left: -200px;
  bottom: 20px;
  left: 201px;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
  z-index: 1;
  line-height: 25px;
  z-index: 99;
}

.dropup-content a, .expand {
  color: black;
  margin: 2px;
  padding: 5px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.dropup a:hover, .expand:hover, .dropdown a:hover, .details-content a:hover {
  background-image: linear-gradient(to right, #ce2e37, #d2771e, #d4cb1f, #81c220, #21a184, #2582b5);
}

.show {display: block;}

.dropwrapper {
  display: flex;
  position: relative;
}

.drop98 {
  color: white;
  font-weight: 900;
  position: absolute;
  transform: rotateZ(270deg);
  width: 407px;
  height: 30px;
  margin-left: 2px;
  transform-origin: 0 0;
  bottom: -28px;
  box-sizing: border-box;
  padding: 0.020rem 0.75rem;
  background-image: linear-gradient(to right,  #ce2e37, #d2771e, #d4cb1f, #81c220, #2582b5, #8f289f, #bd2f68);
}

.drop98 h3 {
  margin-top:2px;
}

.dropcontent {
  margin-left: 29px;
  width: 160px;
}

.footertext {
  margin-left: 5px;
  padding: 0 7px 0 7px;
  margin-top: 2px;
  height: 28px;
  box-shadow: inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
  background-color: white;
}

.buttontext {
  margin-left: 5px;
  padding: 0 7px 0 7px;
  margin-top: 2px;
  height: 28px;
  background: rgb(203, 203, 203);
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
  display: flex;
}

.footertext p {
  margin-top: 15px;
}

.buttontext p {
  margin-top: 0px;
}

.noimg p {
  margin-top: 15px;
}

.buttontext img {
  margin-top: 5px;
  justify-content: center;
}

.clock {
  float: right;
  order: 2;
  margin-left: auto;
  margin-top: 8px;
}

.downhere {
  text-align: center; 
  margin-left: 40%;
  margin-top: -13px;
  margin-bottom: -20px;
  width: 200px;
}

.pagedoll {
  animation: floating 3s infinite ease-in-out !important;
  position:relative;
  margin-top:150px;
  left:-70px;
  margin-right:-120px;
  z-index:10;
  height: 850px;
  cursor: pointer;
  -webkit-animation-play-state: running !important;
  -moz-animation-play-state: running !important;
  -o-animation-play-state: running !important; 
  animation-play-state: running !important;
}
  
@keyframes floating {
  0%   { top:0px;}
  50%   {top:20px;}
  100% { top:0px;}
}

#zap.squeeze {
  animation-name: squeeze;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  z-index: 10;
  position: relative;
}
  
@keyframes squeeze {
	0% { transform: scale(1,1); }
	50% { transform: scale(1.5, 0.1);  }
	100% { transform: scale(1,1); }
}


@media only screen and (max-width: 1425px) {
  .aboutmiddle {
   display: none;
  }
  .wholeabout {
    width: 1210px;
  }
  .aboutbody {  
    max-width: 1210px;
  }
  .namecard {
      margin-left: 380px !important;
  }
  .windowwrapper2 {
    flex-direction: column;
  }
  .hide {
    display: none;
  }
  .fish {
    width: 200px !important;
    left: -3px !important;
  }
}

@media only screen and (max-width: 1210px) {
  .aboutbody {
    flex-direction: column;
  }
  .aboutmiddle {
   display: inline;
  }
  .rightwrapper {
    margin-top: 170px;
  }
  .pagedoll {
    left: 500px;
    position:relative;
    margin-bottom: -1000px !important;
  }
  .namecard {
    margin-left: 200px !important;
    margin-bottom: -45px !important;
  }
  .wholeabout {
    width: 800px;
  }
  .aboutbody {  
    max-width: 800px;
  }
  .main {
    flex-direction: column;
  }
  .leftcolumn {
    order: 2;
    width: 100%;
    margin-top: 0px !important;
  }
  .rightcolumn {
    order: 1;
    width: 100%;
  }
  .mebutton {
    flex-direction: row;
    margin-bottom: -80px;
  }
  .mybutton {
    height: 255px !important;
    overflow: scroll;
  }
  .lilme {
    margin-bottom: 30px;
    margin-left: 50px;
  }
  #div3, #div2, #button3, #button2 {
    display: none;
  }
  .nav {
    margin-left: 40px;
  }
  .hidesmall {
    display: none;
  }
  .fish {
    left: -220px !important;
    width: 370px !important;
  }
}

.about {
  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0.768), rgba(0, 0, 0, 0.141)), url(/img/water-66.gif);
  background-color: black;
  background-attachment: scroll;
  background-size: 900px;
  background-position: bottom center;
  background-repeat: repeat-x;
  position: relative;
  z-index: 99 !important;
}

.wholeabout {
  max-width: 1430px;
  margin-right: auto;
  margin-left: auto;
}

.aboutbody {  
  display: flex;
  max-width: 1430px;
  position: relative;
}

.aboutmiddle {
  margin-top: -170px;
}

.leftwrapper {
  display: flex;
  margin-left: 35px;
}

.rightwrapper {
  display: flex;
  position: relative;
}

.mewrapper {
  margin-left: 5px;
  width: 400px;
}

.likeswrapper {
  width: 272px;
  margin-left: 10px;
}

.dislikeswrapper {
  margin-left: 10px;
  width: 272px;
  margin-top: -10px;
}

.ads {
  margin-top: -5px;
  margin-left: 10px;
  display: flex;
}

.slapwrapper {
  background-image: url("/img/slap.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 30px;
  margin-right: -20px;
  margin-left: -55px;
  margin-top: -10px;
  width: 350px;
  height: 230px;
  rotate: -5deg;
  z-index:5;
  position: relative;
}

.slaptext {
  font-size: 15px;
  display: flex;
  color: black;
  margin-top: 16px;
  margin-left: 77px;
  width: 180px;
  height: 92px;
  overflow: auto;
  rotate: 2deg;
}

.slaptext a {
  color: blue;
}

.slapmood {
  display: flex;
  text-align: center;
  color: black;
  padding: 0.1px;
  padding-left: 140px;
  padding-right: 60px;
  rotate: 1deg;
}

.aboutboxpink {
  background-color: black;
  color: black;
  border-style: outset;
  border-color: pink;
  border-width: 3px;
  width: 350px;
  margin-bottom: 4px;
}

.aboutheaderpink {
  display: flex;
  background: linear-gradient(to right, deeppink, pink);
  color: white;
  margin: 3px;
  padding: 0.1px;
  padding-left: 10px;
  height: 30px;
  line-height: 0px;
}

.aboutboxblue {
  background-color: black;
  color: black;
  border-style: outset;
  border-color: turquoise;
  border-width: 3px;
  width: 300px;
  margin: 2px;
}

.aboutheaderblue {
  display: flex;
  background: linear-gradient(to right, #0489ba, turquoise);
  color: white;
  margin: 3px;
  padding: 0.1px;
  padding-left: 10px;
  height: 30px;
  line-height: 0px;
}

.aboutboxyellow {
  background-color: black;
  color: black;
  border-style: outset;
  border-color: gold;
  border-width: 3px;
  width: 265px;
  margin: 2px;
}

.aboutheaderyellow {
  display: flex;
  background: linear-gradient(to right, orange, gold);
  color: white;
  margin: 3px;
  padding: 0.1px;
  padding-left: 10px;
  height: 30px;
  line-height: 0px;
}

.aboutboxgreen {
  background-color: black;
  color: black;
  border-style: outset;
  border-color: chartreuse;
  border-width: 3px;
  width: 260px;
  margin-left: -10px;
}

.aboutheadergreen {
  display: flex;
  background: linear-gradient(to right, seagreen, chartreuse);
  color: white;
  margin: 3px;
  padding: 0.1px;
  padding-left: 10px;
  height: 30px;
  line-height: 0px;
}

.aboutboxorange {
  background-color: black;
  color: black;
  border-style: outset;
  border-color: orange;
  border-width: 3px;
  z-index: -1;
  width: 200px;
  margin: 2px;
  margin-top: -50px;
  margin-bottom: 4px;
}

.aboutheaderorange {
  display: flex;
  background: linear-gradient(to right, orangered, orange);
  color: white;
  margin: 3px;
  padding: 0.1px;
  padding-left: 10px;
  height: 30px;
  line-height: 0px;
}

.headertext {
  width: 92%;
  margin-top: -4px;
  z-index: 5;
}

.close {
  background-image: url("/img/X.png");
  background-size: 22px;
  background-repeat: no-repeat;
  width: 22px;
  margin-top: 4px;
  margin-right: 4px;
}

.fastfacts {
  color: white;
  padding-right: 15px;;
  width: 200px;
  height: 428px;
  overflow: auto;
}

.fastfacts img {
  width: 70px;
}

.abouttext {
  color: white;
  margin-left: 10px;
  padding-right: 10px;
}

#questionnaire {
  height: 255px;
  overflow: auto;
}

#questionnaire h3 {
  text-decoration: underline;
}

#questionnaire span {
  color: #ff6d9e;
}

#questionnaire a {
  color: greenyellow;
}

#questionnaire a:hover {
  color: orange;
}

.namecard {
  color: black;
  width: 500px;
  margin-left: 480px;
  margin-bottom: -15px;
  position: relative;
  z-index: 9; 
}

#pet {
  display:none;
  width: 200px;
  text-align: center;
  z-index:99;
  position: absolute;
  top: -25px;
}

.pesterchum {
  display: flex;
  position: relative;
  top: -135px;
  left: 150px;
  margin-bottom: -100px;
  width: 400px;
  z-index: 5;
}

.cbox {
  background-color: #ffb700;
  border-style: solid;
  border-color: #fff700;
  border-width: 2px;
  height: 300px;
  font-style: bold;
  padding: 5px;
  padding-top: 10px;
  font-family: 'fontstuck';
  font-size: 10px;
}

.pesterlog {
  border: 2px solid #c48a00;
  margin-top: 5px;
}

.chums {
  padding: 3px;
  background-color: black;
  width: 178px;
  height: 70px;
  line-height: 5px;
  position: relative;
  top: -245px;
  left: 162px;
  z-index: 4;
  margin-bottom: -120px;
}

.fish {
  position:relative;
  top:-80px;
  left:-220px;
  margin-bottom:-80px;
  width: 370px;
}

.fish img {
  height: 50px;
}

.cipher {
  font-family: 'CipherFontB';
  font-size: 20px;
  color: white;
  position: relative;
  left: 200px;
  width: 100px;
}

#statuscafe {
  padding: .5em;
}
#statuscafe-username {
  color: slategray;
  margin-bottom: .04em;
}
#statuscafe-content {
  margin-bottom: 30px;
}