cr narumitsuluv 3

--- TOP CONTAINER ---
#container01 > .wrapper {
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 10px 10px 0px 0px;
}

--- 'GIRLY BLOG' TEXT ---
#text01 {
border: 1px solid #7D7D7D;
border-radius: 7px;
background: #fff;
width: 12em;
left: 4px;
font-family: Nintendo-DS-BIOS;
padding-left: 3px;
}

--- ICONS ---
#icons01 li a svg {
border-radius: 1.5em;
background: #fff;
padding: 4px;
top: 7px;
}

--- MAIN CONTAINER ---
#container02 > .wrapper {
height: 16em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 0px 0px 10px 10px;
}

--- IMAGE ---
#image01 .frame {
border: 3px inset;
border-radius: 10px 0px 10px 0px;
}

--- 'welcome & credits' TEXT ---
#text02 {
color: white;
border: 1px solid #7D7D7D;
border-radius: 7px;
background: #A84F74;
width: 8.5em;
left: 4px;
font-family: Nintendo-DS-BIOS;
padding-left: 3px;
top: 5px;
}

--- POSITIONING for MUSIC PLAYER ---
top:10px;
margin-bottom:10px;
left:5px;
margin-left:10px;

--- BUTTONS ---
#buttons01 li a {
border: 1px solid #191919;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 0px 0px 10px 10px;
position: relative;
left: 10px;
top: .1px;
font-family: Nintendo-DS-BIOS;
}

--- SCROLLABLE CONTAINER ---
#elementID > .wrapper {
height: 14.1em;
width: 13.1em;
border: 3px inset;
border-radius: 10px 0px 10px 0px;
overflow: auto;
position: absolute;
bottom: 2.8em;
left: 10.6em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
left: 11em;
width: 12.6em;
}
}

--- SCROLLBOX ---
#elementID {
font-family: Nintendo-DS-BIOS;
top: 5px;
}

#elementID mark {
font-family: Betterfly;
font-size: 1.3em;
}



* MISCELLANEOUS *


--- ALL FONTS ---
<style>
@font-face {
font-family: Nintendo-DS-BIOS;
src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
}

@font-face {
font-family: Betterfly;
src: url(https://dl.dropbox.com/s/j8ky6jfd09v7bc0/betterfly.ttf);
}
</style>

--- SOUND EFFECT ---
<script>
document.getElementById('buttons01').onclick = function() {
document.getElementById('sound').play();
}
</script>
<audio id="sound" src="https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouse_click_fx.mp3" preload="auto"></audio>

--- SCROLLBAR ---
<style>
::-webkit-scrollbar {
width: 16px
}

::-webkit-scrollbar:horizontal {
height: 17px
}

::-webkit-scrollbar-corner {
background: #eee
}

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

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}

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

::-webkit-scrollbar-button:vertical {
height: 17px
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat; background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

::-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-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat; background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>

--- FOG MASK ---
#elementID {
-webkit-mask-image: url(https://i.ibb.co/JjDXBPr/ED5929-CE-1-D66-4-EC4-8-F8-A-14792-D8-F2384.png);
-webkit-mask-size: 93%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}