.ipodBody{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -240px;
    margin-left: 0px;
    width: 350.6589px;
    height: 500px;
    background: linear-gradient(336.77deg, rgba(0, 0, 0, 0.09) 10.84%, rgba(255, 255, 255, 0) 72.51%), #EDEDED;
    box-shadow: 20px -10px 18px -1px rgba(0, 0, 0, 0.5), inset -13px 10px 14px -4px rgba(0, 0, 0, 0.23), inset 16px 26px 26px rgba(255, 255, 255, 0.65);
    border-radius: 29px;
}

.ipodScreen{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -195px;
    margin-left: 40px;
    width: 270px;
    height: 181.5126px;
    background: #DDF1FA;
    box-shadow: inset 0px 0px 4px 2px #141C25, inset 0px 1px 1px 5px rgba(0, 0, 0, 0.036);
    border-radius: 10px;
}

.ipodButtonBody{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 25px;
    margin-left: 75px;
    width: 195px;
    height: 195px;
    background: #d9d7de;
    border-radius: 100%;
    box-shadow: -3px -4px 6px rgba(255, 255, 255, 0.32), 1px 1px 4px rgba(0, 0, 0, 0.25);
}

.ipodButtonInside{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 85px;
    margin-left: 135px;
    width: 76px;
    height: 76px;
    border-radius: 100%;
    background: linear-gradient(308.87deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.056) 57.24%), #EDEDED;
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.25);
}

.reflection-blureffect{
    filter: blur(2.8px);
}

.ipodBody-middleleftreflection{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 90px;
    margin-left: -165px;
    width: 5px;
    height: 330px;
    border-radius: 100%;
    background: rgb(255, 255, 255);
    filter: blur(1px);
}


.ipodBody-topleftreflection{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 10px;
    margin-left: -170px;
    width: 75px;
    height: 75px;
    background: rgba(255, 255, 255, 0.907);
    clip-path: polygon(85% 4%, 21% 5%, 14% 8%, 9% 13%, 7% 19%, 6% 29%, 6% 93%, 10% 96%, 14% 95%, 16% 76%, 20% 36%, 23% 27%, 28% 22%, 36% 18%, 48% 14%, 60% 12%, 74% 10%, 80% 8%);
}

.ipodBody-topmiddlereflection{
    clip-path: ellipse(50% 3% at 50% 52%);
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150px;
    margin-top: -30px;
    margin-left: -65px;
    height: 85px;
    background: rgb(255, 255, 255);
}

.ipodButtonBody, .rightbutton, .leftbutton, .bottombutton{
    cursor: pointer;
}

.ipodBody-topmiddlereflection2{
    clip-path: ellipse(50% 3% at 50% 52%);
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    margin-top: -30px;
    margin-left: -30px;
    height: 90px;
    background: rgb(255, 255, 255);
}

.ipodBody-pinhighlight {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 15px;
    margin-top: -230px;
    margin-left: 318px;
    height: 10px;
    background: rgb(255, 255, 255);
    border-radius: 100%;
    filter: blur(2.1px);
    transform: rotate(10deg);
}

.rightbuttonshape{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin-top: 118px;
    margin-left: 235px;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #ffff;
}

.rightbuttonshape2{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin-top: 118px;
    margin-left: 242px;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #ffff;
}

.rightbuttonsquare{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 11px;
    margin-top: 118px;
    margin-left: 250px;
    background: rgb(255, 255, 255);

}

.leftbuttonshape{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin-top: 118px;
    margin-left: 97px;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #ffff;
    transform: rotate(180deg);
}

.leftbuttonshape2{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin-top: 118px;
    margin-left: 104px;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #ffff;
    transform: rotate(180deg);
}

.leftbuttonsquare{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 11px;
    margin-top: 118px;
    margin-left: 96px;
    background: rgb(255, 255, 255);
    transform: rotate(180deg);
}

.bottombuttonshape{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin-top: 195px;
    margin-left: 164px;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #ffff;;
}

.bottombuttonsquare{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 11px;
    margin-top: 195px;
    margin-left: 176px;
    background: rgb(255, 255, 255);
    transform: rotate(180deg);
}

.bottombuttonsquare2{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 11px;
    margin-top: 195px;
    margin-left: 181px;
    background: rgb(255, 255, 255);
    transform: rotate(180deg);
}

.topbutton{
    position: fixed;
    top: 50%;
    left: 50%;
    font-size: 11px;
    margin-top: 39px;
    margin-left: 158px;
    color: #ffffff;
    font-family: forma-djr-display, sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 1px;
    cursor: pointer;
}

.playicon{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin-top: -180px;
    margin-left: 60px;
    border-style: solid;
    border-width: 7px 0 7px 13px;
    border-color: transparent transparent transparent #719DB5;;
}

.lockiconsquare{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 10px;
    margin-top: -176px;
    margin-left: 85px;
    background: #719DB5;
}

.lockicontop{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    margin-top: -182px;
    margin-left: 86px;
    background: #719DB5;
    border-radius: 10rem 10rem 0 0;
}

.lockiconspace{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 4px;
    margin-top: -180px;
    margin-left: 88px;
    background: #DDF1FA;
    border-radius: 10rem 10rem 0 0;
}

.screenline{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    margin-top: -158px;
    margin-left: 50px;
    border: 0;
    width: 250px;
    border-top: 2px solid #719DB5;

}

.nowplaying{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -184px;
    margin-left: 126px;
    font-family: lores-12,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: #719DB5;
}

.batteryicon{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -184px;
    margin-left: 268px;
    width: 32px;
    height: 28px;
    clip-path: polygon(89% 13%, 0 13%, 0 68%, 89% 68%, 89% 53%, 100% 53%, 100% 28%, 89% 28%);
    background-color: #719DB5;
}

.batteryiconspace{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -181px;
    margin-left: 270px;
    width: 27.5px;
    height: 21px;
    clip-path: polygon(89% 13%, 0 13%, 0 68%, 89% 68%, 89% 53%, 100% 53%, 100% 28%, 89% 28%);
    background-color: #DDF1FA;
}

.batteryiconsquare{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -177px;
    margin-left: 273px;
    width: 15px;
    height: 8px;
    background-color: #719DB5;
}

.numbersonscreen{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -149px;
    margin-left: 60px;
    font-family: lores-12,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-stretch: 50%;
    font-size: 13px;
    color: #719DB5;
}

.songinfo{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -130px;
    margin-left: 100px;
    font-family: lores-12,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    color: #719DB5;
    line-height: 21px;
    text-align: center;
    letter-spacing: 1.5px;
    font-stretch: 50%;
}

.playbar{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -56px;
    margin-left: 55px;
    color: #719DB5;
    border-style: solid;
    border-radius: 8px;
    border-width: 1.5px;
    height: 8px;
    width:240px;
}

.playbarfill{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: 55px;
    background-color: #719DB5;
    height: 10px;
    width:110px;
    border-radius: 8px 0px 0 8px;
}

.playtimeleft{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: 60px;
    font-family: lores-12,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-stretch: 50%;
    font-size: 13px;
    color: #719DB5;
}

.playtimeright{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: 260px;
    font-family: lores-12,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-stretch: 50%;
    font-size: 13px;
    color: #719DB5;
}

.helloipod{
    font-family: proforma,serif;
    font-weight: 500;
    font-style: normal;
    position: fixed;
    margin-top: -30px;
    margin-left: -400px;
    top: 50%;
    left: 50%;
    font-size: 50px;
}

.earbudbottom{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -287px;
    margin-left: 260px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.122) 20.31%, rgba(255, 255, 255, 0.2) 29.69%, rgba(0, 0, 0, 0.138) 72.17%, rgba(0, 0, 0, 0.076) 95.31%, rgba(255, 255, 255, 0.042) 100%), #EDEDED;
    box-shadow: 17px -2px 12px #939393, inset -7px 1px 6px rgba(0, 0, 0, 0.25);
    border-radius: 15px 15px 0px 0px;
    width: 29px;
    height: 47px;
}

.earbudtop{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -325px;
    margin-left: 267px;
    width: 14px;
    height: 47px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.122) 20.31%, rgba(255, 255, 255, 0.2) 29.69%, rgba(0, 0, 0, 0.138) 72.17%, rgba(0, 0, 0, 0.076) 95.31%, rgba(255, 255, 255, 0.042) 100%), #EDEDED;
    box-shadow: 17px -2px 12px rgba(0, 0, 0, 0.43);
    border-radius: 15px 15px 0px 0px;
}

.earbudline1{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -370px;
    margin-left: 268px;
    width: 100px;
    height: 200px;
}

.earbuds {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: 480px;
}