cr ikisschris

--- MAIN CONTAINER ---

#container01 > .wrapper {
height: 20em;
}

--- CONTAINER 02 ---

#container02 > .wrapper {
height: 16.5em;
width: 12.5em;
border-radius: 20px 5px 5px 20px;
position: absolute;
bottom: 3em;
left: 0.3em;
}

--- IMAGE 01 ---

#image01 .frame {
border-radius: 20px 5px 5px 20px;
position: relative;
top: 15px;
}

--- SCROLLBOX ---

#text01 {
overflow: auto;
height: 5.5em;
padding: 5px;
top: 20px;
}

#text01 mark {
background: radial-gradient(circle, #6495ED 0%, #89CFF0 100%);
border-radius: 100%;
border: 1px solid #000;
padding-left: 5px;
padding-right: 7px;
padding-top: 3px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size: 1em;
font-family:'kosmos';
}

#text01 a {
color: white;
background: radial-gradient(circle, #6495ED 0%, #89CFF0 100%);
border-radius: 100%;
border: 1px solid #000;
padding-left: 5px;
padding-right: 7px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size: 1.25em;
}

--- CONTAINER with MUSIC PLAYER ---

#container03 > .wrapper {
width: 4em;
padding-top: 5px;
position: absolute;
bottom: 1em;
left: 0.4em;
}

@media only screen and (max-width: 600px) {
#container03 > .wrapper {
width: 4.5em;
padding-top: 3px;
bottom: 0.8em;
}
}

--- CONTAINER with NAVIGATION TEXTS ---

#container04 > .wrapper {
width: 9em;
height: 8em;
border-radius: 5px 20px 20px 5px;
padding-top: 10px;
position: absolute;
bottom: 11.5em;
right: 0.6em;
}

--- NAVIGATION TEXTS ---

#text02 {
background: white;
padding: 5px;
width: 6.5em;
height: 5.5em;
border-radius: 5px 20px 20px 5px;
border: 1px solid #89CFF0;
text-shadow: -1px 0 #454545, 0 1px #454545, 1px 0 #454545, 0 -1px #454545, 0 0;
left: 6px;
}

@media only screen and (max-width: 600px) {
#text02 {
width: 6.5em;
left: 5px;
bottom: 2px;
}
}

#text02 mark {
background: linear-gradient(180deg, #FFFFFF 0%, #89CFF0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-radius: 5px 20px 20px 5px;
border: 1px solid #89CFF0;
font-size: 1.12em;
font-weight: 400;
-webkit-text-stroke: 1px #000;
text-shadow: none;
}

--- CONTAINER with IMAGE ---

#container05 > .wrapper {
width: 9em;
border-radius: 5px 20px 20px 5px;
height: 10em;
position: absolute;
bottom: 1em;
right: 0.6em;
z-index: 3;
}

--- DOLL IMAGE ---

#image02 .frame {
position: relative;
bottom: 10px;
}

--- SCROLLABLE CONTAINER ---

#elementID > .wrapper {
width: 9em;
border-radius: 5px 20px 20px 5px;
height: 10em;
overflow: auto;
padding: 5px;
position: absolute;
bottom: 1em;
right: 0.6em;
z-index: 3;
}

--- MARKS ---

#elementID mark {
color: white;
background: #89CFF0;
font-size: 1.75em;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
border-radius: 0px 10px;
font-family: berkshire;
}

--- INFO TEXTS ---

#elementID {
background: white;
border: 1px solid #89CFF0;
border-radius: 5px 5px 20px 5px;
width: 10em;
padding: 5px;
left: 5px;
}

@media only screen and (max-width: 600px) {
#elementID {
width: 10em;
}
}


--- ALL FONTS ---

<style>
@font-face {
font-family:'kosmos';
src: url(https://dl.dropbox.com/s/olyigvm99jgmn8h/PLANK___.TTF);
}

@font-face {
font-family: berkshire;
src:url(https://dl.dropbox.com/s/49tg0oklrpc2u71/BerkshireSwash-Regular.ttf?);
}
</style>