cr crditem #3

-- FONTS --
@font-face {
font-family: motley;
src: url(https://dl.dropbox.com/s/qh1a8vcvex553l5/MotleyForcesRegular-w1rZ3.ttf?dl=0);
}

@font-face {
font-family: hug-me-tight;
src: url(https://dl.dropbox.com/s/ysi69u7ax8fv1b1/Hug%20Me%20Tight%20-%20TTF.ttf);
}

-- ROTATING DOILE --

#image01 {
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}

} @-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}

-- CHIBI IMAGE --
do note that it everything for this is only made for the said photo
expect a trial and error please do not send me a rtsp about faulty errors
you are expected to adjust for your own images.

position: absolute;
top: 2em;
left: 1em;

-- USERNAME TEXT --
font-family: motley;
text-shadow: -1px 0 #9BB1E8, 0 1px #9BB1E8, 1px 0 #9BB1E8, 0 -1px #9BB1E8, 0 0;
position: absolute;
left: 6em;
top: 2em;

-- NAVIGATION --
font-family: motley;
text-shadow: -1px 0 #9BB1E8, 0 1px #9BB1E8, 1px 0 #9BB1E8, 0 -1px #9BB1E8, 0 0;
position: absolute;
left: 9em;
bottom: 2em;

-- SCROLLBOX --
ANIMATION: can be found in animista

padding: 5px;
border-width:8px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8 fill round;
height: 10em;
width: 15em;
overflow: auto;
position: absolute;
left: 11.75em;
top: 6.5em;
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

-- HIGHLIGHT / MARK --
color: #9BB1E8;
background: white;
border: 1px solid black;
border-radius: 10px;
padding-left: 8px;
padding-right: 8px;
font-family: hug-me-tight;