.dropdown button,
.dropdown-content a,
.leftmenu a{
    cursor:url("../images/heels2cursor.png") 0 0, pointer;
}

.desktop-media{
    position:relative;
    width:1000px;
    height:660px;
    margin:35px auto;
    border-radius:25px;
    background-color:#fcdcd4;
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% 400px;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;    
    overflow:hidden;
}
.menubar-media{
    width:1000px;
    height:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-sizing:border-box;
    background:rgba(255,255,255,.75);
    background-image:url("../images/menubarbg2.png");
    font-family: "Bitcount", serif;
    font-size:18px;
    color: #432b1f;
}

.leftmenu{
    display:flex;
    align-items:center;
    gap:18px;
}
.leftmenu a{
    text-decoration:none;
    color:#432b1f;
}
.dropdown{
    position:relative;
}
.dropdown button{
    background:none;
    border:none;
    font:inherit;
    color:#432b1f;
    cursor:pointer;
}
.dropdown button:hover{
    color:#f163a8;
    text-shadow:0 0 3px #ff8fb3,0 0 6px #ff4f8b;
}
.dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:130px;
    background:rgba(255,255,255,.95);
    border:2px solid #d89b9b;
    border-radius:12px;
    overflow:hidden;
    z-index:1000;
}
.dropdown-content a{
    display:block;
    padding:8px 12px;
    text-decoration:none;
    color:#432b1f;
}
.dropdown-content a:hover{
    background:#f8d9df;
}
.dropdown:hover .dropdown-content{
    display:block;
}


.media-grid{
    display:none;
    grid-template-columns:repeat(4, 150px);
    gap:60px;
    justify-content:center;
    margin-top:20px;
}
.media-card{
    width:205px;
    height:295px;
    perspective:1000px;
}
.card-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform .6s;
    transform-style:preserve-3d;
}
.media-card:hover .card-inner{
    transform:rotateY(180deg);
}

.card-front{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    border-radius:10px;
    overflow:hidden;
}
.card-front img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.card-back{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    border-radius:10px;
    overflow-y:auto;
    background-image:linear-gradient(rgba(255,245,245,0.45), rgba(255,245,245,0.45)),url("https://i.pinimg.com/1200x/63/e3/f6/63e3f66fd0df07c051c53bbb7ccbbaba.jpg");
    transform:rotateY(180deg);
    padding:15px;
    box-sizing:border-box;
}
.card-back::-webkit-scrollbar{
    width:0;
    height:0;
}
.card-back h2{
    margin-top:-2px;
    text-align:center;
    font-size:21px;
    font-family: "Allison",serif;
    color:#5b2f2f;
}
.card-back h3{
    margin-top:-6px;
    margin-bottom:-3px;
    text-align:center;
    font-size:14px;
    font-style:italic;
    font-weight:normal;
    color:#9a6c74;
}
.card-back p{
    font-size:17px;
    font-family: "CuteFont",serif;
    color:#5b4b4b;
}




.shelf-display{
    position:absolute;
    top:30px;
    left:0;
    width:100%;
    height:620px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    padding-top:20px;
    padding-bottom:20px;
}
.shelf-row{
    width:100%;
    height:320px;
    overflow:visible;
}
.spine-track{
    display:flex;
    gap:5px;
    width:max-content;
    animation:scrollLeft 45s linear infinite;
}
.spine-track.reverse{
    animation:scrollRight 45s linear infinite;
}
.spine-track img{
    width:82px;
    height:300px;
    object-fit:cover;
    border-radius:5px;
    filter:drop-shadow(-14px 12px 12px rgba(0,0,0,.5)) sepia(15%) hue-rotate(315deg) saturate(100%);
    transition:.45s ease;
    cursor:url("../images/heels2cursor.png"), pointer;
}
.spine-track img:hover{
    transform:translateY(-12px) scale(1.04);
    filter:drop-shadow(-14px 12px 12px rgba(0,0,0,.55));
    z-index:10;
}
.shelf-row:hover .spine-track{
    animation-play-state:paused;
}
.shelf-divider{
    width:400px;
    height:45px;
    object-fit:fill;
    margin:auto;
}
@keyframes scrollLeft{
    from{
      transform:translateX(0);
    }
    to{
      transform:translateX(-50%);
    }
}
@keyframes scrollRight{
    from{
      transform:translateX(-50%);
    }
    to{
      transform:translateX(0);
    }
}




.circle-return{
    position:absolute;
    right:235px;
    width:60px;
    height:60px;
    top:15px;
    z-index:20;
    transition:.3s ease;
}
.circle-return img
{
    width:100%;
    height:100%;
    object-fit:contain;
}
.circle-return:hover
{
    transform:scale(1.12) rotate(5deg);
}