pro-standard cr earthmxver css + codes

---TOP CSS---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #80808080;">
<div class="title-bar-text">strung~</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<a href="#home"><button aria-label="Close"></button></a>
</div>
</div>

--TOP 2 CSS---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<ul role="menubar" class="can-hover" style ="background:linear-gradient(180deg, #80808080 25%, #ffffff80 100%);">
<li role="menuitem" tabindex="0" aria-haspopup="true">
File
<ul role="menu">
<li role="menuitem">
<a href="#menubar">
Open <span>Ctrl+O</span>
</a>
</li>
<li role="menuitem">
<a href="#menubar">
Save <span>Ctrl+S</span>
</a>
</li>
<li role="menuitem" class="has-divider">
<a href="#menubar">
Save As... <span>Ctrl+Shift+S</span>
</a>
</li>
<li role="menuitem"><a href="#menubar">Exit</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Edit
<ul role="menu">
<li role="menuitem"><a href="#menubar">Undo</a></li>
<li role="menuitem"><a href="#menubar">Copy</a></li>
<li role="menuitem"><a href="#menubar">Cut</a></li>
<li role="menuitem" class="has-divider"><a href="#menubar">Paste</a></li>
<li role="menuitem"><a href="#menubar">Delete</a></li>
<li role="menuitem"><a href="#menubar">Find...</a></li>
<li role="menuitem"><a href="#menubar">Replace...</a></li>
<li role="menuitem"><a href="#menubar">Go to...</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
View
<ul role="menu">
<li role="menuitem" tabindex="0" aria-haspopup="true">
Zoom
<ul role="menu">
<li role="menuitem"><button control-id="ControlID-45">Zoom In</button></li>
<li role="menuitem"><button>Zoom Out</button></li>
</ul>
</li>
<li role="menuitem"><a href="#menubar">Status Bar</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Help
<ul role="menu">
<li role="menuitem"><a href="#menubar">View Help</a></li>
<li role="menuitem"><a href="#menubar">About</a></li>
</ul>
</li>
</ul>

---CSS NAVI BUTTONS---
<a href="#home"><button>Home</button></a>
<a href="#one"><button>About</button></a>
<a href="#two"><button>Rules</button>
</a><a href="#three"><button>Loves</button></a>

---CODES---
<style>
::-webkit-scrollbar {
width: 16px
}
::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
::-webkit-scrollbar-thumb:vertical {
background: url("https://dl.dropbox.com/s/9a29qbkza3gmgl7/scroll1.png"), linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
background-repeat: no-repeat;
background-size: 65% auto, cover;
background-position: center;
}

::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}

::-webkit-scrollbar-button:vertical {
height: 15px
}
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border-radius: 0 3px 0 0;
}

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

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border-radius: 0 0 3px 0;
}
@font-face {
font-family: pixel;
src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
}
@font-face {
font-family: MS San Serif;
src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/MS%20Sans%20Serif.ttf);
}
#container02 > .wrapper, #container03 > .wrapper, #container04 > .wrapper, #container05 > .wrapper, #container06 > .wrapper {
box-shadow: inset 1px 1px #fff, inset -1px -0px #fff;
}
#image01 .frame, #image02 .frame, #image03 .frame, #image04 .frame {
border: 2px inset;
}
#text02, #text04, #text06, #text08, #text10, #text12 {
font-family: MS San Serif;
}
#text01 {
font-family: pixel;
background: white;
padding: 5px;
border: 2px inset;
border-radius: 5px;
}
#text03, #text05 {
font-family: pixel;
background: white;
padding: 5px;
border: 2px inset;
border-radius: 5px;
height: 7.5em;
overflow-y: scroll;
}
#text07, #text09 {
font-family: pixel;
background: white;
padding: 5px;
border: 2px inset;
border-radius: 5px;
height: 13.5em;
overflow-y: scroll;
}
#text11 {
font-family: pixel;
background: white;
padding: 5px;
border: 2px inset;
border-radius: 5px;
height: 15em;
overflow-y: scroll;
}
#text13 {
font-family: pixel;
background: white;
padding: 5px;
border: 2px inset;
border-radius: 5px;
height: 4.5em;
overflow-y: scroll;
}
</style>