cr lobilles 3

* PLEASE CREDIT LOBILLES WHEN REMAKING *

--- MAIN CONTAINER ---
#elementID > .wrapper {
padding: 0.3em;
border-radius: 0px 13px 13px 13px;
width: 60%;
right: 7px;
}

--- NAME TEXT ---
#elementID {
font-family: 'fenotype';
background: linear-gradient(to top, #828DF5 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px #585C82;
-webkit-filter: drop-shadow(0px 0px 1px #656A96);
}

--- MAIN IMAGE ---
#elementID .frame {
border-radius: 13px 13px 0px 0px;
}

--- SCROLLBOX ---
#elementID{
overflow: auto;
height: 5em;
border-radius: 0px 0px 13px 13px;
border: 1px solid #585C82;
border-top: 0px;
padding: 6px;
background: #FFE6EF;
}

#elementID a {
text-decoration-style: dotted;
}

--- BUTTONS ---
#elementID li a {
position: relative;
bottom: 3em;
left: 7.8em;
width: 3.4em;
height: 2.6em;
font-family: 'fenotype';
-webkit-text-stroke: 0.6px #656A96;
font-size: 12px;
border: 1px solid #585C82;
padding: 4px;
z-index: 3;
}

@media only screen and (max-width: 600px) {
#elementID li a {
position: relative;
bottom: 4em;
left: 8.8em;
font-size: 9px;
width: 3.6em;
line-height: 1.7em;
}
}

--- CONTAINER with IMAGE ---
#elementID > .wrapper {
width: 40%;
height: 8.2em;
padding: 0.3em;
background: radial-gradient(circle, #FFFFFF 0%, #828DF5 50%, #FFFFFF 100%);
border-radius: 13px;
animation: blur 1s ease;
position: absolute;
bottom: 4.2em;
right: 0.15em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
height: 8.5em;
bottom: 4.7em;
right: 0.25em;
}
}

--- PNG IMAGE ---
#elementID .frame {
position: relative;
top: 10px;
}

--- SCROLLABLE CONTAINER ---
#elementID > .wrapper {
width: 40%;
height: 8.2em;
padding: 0.3em;
background: linear-gradient(180deg, #828DF5 0%, #FFFFFF 50%, #828DF5 100%);
border-radius: 13px;
overflow: auto;
animation: blur 1s ease;
position: absolute;
bottom: 4.2em;
right: 0.15em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
height: 8.5em;
bottom: 4.7em;
right: 0.25em;
}
}

--- MARK TEXT ---
#elementID, #elementID, #elementID {
font-family: 'fenotype';
-webkit-text-stroke: 0.5px #6E7174;
-webkit-filter: drop-shadow(0px 0px 0.9px #656A96);
background-image: radial-gradient( #585C82 20%, #585C82 20% , transparent 80%);
}

--- INFO TEXT ---
#elementID, #elementID, #elementID {
background: white;
border: 1px solid #585C82;
border-radius: 13px;
padding: 0.3em;
}


--- FONT ---
@font-face {
font-family:fenotype;
src: url(https://dl.dropbox.com/s/18jzmzyoaj2goje/FontsFree-Net-02.10FEN.ttf);
}

--- BLUR ANIMATION ---
@keyframes blur {
from {
filter: blur(40px);
}

to {
filter: blur(0);
}
}