lovesick crd codes

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

--- ICONS ---
#icons01 li a svg {
filter: drop-shadow( 0 -2px white) drop-shadow( -1px 0 white) drop-shadow( 0 1px white) drop-shadow( 1px 0 white) drop-shadow( 0 -1px white) drop-shadow(-1px 0 white) drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px 1px 0 rgba(163,163,163,0.5)) drop-shadow(0px 0px 0 rgba(163,163,163,0.5)) drop-shadow( 0 0 2px #5C5C5C);
bottom: 3px;
}

@media only screen and (max-width: 600px) {
#icons01 li a svg {
filter: drop-shadow( 0 -1px white) drop-shadow( -0px 0 white) drop-shadow( 0 1px white) drop-shadow( 1px 0 white) drop-shadow( 0 -1px white) drop-shadow(-1px 0 white) drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px 1px 0 rgba(163,163,163,0.5)) drop-shadow(1px 1px 0 rgba(163,163,163,0.5)) drop-shadow( 0 0 2px #5C5C5C);
}
}

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

@media only screen and (max-width: 600px) {
#container02 > .wrapper {
height: 16em;
}
}

--- IMAGE ---
#image01 .frame {
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 20%), inset 0px 15px 6px -10px #ffffff;
border-radius: 100%;
width: 8em;
height: 8em;
background: #89CFF0;
position: relative;
right: 3px;
}

@media only screen and (max-width: 600px) {
#image01 .frame {
width: 8.5em;
height: 8.5em;
}
}

--- CONTAINER with MUSIC PLAYER ---
#container03 > .wrapper {
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 20%), inset 0px -13px 6px -10px rgb(66 66 66 / 30%);
height: 5.3em;
width: 11.5em;
border-radius: 30px 0px 0px 30px;
z-index: 5;
position: absolute;
top: -6em;
right: 0.1em;
}

@media only screen and (max-width: 600px) {
#container03 > .wrapper {
width: 11.8em;
height: 5.5em;
top: -6.5em;
}
}

--- CONTAINERS ---
#elementID > .wrapper {
position: absolute;
bottom: 0.5em;
left: 0.5em;
}

--- MAIN TEXT ---
#elementID {
font-family: roman;
text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000, 0 0;
}

--- SCROLLBOX ---
#elementID {
font-family: PC98;
background: white;
padding: 10px;
padding-top: 5px;
padding-left: 8px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 20%), inset 0px -13px 6px -10px rgb(66 66 66 / 30%);
border-radius: 0px 20px 20px 0px;
width: 14em;
height: 13em;
overflow: auto;
right: 3px;
}

@media only screen and (max-width: 600px) {
#elementID {
width: 14em;
height: 14em;
padding-left: 5px;
}
}

#elementID mark {
text-shadow: -1px 0 #888, 0 1px #888, 1px 0 #888, 0 -1px #888, 0 0;
font-size: 1.125em;
}

--- ALL FONTS ---

<style>
@font-face {
font-family: roman;
src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
}

@font-face {
font-family: PC98;
src: url(https://dl.dropbox.com/s/q6te1rmeglfy4bf/pc-9800.ttf);
}
</style>

--- LINKS FLOAT ON HOVER ---

<style>
a {
display: inline-block;
transition: .2s ease;
}
a:hover {
transform: translateY(-20%);
}
</style>