notes: credit chaewnr when remaking this carrd!! tutorial on how to make this carrd will be up on cupidcrd 

---- fonts ----
<style>
@font-face {
font-family: emoji;
src: url(https://dl.dropbox.com/s/cvba4kh6qm23mru/EmojiFont.ttf);
}

@font-face {
font-family:'nintendo';
src: url(https://dl.dropbox.com/s/8w4sembeqyz4rsq/Nintendo-DS-BIOS.ttf);

}

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

---- image ----
<style>
#image01 {
border: 3px ridge #CCCCCC;
border-radius: .625em;
}
</style>

---- credits ----
<style>
#text01 {
background: #FFE8FE;
border: 3px ridge #CCCCCC;
border-radius: 10px 10px 10px 10px;
font-family:'nintendo';
padding: 3px;
}
mark {
font-family: emoji;
background: transparent;
}
</style>

---- buttons ----
<style>
#buttons {
background: #FFFFFF00;
position: relative;
top: 13em;
font-size: .875em;
font-family:'nintendo';
}

mark3 {
border: 1.5px solid #888;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background: linear-gradient(180deg,#eee 45%,#ddd 0,#bbb);
border-radius: .5em;
padding-left: 21px;
padding-right: 21px;
padding-top: 5px;
padding-bottom: 5px;
}

#buttons a {
text-decoration: none;
</style>

<div id="buttons"><mark3><a href="#guides" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">guides</a></mark3>⠀⠀<mark3><a href="#loves" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">loves</a></mark3>

---- about me scrollbox ----
<style>
#scroll01 {
background: white;
border: 3px ridge #CCCCCC;
border-radius: 10px 0 10px 0;
height: 10.8em;
padding: 0.3em;
font-family:'nintendo';
overflow-y: scroll;
width: 10.7em;
position: absolute;
left: 10.2em;
bottom: 3em;
font-size: 1em;
line-spacing: 0.875em;
text-align: left;
}

mark2 {
font-family: SakeMoru;
background: none;
color: #FFE8FE;
font-weight: bolder;
font-size: .75em;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

#scroll01 a {
text-decoration-style: dotted;
</style>

<div id="scroll01">
<mark2>about me</mark2>
<p></p>
info info info info info info info info info info info info info info
<br><br>
<mark2>notes</mark2>
<p></p>
info info info info info info info info info info info info info info info info info info info info
<br><br>
<mark2>my print</mark2>
<p></p>
info info info info info info info info info info info info info info info info info info info info
<br><br>
<mark2>find me</mark2>
<p></p>
<a href="https://twitter.com/cupidcrd" target="_blank">crd acc</a> <font color="#FFE8FE">•</font> <a href="https://omelet.crd.co" target="_blank">crd rkive</a> <font color="#FFE8FE">•</font> <a href="https://twitter.com/kooraeth" target="_blank">twt</a></div>

---- guidelines scrollbox ----
<style>
#scroll02 {
background: white;
border: 3px ridge #CCCCCC;
border-radius: 10px 0 10px 0;
height: 10.8em;
padding: 0.3em;
font-family:'nintendo';
overflow-y: scroll;
width: 10.7em;
position: absolute;
left: 10.2em;
bottom: 3em;
font-size: 1em;
line-spacing: 0.875em;
text-align: left;
}

mark2 {
font-family: SakeMoru;
background: none;
color: #FFE8FE;
font-weight: bolder;
font-size: .75em;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

</style>

<div id="scroll02">
<mark2>byi</mark2>
<p></p>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
<br><br>
<mark2>dni</mark2>
<p></p>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</div>

---- loves scrollbox ----
<style>
#scroll03 {
background: white;
border: 3px ridge #CCCCCC;
border-radius: 10px 0 10px 0;
height: 10.8em;
padding: 0.3em;
font-family:'nintendo';
overflow-y: scroll;
width: 10.7em;
position: absolute;
left: 10.2em;
bottom: 3em;
font-size: 1em;
line-spacing: 0.875em;
text-align: left;
}

mark2 {
font-family: SakeMoru;
background: none;
color: #FFE8FE;
font-weight: bolder;
font-size: .75em;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

</style>

<div id="scroll03">
<mark2>tunes</mark2>
<p></p>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
<br><br>
<mark2>media</mark2>
<p></p>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</div>

---- click sound effect ----
<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3")
var clicksound=createsoundbite("https://a.tumblr.com/tumblr_ojrmy55yUN1w2e2oyo1.mp3")

</script>

---- style ----
<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 { background:url(button-up.svg), linear-gradient(90deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-button:vertical:end { background:url(button-down.svg), linear-gradient(90deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-button:horizontal { width:16px } ::-webkit-scrollbar-button:horizontal:start { background:url(button-left.svg), linear-gradient(180deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-button:horizontal:end { background:url(button-right.svg), linear-gradient(180deg,#e5e5e5,#f0f0f0 20%) } </style>