ipod uwu ai

haii pls credit myungchacco if you rm! as always you might have to change some of the positions to fit your device but if you have any other questions feel free to dm me at crrdcore or send me a retro spring at soobinzz :3

--- CODES ---
<style>
@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

#ELEMENTID {
position: absolute;
bottom: 2em;
left: 6.2em;
z-index: 3;
}

@media only screen and (max-width: 600px) {
#ELEMENTID {
bottom: 1.4em;
left: 5.5em;
}
}

#ELEMENTID, #ELEMENTID {
animation: brrr 3s infinite;
animation-timing-function: ease-in-out;
}

@keyframes brrr {
0% {
transform: rotate(-1.8deg);
}

50% {
transform: rotate(-0.5deg);
}

100% {
transform: rotate(-1.8deg);
}
}

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ccc;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: linear-gradient(90deg, rgba(255,190,204,1) 38%, rgba(255,211,221,1) 62%);
border: 1px solid #aaa;
}
</style>

--- IPOD CONTAINER ---
width: 15em;
height: 25em;
border-radius: 23px;
box-shadow: inset 13px 0px 6px -10px rgb(190 190 190 / 60%), inset -13px 0px 6px -10px rgb(190 190 190 / 60%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(190 190 190 / 60%);
-webkit-filter: drop-shadow(0px 0px 15px #EEEEEE);
z-index: 3;

--- ICONS ---
border: 1px solid #FFAABD;
position: relative;
bottom: 2.56em;

--- NAVIGATION CONTAINER ---
width: 12em;
height: 8.8em;
border-radius: 10px;
position: absolute;
bottom: 15em;
left: 3.67em;
z-index: 3;

--- CIRCLE CONTAINER ---
width: 9em;
height: 9em;
border: 2px inset;
border-radius: 100px;
transform: rotate(9.5rad);
position: absolute;
bottom: 1.2em;
left: 5.2em;
z-index: 3;

--- ICON02 ---
border: 2px inset;

--- CREDIT EMBED ---
<style>
@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}
</style>

<div class="container">
<svg viewBox="0 0 100 100" width="130" height="130">
<defs>
<path id="circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="13px" font-family="windows">
<textPath xlink:href="#circle">© myungchacco 2023 • All Rights Reserved</textPath>
</text>
</svg>
</div>

--- KEYCHAIN IMG ---
position: absolute;
bottom: 16.5em;
left: 15.8em;
z-index: 1;

--- KIRBY IMG ---
position: absolute;
bottom: 13.1em;
left: 16.5em;
z-index: 1;

--- CABLE IMG ---
position: absolute;
left: 2.7em;
bottom: -7.8em;
z-index: 2;
--- MOBILE:
bottom: -11.4em;

--- HEADER CONTAINERS ---
width: 12em;
height: 2em;
border-radius: 10px 10px 0px 0px;
position: absolute;
bottom: 21.8em;
left: 3.67em;
z-index: 3;

--- INFO CONTAINERS ---
width: 12em;
height: 6.8em;
border-radius: 0px 0px 10px 10px ;
position: absolute;
bottom: 15em;
left: 3.67em;
overflow-y: scroll;
overflow-x: hidden;
z-index: 3;

--- INFO TEXT HIGHLIGHT ---
background: #FFAABD;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
border-radius: 10px;

--- MUSIC PLAYER CHANGES ---
position: relative;
left: -70px;
width: 35px;
height: 35px;

@media only screen and (max-width: 600px) {
lol, .img2 {
left: -60px;
}
}

width: 35px;
height: 35px;

@media only screen and (max-width: 600px) {
.img1 {
left: 25px;
}
}

--- NOW PLAYING TEXT ---
font-family: windows;
position: absolute;
bottom: 19em;
left: 1.5em;
z-index: 3;
--- MOBILE:
bottom: 19em;
left: 1.6em;

--- END ---