Windows95 Paint Layout

HTML

              
                	<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    
    </head>
<body>
  <div class="crt"></div>
  <div id="contextMenu" class="context-menu">
    <ul>
      <li><span>This is a custom context menu!</span></li>
      <li><span>Please do note that using this BREAKS a regular right click menu</span></li>
      <li><span>i.e., you can't right click a selection to copy it :/</span></li>
      <li><span>However, keyboard shortcuts and ALT shortcuts work :3</span></li>
      <li><span>I recommend adding links or small pieces of info here!</span></li>
      <li><span><a href="https://duckduckgo.com">Element link</a></span></li>
      <li>
        <span><a href="#">Example sub</a></span><img class="context-open1 context-invert1" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="an all black arrow pointing to the right">
        <ul class="contextsub1">
          <li><span>Example</span></li>
          <li><span><a href="#">Example with link</a></span></li>
          <li>
            <span>Example with sub</span><img class="context-open2 context-invert2" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the right">
            <ul class="contextsub2">
              <li><span>Example</span></li>
              <li><span>Example</span></li>
              <li><span><a href="#">Example with link</a></span></li>
              <li><span><a href="#">Example with link</a></span></li>
              <li><span>Example</span></li>
            </ul>
          <li><span>Example</span></li>
          <li><span>Example</span></li>
        </ul>
      <li><span>Paint 95 Layout ver. 1.0 ⁓ 2024</span></li>
    </ul>
  </div> <!-- CONTEXT-MENU -->

  <section id="content">

    <div id="painticon" tabindex="0">
      <button id="painticon">
        <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/paint%20app%20icon.svg" width="32px" height="31px" alt="the  Windows95 paint icon. it's a colour palette with pink, green, red, and blue paint splotches on it">
        <p tabindex="0">Paint</p>
      </button>
      <div id="highlight"></div> <!-- HIGHLIGHT -->
    </div> <!-- PAINT ICON -->
    <div id="paintbox" class="resizable">
      <div id="paintboxwindowtitle">
        <p><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon">untitled - Paint</p>
      </div> <!-- PAINT TITLE -->
      <div class="closemaxmin">
        <div class="tooltip">
          <button aria-label="Close" class="close"><span class="tooltiptext">Close the current window</span><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/close%20button.svg" width="12px" height="10px" alt="a black X"></button>
        </div> <!-- TOOLTIP -->
        <div class="tooltip">
          <button aria-label="Maximize" id="maximize"><span class="tooltiptext">Maximize the current window</span><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/max%20button.svg" width="12px" height="10px" alt="a black maximize icon"></button>
        </div> <!-- TOOLTIP -->
        <div class="tooltip">
          <button aria-label="Minimize" class="minimize"><span class="tooltiptext">Minimize the current window</span><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/min%20button.svg"width="12px" height="10px" alt="a black minimize icon"></button>
        </div> <!-- TOOLTIP -->
      </div> <!-- MIN MAX CLOSE -->
      <div class="minbox">
        <div class="filewrap">
          <button class="left" onclick="leftScroll()"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/left%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the left"></button>
          <button class="right" onclick="rightScroll()"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the right"></button>
          <div class="filestab">
            <a href=""><u>F</u>ile</a><a href=""><u>E</u>dit</a><a href=""><u>V</u>iew</a><a href=""><u>I</u>mage</a><a href=""><u>O</u>ptions</a><a href=""><u>H</u>elp</a><button class="file-open1 text-animate"><u>C</u>lick Me! <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/down%20arrow.svg" width="7px" height="4px" alt="a black triangle pointing down"></button>
            <ul class="filesub1">
              <li><span>Example</span></li>
              <li><span>Example</span></li>
              <li><span><a href="">Example with link</a></span></li>
              <li>
                <span>Example with sub</span>
                <img class="file-open2 file-invert1" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the right">
                <ul class="filesub2">
                  <li><span><a href="">Example with link</a></span></li>
                  <li><span><a href="#">Example with link</a></span></li>
                  <li>
                    <span>Example with sub</span>
                    <img class="file-open3 file-invert2" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the right">
                    <ul class="filesub3">
                      <li><span><a href="">Example with link</a></span></li>
                      <li><span><a href="#">Example with link</a></span></li>
                      <li><span>Example</span></li>
                      <li><span>Example</span></li>
                    </ul>
                  </li>
                  <li><span>Example</span></li>
                </ul>
              </li>
              <li><span>Example</span></li>
              <li><span>Example</span></li>
              <li><span><a href="#">Example with link</a></span></li>
              <li><span><a href="#">Example with link</a></span></li>
            </ul>
          </div> <!-- FILESTAB -->
        </div> <!-- FILEWRAP -->
        <div class="hubline"></div>  <!-- HUBLINE -->
        <div class="itemchooser">
	<button class="itembox1  tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox1  tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox2  tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox2 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox3 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox3 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox4 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox4 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox5 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox5 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox6 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox6 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox7 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox7 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox8 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button><button class="itembox8 tooltip4"><a href="#" target="_blank"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/heart%20icon.svg" width="20px" height="20px" alt="a pink pixel art heart"><span class="tooltiptext4">Sample tooltip</span></a></button>
          <div class="underinset">
            <div class="checkboxes">
              <button class="checkboxcrt" onclick="this.classList.toggle('checked')">
                <p class="outline">CRT filter</p>
              </button>
              <button class="checkboxtext" onclick="this.classList.toggle('checked')">
                <p>Text filter</p>
              </button>
            </div> <!-- CHECKBOXES -->
          </div> <!--UNDER INSET -->
        </div> <!-- ITEM CHOOSER -->
        <div class="paintinner">
          <div class="canvas">
            <div class="resizewrap">
              <span class="edgebox1"></span>
              <span class="edgebox2"></span>
              <span class="edgebox3"></span>
              <span class="edgebox4"></span>
              <span class="edgebox5"></span>
              <span class="edgebox6"></span>
              <span class="edgebox7"></span>
              <span class="edgebox8"></span>
              <div class="canvastext">
                  <h1><font style="font-family: 'Times New Roman';">Welcome to</font> <font style="letter-spacing: -3.5px;">Windows</font><font style="font-family:'FRABK';">95</font>!</h1>

                   <p><h2>Sample header</h2></p>
                   <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Massa suscipit facilisi odio sem id dictum senectus. Maecenas eu consectetur tempus commodo integer lacus. Maecenas primis pulvinar inceptos sapien rhoncus lobortis tempus. Nisi curabitur consectetur hac mus rhoncus consectetur pulvinar. Mollis lacinia erat; pharetra dignissim parturient elementum. Platea phasellus nostra sapien tempus aptent vulputate augue.</p>

                   <p>Urna praesent aenean interdum habitasse sed ante. Aliquam quam eros metus dictumst; dis curabitur sed. Porta nisi nisi vestibulum; sagittis porttitor risus. Erat turpis nunc hendrerit litora nascetur fames. Nascetur integer mi ullamcorper sociosqu viverra. Aenean litora ornare suscipit donec maximus elit. Phasellus aptent mollis inceptos nullam tempor cras gravida facilisis. Fusce eget commodo luctus vel sed nascetur lacus consequat sapien. Etiam ligula taciti etiam venenatis risus.</p>

                   <p>Nisl tortor platea elementum eu dolor. Imperdiet efficitur enim etiam nam purus dis donec erat. Mattis ante hac etiam tempus aptent lacinia luctus turpis. Neque ridiculus efficitur nullam magna interdum purus faucibus. Consectetur pulvinar augue ultrices, per imperdiet magna habitasse ligula. Facilisis dictum laoreet litora eu tincidunt.</p>

                   <p>Facilisi porttitor fringilla magnis vestibulum molestie. Suscipit a ac, nullam hac purus facilisis senectus. Condimentum ut nostra hendrerit fames nascetur elit nunc consequat? Porttitor est laoreet eleifend eleifend dapibus placerat torquent ante purus. Congue auctor orci at mi vulputate felis vestibulum orci felis. Vel mattis nunc tempor magna fusce nostra. Ligula varius habitasse rutrum nostra ad nec. Sapien facilisi dignissim pretium euismod placerat pharetra.</p>

                   <p>Porttitor fames integer est pulvinar vivamus facilisis facilisi fringilla. Dolor gravida ex sit sem morbi. Quam class venenatis lorem; adipiscing habitasse cubilia quam. Vitae ad curabitur diam mollis mattis ut inceptos lorem ornare. Posuere eu faucibus facilisis ut commodo quisque himenaeos. Integer metus eros risus arcu fusce gravida, accumsan ultricies nunc. Nulla sociosqu lectus donec fusce dictumst tempus, tempus sagittis.</p>

                   <p>Magna nostra sit ut sem pulvinar porttitor ridiculus. Varius velit suspendisse elit hendrerit enim feugiat nam. Parturient mollis torquent sociosqu suspendisse faucibus sodales nulla. Iaculis mus aliquet dapibus magnis fames; cras ultricies facilisi. Vehicula montes gravida pulvinar congue ante. Nibh ridiculus consequat fusce quis ullamcorper a augue aliquam imperdiet. Lorem suscipit massa et erat sem eget. Blandit scelerisque himenaeos pulvinar cubilia nunc sociosqu morbi. Suspendisse cras etiam nec potenti, ultrices ipsum porta.</p>

                   <p>Nisi vel nostra pharetra nisi venenatis tincidunt non mauris. Rutrum per fermentum sollicitudin mollis pharetra pulvinar tincidunt erat. Convallis consequat quis taciti phasellus, conubia bibendum erat vehicula. Litora habitant nullam vestibulum nunc gravida volutpat integer lobortis. Leo nibh faucibus cubilia tempus cursus fringilla convallis metus. Metus viverra senectus tortor erat phasellus.</p>

                   <p>Curae tincidunt orci placerat sem ad. Enim libero malesuada eget leo vitae ex. Velit efficitur luctus faucibus faucibus rutrum. Quam tincidunt odio himenaeos conubia penatibus. Taciti commodo varius tellus tristique; hac scelerisque. Tempor potenti ex diam duis sed quam. Imperdiet inceptos massa ridiculus eget nec quisque dignissim potenti parturient.</p>

                   <p>Sagittis maximus turpis quisque rutrum nostra natoque ipsum. Fringilla aliquam luctus curabitur; vehicula vivamus cras lobortis. Facilisis nullam neque dictum vehicula metus adipiscing. Dolor senectus lacinia rhoncus etiam fermentum. Varius netus viverra curae sem fringilla rutrum fringilla mollis. Auctor interdum quisque vel cras litora.</p>

                   <p>Nostra litora potenti, amet erat vehicula proin lacinia. Ac dis lectus; turpis quisque eleifend sollicitudin vulputate curae. Aenean libero volutpat habitasse ullamcorper dis aliquam malesuada torquent aliquam. Nulla viverra nostra bibendum suspendisse cursus facilisis. Pellentesque tellus conubia viverra praesent lacinia. Rhoncus curae porta nam tristique taciti. Eu potenti congue, amet gravida felis facilisi nisi cubilia. Pellentesque gravida blandit felis proin luctus suscipit primis hendrerit.</p>
              </div> <!-- RESIZE WRAP -->
            </div> <!-- CANVAS TEXT -->
            <div class="scrollblock"></div> <!-- SCROLLBLOCK -->
            <div class="scrollbarvertical">
              <button class="scrollbarup up" onclick="upScroll()"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/up%20scroll.svg" width="16px" height="16px" alt="a black triangle pointing up"></button>
              <button class="scrollbarupdown" id="scrollBar"></button>
              <button class="scrollbardown down" onclick="downScroll()"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/down%20scroll.svg" width="16px" height="16px" alt="a black triangle pointing down"></button>
            </div> <!-- SCROLLBAR VERT -->
            <div class="scrollbarhorizontal">
              <button class="scrollbarleft"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/left%20scroll%20inactive.svg" width="16px" height="16px" alt="a black triangle pointing left"></button>
              <button class="scrollbarsidetoside"></button>
              <button class="scrollbarright"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20scroll%20inactive.svg" width="16px" height="16px" alt="a black triangle pointing right"></button>
            </div> <!-- SCROLLBAR HORI -->
          </div> <!-- CANVAS -->
        </div> <!-- PAINT INNER -->
        <div class="paletteline"></div> <!-- PALETTELINE -->
        <div class="palettearea">
          <div class="palettebox"></div> <!-- PALETTEBOX -->
          <div class="paletteselect">
            <div class="innercolour1"></div> <!-- INNERCOLOUR1 -->
            <div class="innercolour2"></div> <!-- INNERCOLOUR2 -->
          </div> <!-- PALETTESELECT -->

          <!-- TOP ROW PALETTE COLOURS -->
          <span style="background-color: #000000;" class="palettecoloursa"></span>
          <span style="background-color: #808080;" class="palettecoloursa"></span>
          <span style="background-color: #800000;" class="palettecoloursa"></span>
          <span style="background-color: #808000;" class="palettecoloursa"></span>
          <span style="background-color: #008000;" class="palettecoloursa"></span>
          <span style="background-color: #008080;" class="palettecoloursa"></span>
          <span style="background-color: #000080;" class="palettecoloursa"></span>
          <span style="background-color: #800080;" class="palettecoloursa"></span>
          <span style="background-color: #808040;" class="palettecoloursa"></span>
          <span style="background-color: #004040;" class="palettecoloursa"></span>
          <span style="background-color: #0080ff;" class="palettecoloursa"></span>
          <span style="background-color: #004080;" class="palettecoloursa"></span>
          <span style="background-color: #4000ff;" class="palettecoloursa"></span>
          <span style="background-color: #804000;" class="palettecoloursa"></span>

          <!-- BOTTOM ROW PALETTE COLOURS -->
          <span style="background-color: #fff" class="palettecoloursb"></span>
          <span style="background-color: #c0c0c0" class="palettecoloursb"></span>
          <span style="background-color: #ff0000" class="palettecoloursb"></span>
          <span style="background-color: #ffff00" class="palettecoloursb"></span>
          <span style="background-color: #00ff00" class="palettecoloursb"></span>
          <span style="background-color: #00ffff" class="palettecoloursb"></span>
          <span style="background-color: #0000ff" class="palettecoloursb"></span>
          <span style="background-color: #ff00ff" class="palettecoloursb"></span>
          <span style="background-color: #ffff80" class="palettecoloursb"></span>
          <span style="background-color: #00ff80" class="palettecoloursb"></span>
          <span style="background-color: #80ffff" class="palettecoloursb"></span>
          <span style="background-color: #8080ff" class="palettecoloursb"></span>
          <span style="background-color: #ff0080" class="palettecoloursb"></span>
          <span style="background-color: #ff8040" class="palettecoloursb"></span>
          <!-- END OF PALETTE COLOURS -->
        </div> <!-- PALETTEAREA -->
        <div class="bottomsection">
          <div class="bottombox1">
            <p>Layout © Luna, 2024 // modeled after the Windows95 Paint Window // <a class="tooltip2" href="https://pixelmoondust.neocities.org/" target="_blank"><span class="tooltiptext2">Pixel Moondust (neocities)</span>PixelMoondust</a>
          <!-- Please do not delete my credits!!!!! -->
          </div> <!-- BOTTOMBOX 1-->
          <div class="bottombox2">
            <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/svg%20files/pixel%20coordinates.svg" width="15px" height="15px" alt="the Windows95 icon for coordinates inside the paint window"><p></p>
          </div> <!-- BOTTOMBOX2 -->
          <div class="bottombox3">
            <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/svg%20files/box%20size.svg" width="15px" height="15px" alt="the Windows95 icon for the size of a clicked and dragged area"><p></p>
          </div> <!-- BOTTOMBOX3 -->
        </div> <!-- BOTTOMSECTION -->
      </div> <!-- PAINTBOX -->
    </div> <!-- MINBOX -->
    <div class="taskbar">
      <div class="start">
        <button onclick="myFunction()" class="startbtn">
          <p><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/windows%20start%20logo.svg" width="16px" height="14px" alt="the Windows95 logo"><span>Start</span></p>
        </button>
        <div id="myDropdown" class= "start-content">
          <div class="sidewayslogo text-animate"><font style="letter-spacing: -1px;">Windows</font><font style="font-family:'FRABK'; color: white;">95</font></div> <!-- SIDEWAYS LOGO -->
          <ul>
            <li>
              <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/windows95%20programs%20icon.svg" width="24px" height="24px" alt="Windows95 programs icon"><span><a class="tooltip3" href="#"><u>P</u>rograms<span class="tooltiptext3">Sample tooltip</span></a></span><img class="start-open1 start-invert1" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the right">
              <ul class="startsub1">
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Example w/img & link</a></span></li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span>Example w/img</span></li>
                <li>
                  <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Sub w/img & link</a></span><img class="start-open2 start-invert2" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the right">
                  <ul class="startsub2">
                    <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Example w/img & link</a></span></li>
                    <li><span><a href="#">Example w/link</a></span></li>
                    <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span>Example w/img</span></li>
                    <li><span>Example</span></li>
                    <li>
                      <span><a href="#">Sub w/link</a></span><img class="start-open3 start-invert3" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/right%20arrow.svg" width="4px" height="7px" alt="a black triangle pointing to the right">
                      <ul class="startsub3">
                        <li><span><a href="">Example w/link</a></span></li>
                        <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Example w/img & link</a></span></li>
                        <li><span>Example</span></li>
                        <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Example w/img & link</a></span></li>
                      </ul>
                    </li>
                    <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span>Example w/img</span></li>
                    <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span>Example w/img</span></li>
                  </ul>
                </li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Example w/img & link</a></span></li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span>Example w/img</span></li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Example w/img & link</a></span></li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span>Example w/img</span></li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon"><span><a href="#">Example w/img & link</a></span></li>
              </ul>
            </li>
            <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/win95%20documents%20icon.svg"  width="24px" height="24px" alt="Windows95 documents icon"><span><a class ="tooltip3" href="#"><u>D</u>ocuments<span class="tooltiptext3">Sample tooltip</span></a></span></li>
            <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/win95%20settings%20icon.svg" width="24px" height="24px" alt="Windows95 settings icon"><span><a class="tooltip3" href="#"><u>S</u>ettings<span class="tooltiptext3">Sample tooltip</span></a></span></li>
            <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/windows95%20find%20icon.svg" width="24px" height="24px" alt="Windows95 find icon"><span><a class="tooltip3" href="#"><u>F</u>ind<span class="tooltiptext3">Sample tooltip</span></a></span></li>
            <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/win95%20help%20icon.svg" width="24px" height="24px" alt="Windows95 help icon"><span><a class="tooltip3" href="#"><u>H</u>elp<span class="tooltiptext3">Sample tooltip</span></a></span></li>
            <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/windows95%20run%20icon.svg" width="24px" height="24px" alt="Windows95 run icon"><span><a class="tooltip3" href="#"><u>R</u>un<span class="tooltiptext3">Sample tooltip</span></a></span></li>
            <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/shutdown.svg" width="24px" height="24px" alt="the Windows95 shutdown icon"><span class="tooltip3"><a href="https://www.tree.fm/" target="_blank">Sh<u>u</u>t Down...<span class="tooltiptext3">Click here for a nice, relaxing surprise! This link opens in a new tab.</span></a></span></li>
          </ul>
        </div> <!-- MY DROPDOWN -->
      </div> <!-- START -->
      <button class="painttabmin">
        <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon">
        <p>untitled - Paint</p>
      </button>
      <button class="painttab">
        <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/paint%2016x16.svg" width="16px" height="16px" alt="the Windows95 Paint 16x16 paint icon">
        <p>untitled - Paint</p>
      </button>
      <div class="clockbox"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/icons/svg%20files/win95%20sound%20icon.svg" width="16px" height="16px" alt="the Windows95 logo for sound"><span id="clock"></span></div> <!-- CLOCKBOX -->
    </div> <!-- TASKBAR -->
  </section>

<!-- SCRIPTS -->

<!-- Many of these do not require you to change anything, and changing things will often result in a breaking of the scripts. -->

<!-- DRAGGABLE START -->

<script>
    dragElement(document.getElementById("paintbox"));

    function dragElement(elmnt) {
        var pos1 = 0,
            pos2 = 0,
            pos3 = 0,
            pos4 = 0;
        if (document.getElementById(elmnt.id + "windowtitle")) {
            document.getElementById(elmnt.id + "windowtitle").onmousedown = dragMouseDown;
        } else {
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
</script>

<!-- DRAGGABLE END -->

<!-- RESIZE WINDOW START -->

<script>
    $(document).ready(function() {
        var paintbox = document.getElementById('paintbox');
        var resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                if (entry.target === paintbox) {
                    adjustCanvasDimensions();
                }
            }
        });
        resizeObserver.observe(paintbox);

        function adjustCanvasDimensions() {
            var paintboxHeight = paintbox.offsetHeight;
            var paintboxWidth = paintbox.offsetWidth;
            var otherElementsHeight = 120;
            var otherElementsWidth = 67;

            var canvasHeight = paintboxHeight - otherElementsHeight;
            var canvasWidth = paintboxWidth - otherElementsWidth;

            document.querySelector('.canvas').style.height = `${canvasHeight}px`;
            document.querySelector('.canvas').style.width = `${canvasWidth}px`;
        }
    });
</script>

<!-- RESIZE WINDOW END -->

<!-- PAINT ICON START -->

<script>
    $("#painticon").dblclick(function() {
        window.getSelection().removeAllRanges();
        $("#paintbox").css({
            "top": "0",
            "left": "75px",
            "width": "initial",
            "height": "initial",
        });
        $("#paintbox").show();
        $(".painttab").show();
        $(".painttabmin").show();
    });
</script>

<script>
    var paintbox = document.getElementById('paintbox');
    var buttonParagraph = document.querySelector('#painticon p');
    paintbox.addEventListener('click', function() {
        buttonParagraph.classList.add('focus');
    });
    document.addEventListener('click', function(event) {
        if (!paintbox.contains(event.target)) {
            buttonParagraph.classList.remove('focus');
        }
    });
</script>

<!-- PAINT ICON END -->

<!-- CONTEXT MENU START -->

<script>
    document.onclick = hideMenu;
    document.oncontextmenu = rightClick;

    function hideMenu() {
        document.getElementById(
            "contextMenu").style.display = "none"
    }

    function rightClick(e) {
        e.preventDefault();
        if (document.getElementById(
                "contextMenu").style.display == "block")
            hideMenu();
        else {
            let menu = document
                .getElementById("contextMenu")
            menu.style.display = 'block';
            menu.style.left = e.pageX + "px";
            menu.style.top = e.pageY + "px";
        }
    }
</script>

<!-- CONTEXT MENU END -->

<!-- WINDOW TITLE BG COLOUR START -->

<script>
    document.addEventListener('click', function(event) {
        var paintbox = document.getElementById('paintbox');
        var paintboxWindowTitle = document.getElementById('paintboxwindowtitle');
        if (!paintbox.contains(event.target)) {
            paintboxWindowTitle.style.backgroundColor = '#808080';
        } else {
            paintboxWindowTitle.style.backgroundColor = '#000080';
        }
    });
</script>

<!-- WINDOW TITLE BG COLOUR END -->

<!-- CLOSE WINDOW START -->

<script>
    $(".close").click(function() {
        $("#paintbox").toggle();
        $(".painttab").hide();
        $(".painttabmin").hide();
    });
</script>

<!-- CLOSE WINDOW END -->

<!-- MAXIMIZE WINDOW START -->

<script>
    $(document).ready(function() {
        let isMaximized = false;

        $("#maximize").click(function() {
            if (!isMaximized) {
                $("#paintbox").css({
                    "top": "0",
                    "left": "0",
                    "width": "100vw",
                    "height": "calc(100vh - 28px)",
                });
                $(this).html('<span class="tooltiptext">Restore the current window</span><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/restore%20button.svg" width="12px" height="10px" alt="a black restore icon">').attr('aria-label', 'Restore');
                isMaximized = true;
            } else {
                $("#paintbox").css({
                    "top": "0",
                    "left": "75px",
                    "width": "0",
                    "height": "0",
                });

                $(".resizewrap").css({
                    "top": "initial",
                    "left": "initial",
                    "width": "100%",
                    "height": "100%",
                });
                $(this).html('<span class="tooltiptext">Maximize the current window</span><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/buttons/svg%20files/max%20button.svg" width="12px" height="10px" alt="a black maximize icon">').attr('aria-label', 'Maximize');
                isMaximized = false;
            }
        });
    });
</script>

<!-- MAXIMIZE WINDOW END -->

<!-- MINIMIZE WINDOW START -->

<script>
    $(".minimize").click(function() {
        $("#paintbox").toggle();
        $(".painttab").hide();
    });
    $(".painttabmin").click(function() {
        $("#paintbox").toggle();
    });
    $(".painttabmin").click(function() {
        $("#paintbox").toggle();
        $(".painttab").show();
    });
</script>

<!-- MINIMIZE WINDOW END -->

<!-- FILESTAB SCROLL START -->

<script>
    function leftScroll() {
        const left = document.querySelector(".filestab");
        left.scrollBy(-50, 0);
    }

    function rightScroll() {
        const right = document.querySelector(".filestab");
        right.scrollBy(50, 0);
    }
</script>

<!-- FILESTAB SCROLL END -->

<!-- FILESUB START -->

<script>
    $(".file-open1").click(function(event) {
        $(".filesub1").toggle();
        event.stopPropagation();
    });
    $(document).click(function(event) {
        // Check if the click was outside the popout
        if (!$(event.target).closest('.filesub1, .file-open1').length) {
            $(".filesub1").hide(); // Close the popout
        }
    });
</script>

<script>
    $(document).ready(function() {
        var isDragging = false;

        function updateFilesubPosition() {
            var fileOpen1Offset = $('.file-open1').offset();
            $('.filesub1').css({
                left: fileOpen1Offset.left,
                top: fileOpen1Offset.top + $('.file-open1').outerHeight()
            });
        }

        $('.filestab').scroll(function() {
            updateFilesubPosition();
        });

        $('#paintbox').on('mousemove', function() {
            if (isDragging) {
                requestAnimationFrame(updateFilesubPosition);
            }
        });

        $('#paintbox').on('mousedown', function() {
            isDragging = true;
        });

        $(document).on('mouseup', function() {
            isDragging = false;
        });

        updateFilesubPosition();
    });
</script>

<!-- FILESUB END -->

<!-- INNER CANVAS BOX START -->

<script>
    element = document.querySelector(".resizewrap");
    makeResizable(element, 200, 200)

    function makeResizable(element, minW = 200, minH = 200, size = 20) {
        const parent = element.parentElement; // Reference to the parent container

        const bottom = document.querySelector('.edgebox8');
        bottom.style.backgroundColor = 'navy';
        bottom.style.cursor = 'url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20resize%20n.jpg") 4.5 10, n-resize';

        bottom.addEventListener('mousedown', resizeYPositive())

        element.appendChild(bottom);

        const right = document.querySelector('.edgebox6');
        right.style.backgroundColor = 'navy';
        right.style.cursor = 'url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20resize%20e.jpg") 10.5 4.5, e-resize';

        right.addEventListener('mousedown', resizeXPositive())

        element.appendChild(right);

        const corner4 = document.querySelector('.edgebox7');
        corner4.style.backgroundColor = 'navy';
        corner4.style.cursor = 'url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/cursors/win95%20resize%20n-w.jpg") 7.5 7.5, se-resize';

        corner4.addEventListener('mousedown', resizeXPositive())
        corner4.addEventListener('mousedown', resizeYPositive())

        element.appendChild(corner4);

        function get_int_style(key) {
            return parseInt(window.getComputedStyle(element).getPropertyValue(key));
        }

        function resizeXPositive() {
            let offsetX

            function dragMouseDown(e) {
                if (e.button !== 0) return
                e = e || window.event;
                e.preventDefault();
                const {
                    clientX
                } = e;
                offsetX = clientX - element.offsetLeft - get_int_style('width');
                document.addEventListener('mouseup', closeDragElement)
                document.addEventListener('mousemove', elementDrag)
            }

            function elementDrag(e) {
                const {
                    clientX
                } = e;
                let x = clientX - element.offsetLeft - offsetX;
                if (x < minW) x = minW;
                if (x + element.offsetLeft > parent.clientWidth) {
                    x = parent.clientWidth - element.offsetLeft; // Prevent overflow
                }
                element.style.width = x + 'px';
            }

            function closeDragElement() {
                document.removeEventListener("mouseup", closeDragElement);
                document.removeEventListener("mousemove", elementDrag);
            }
            return dragMouseDown
        }

        function resizeYPositive() {
            let offsetY

            function dragMouseDown(e) {
                if (e.button !== 0) return
                e = e || window.event;
                e.preventDefault();
                const {
                    clientY
                } = e;
                offsetY = clientY - element.offsetTop - get_int_style('height');

                document.addEventListener('mouseup', closeDragElement)
                document.addEventListener('mousemove', elementDrag)
            }

            function elementDrag(e) {
                const {
                    clientY
                } = e;
                let y = clientY - element.offsetTop - offsetY;
                if (y < minH) y = minH;
                if (y + element.offsetTop > parent.clientHeight) {
                    y = parent.clientHeight - element.offsetTop; // Prevent overflow
                }
                element.style.height = y + 'px';
            }

            function closeDragElement() {
                document.removeEventListener("mouseup", closeDragElement);
                document.removeEventListener("mousemove", elementDrag);
            }
            return dragMouseDown
        }

        function resizeXNegative() {
            let offsetX
            let startX
            let startW
            let maxX

            function dragMouseDown(e) {
                if (e.button !== 0) return
                e = e || window.event;
                e.preventDefault();
                const {
                    clientX
                } = e;
                startX = get_int_style('left')
                startW = get_int_style('width')
                offsetX = clientX - startX;
                maxX = startX + startW - minW

                document.addEventListener('mouseup', closeDragElement)
                document.addEventListener('mousemove', elementDrag)
            }

            function elementDrag(e) {
                const {
                    clientX
                } = e;
                let x = clientX - offsetX
                let w = startW + startX - x
                if (w < minW) w = minW;
                if (x > maxX) x = maxX;
                element.style.left = x + 'px';
                element.style.width = w + 'px';
            }

            function closeDragElement() {
                document.removeEventListener("mouseup", closeDragElement);
                document.removeEventListener("mousemove", elementDrag);
            }
            return dragMouseDown
        }

        function resizeYNegative() {
            let offsetY
            let startY
            let startH
            let maxY

            function dragMouseDown(e) {
                if (e.button !== 0) return
                e = e || window.event;
                e.preventDefault();
                const {
                    clientY
                } = e;
                startY = get_int_style('top')
                startH = get_int_style('height')
                offsetY = clientY - startY;
                maxY = startY + startH - minH

                document.addEventListener('mouseup', closeDragElement, false)
                document.addEventListener('mousemove', elementDrag, false)
            }

            function elementDrag(e) {
                const {
                    clientY
                } = e;
                let y = clientY - offsetY
                let h = startH + startY - y
                if (h < minH) h = minH;
                if (y > maxY) y = maxY;
                element.style.top = y + 'px';
                element.style.height = h + 'px';
            }

            function closeDragElement() {
                document.removeEventListener("mouseup", closeDragElement);
                document.removeEventListener("mousemove", elementDrag);
            }
            return dragMouseDown
        }
    }
</script>

<!-- INNER CANVAS BOX END -->

<!-- CHECKBOXES START -->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var button = document.querySelector('.checkboxcrt');
        var crtElement = document.querySelector('.crt');
        crtElement.style.display = 'none';
        button.addEventListener('click', function() {
            if (crtElement.style.display === 'none' || crtElement.style.display === '') {
                crtElement.style.display = 'block'; // Show the element
            } else {
                crtElement.style.display = 'none'; // Hide the element
            }
        });
    });
</script>

<script>
    var button = document.querySelector('.checkboxtext');
    var textElements = document.querySelectorAll('.text-animate, span, p, ul, a, h1, h2, .tooltiptext, tooltiptext2, tooltiptext3, tooltiptext4');
    textElements.forEach(text => {
        text.classList.add('animate-toggle');
    });
    button.addEventListener('click', () => {
        textElements.forEach(text => {
            text.classList.toggle('animate-toggle');
        });
    });
</script>

<script>
    document.querySelector('.checkboxtext');.addEventListener('click', function() {
        this.classList.toggle('checked');
    });
</script>

<script>
    document.querySelector('.canvastext').addEventListener("mouseover", function(event) {
        var coordinates = `${event.screenX},${event.screenY}`;
        document.querySelector('.bottombox2 p').textContent = coordinates;
    }, false);
</script>

<!-- CHECKBOXES END -->

<!-- SCROLLBARS START -->

<script>
    // Element selections
    const scrollArea = document.querySelector('.canvastext');
    const scrollBarVertical = document.querySelector('.scrollbarvertical');
    const scrollBarHorizontal = document.querySelector('.scrollbarhorizontal');
    const scrollBarVerticalHandle = scrollBarVertical.querySelector('.scrollbarupdown');
    const scrollBarHorizontalHandle = scrollBarHorizontal.querySelector('.scrollbarsidetoside');
    const buttonScrollUp = document.querySelector('.scrollbarup');
    const buttonScrollDown = document.querySelector('.scrollbardown');
    const buttonScrollLeft = document.querySelector('.scrollbarleft');
    const buttonScrollRight = document.querySelector('.scrollbarright');

    const rightButtonWidth = 15; // Width of the right button on horizontal scrollbar
    const rightButtonMargin = 17; // Margin between the right button and scrollbar on horizontal scrollbar
    const bottomButtonHeight = 15; // Height of the bottom button on vertical scrollbar
    const bottomButtonMargin = 17; // Margin between the bottom button and scrollbar on vertical scrollbar

    // Scroll ratio settings
    const scrollRatio = 0.05; // Scroll amount as a percentage (5%)

    // Synchronize custom scrollbars with the scroll area
    function updateCustomScrollbars() {
        const scrollTop = scrollArea.scrollTop;
        const scrollLeft = scrollArea.scrollLeft;
        const scrollHeight = scrollArea.scrollHeight;
        const scrollWidth = scrollArea.scrollWidth;
        const clientHeight = scrollArea.clientHeight;
        const clientWidth = scrollArea.clientWidth;

        // Calculate vertical scrollbar handle size and position
        const verticalHandleHeight = Math.max((clientHeight / scrollHeight) * (scrollBarVertical.clientHeight - bottomButtonHeight - bottomButtonMargin), 30); // Minimum height 30px
        const verticalScrollRatio = scrollTop / (scrollHeight - clientHeight);
        scrollBarVerticalHandle.style.height = `${verticalHandleHeight}px`;
        scrollBarVerticalHandle.style.top = `${Math.min(verticalScrollRatio * (scrollBarVertical.clientHeight - verticalHandleHeight - bottomButtonHeight - bottomButtonMargin), scrollBarVertical.clientHeight - verticalHandleHeight - bottomButtonMargin)}px`;

        // Calculate horizontal scrollbar handle size and position
        const horizontalHandleWidth = Math.max((clientWidth / scrollWidth) * (scrollBarHorizontal.clientWidth - rightButtonWidth - rightButtonMargin), 30); // Minimum width 30px
        const horizontalScrollRatio = scrollLeft / (scrollWidth - clientWidth);
        scrollBarHorizontalHandle.style.width = `${horizontalHandleWidth}px`;
        scrollBarHorizontalHandle.style.left = `${Math.min(horizontalScrollRatio * (scrollBarHorizontal.clientWidth - horizontalHandleWidth - rightButtonWidth - rightButtonMargin), scrollBarHorizontal.clientWidth - horizontalHandleWidth - rightButtonWidth - rightButtonMargin)}px`;
    }

    // Update custom scrollbars when scrolling
    scrollArea.addEventListener('scroll', updateCustomScrollbars);

    // Handle dragging of custom scrollbars
    function onDragStart(event, axis) {
        const startX = event.clientX;
        const startY = event.clientY;
        const startScrollTop = scrollArea.scrollTop;
        const startScrollLeft = scrollArea.scrollLeft;

        function onDragMove(moveEvent) {
            const deltaX = moveEvent.clientX - startX;
            const deltaY = moveEvent.clientY - startY;

            if (axis === 'vertical') {
                const maxScrollTop = scrollArea.scrollHeight - scrollArea.clientHeight;
                const handleHeight = scrollBarVerticalHandle.clientHeight;
                const scrollTop = startScrollTop + (deltaY / (scrollBarVertical.clientHeight - handleHeight - bottomButtonHeight - bottomButtonMargin)) * maxScrollTop;
                scrollArea.scrollTop = Math.min(Math.max(scrollTop, 0), maxScrollTop);
            } else if (axis === 'horizontal') {
                const maxScrollLeft = scrollArea.scrollWidth - scrollArea.clientWidth;
                const handleWidth = scrollBarHorizontalHandle.clientWidth;
                const scrollLeft = startScrollLeft + (deltaX / (scrollBarHorizontal.clientWidth - handleWidth - rightButtonWidth - rightButtonMargin)) * maxScrollLeft;
                scrollArea.scrollLeft = Math.min(Math.max(scrollLeft, 0), maxScrollLeft);
            }
            updateCustomScrollbars();
        }

        function onDragEnd() {
            document.removeEventListener('mousemove', onDragMove);
            document.removeEventListener('mouseup', onDragEnd);
        }

        document.addEventListener('mousemove', onDragMove);
        document.addEventListener('mouseup', onDragEnd);
    }

    // Add drag functionality to custom scrollbars
    scrollBarVerticalHandle.addEventListener('mousedown', (event) => onDragStart(event, 'vertical'));
    scrollBarHorizontalHandle.addEventListener('mousedown', (event) => onDragStart(event, 'horizontal'));

    // Update scrollbar positions initially
    updateCustomScrollbars();

    // Scroll by a set ratio when buttons are clicked
    function scrollByRatio(axis, direction) {
        const maxScroll = axis === 'vertical' ? scrollArea.scrollHeight - scrollArea.clientHeight : scrollArea.scrollWidth - scrollArea.clientWidth;
        const scrollAmount = maxScroll * scrollRatio;

        if (axis === 'vertical') {
            if (direction === 'up') {
                scrollArea.scrollTop = Math.max(scrollArea.scrollTop - scrollAmount, 0);
            } else if (direction === 'down') {
                scrollArea.scrollTop = Math.min(scrollArea.scrollTop + scrollAmount, maxScroll);
            }
        } else if (axis === 'horizontal') {
            if (direction === 'left') {
                scrollArea.scrollLeft = Math.max(scrollArea.scrollLeft - scrollAmount, 0);
            } else if (direction === 'right') {
                scrollArea.scrollLeft = Math.min(scrollArea.scrollLeft + scrollAmount, maxScroll);
            }
        }
        updateCustomScrollbars();
    }

    const resizeObserver = new ResizeObserver(() => {
        updateCustomScrollbars();
    });

    resizeObserver.observe(scrollArea);

    // Add click events to scrollbar buttons
    buttonScrollUp.addEventListener('click', () => scrollByRatio('vertical', 'up'));
    buttonScrollDown.addEventListener('click', () => scrollByRatio('vertical', 'down'));
    buttonScrollLeft.addEventListener('click', () => scrollByRatio('horizontal', 'left'));
    buttonScrollRight.addEventListener('click', () => scrollByRatio('horizontal', 'right'));
</script>

<!-- SCROLLBARS END -->

<!-- BOTTOM COORDS START -->

<script>
    const canvasText = document.querySelector('.canvastext');
    const bottomBox = document.querySelector('.bottombox3 p');

    let startX, startY, endX, endY;
    let isDragging = false;

    canvasText.addEventListener('mousedown', (e) => {
        startX = e.clientX - canvasText.getBoundingClientRect().left;
        startY = e.clientY - canvasText.getBoundingClientRect().top;
        isDragging = true;
    });

    canvasText.addEventListener('mousemove', (e) => {
        if (isDragging) {
            endX = e.clientX - canvasText.getBoundingClientRect().left;
            endY = e.clientY - canvasText.getBoundingClientRect().top;
            // Update the display with the current width and height
            const width = endX - startX;
            const height = endY - startY;
            bottomBox.textContent = `${width} x ${height}`;
        }
    });

    canvasText.addEventListener('mouseup', () => {
        isDragging = false;
    });
</script>

<!-- BOTTOM COORDS END -->

<!-- START BUTTON START -->

<script>
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    window.onclick = function(event) {
        if (!event.target.matches('.startbtn, .startbtn span, .startbtn img')) {
            var dropdowns = document.getElementsByClassName("start-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
</script>

<!-- START BUTTON END -->

<!-- PAINT TAB START -->

<script>
    $(".painttab").click(function() {
        $("#paintbox").toggle();
        $(".painttab").hide();
    });
    $(".painttabmin").click(function() {
        $("#paintbox").toggle();
        $(".painttab").show();
    });
</script>

<!-- PAINT TAB END -->

<!-- CLOCK START -->

<script>
    let clockEl = document.getElementById("clock");

    function getClock() {
        let date = new Date();

        let hr = date.getHours();
        let min = date.getMinutes();
        let period = "AM";

        if (hr == 0) {
            hr = 12;
        }

        if (hr > 12) {
            hr = hr - 12;
            period = "PM";
        }

        hr = ("0" + hr).slice(-2);
        min = ("0" + min).slice(-2);

        clockEl.innerHTML = `${hr}:${min} ${period}`;
    }

    setInterval(getClock, 1000);
</script>

<!-- CLOCK END -->

<!-- AUDIO START -->

<script>
    document.querySelector('h1').addEventListener('click', function() {
        var audio = new Audio('https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/misc/windows95_startup_hifi(1).mp3');
        audio.play();
    });
</script>

<!-- AUDIO END -->

<!-- SCRIPTS END -->

</body>  

	</html>

CSS

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

JS

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions