/* ==========================================
   Alice Peirce Photo Gallery
   Apple Photos Inspired
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    color: white;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================
   Main App
========================================== */

#app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ==========================================
   Header
========================================== */

header {

    text-align: center;

    padding: 8px 0;

    border-bottom: 1px solid rgba(255,255,255,.05);

}

header h1 {

    font-size: 1.4rem;

    font-weight: 500;

    letter-spacing: 1px;

}

/* ==========================================
   Albums
========================================== */

#albumBar {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    overflow-x: auto;
    background: rgba(255,255,255,.03);
}

#albumBar::-webkit-scrollbar {
    display: none;
}

.albumButton {

    color: white;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 30px;

    padding: 10px 18px;

    cursor: pointer;

    transition: .25s;
}

.albumButton:hover {

    background: rgba(255,255,255,.16);

}

.albumButton.active {

    background: white;

    color: black;

}

/* ==========================================
   Viewer
========================================== */

#viewer {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    overflow: hidden;

}

#photoContainer {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 10px;

}

#photo {

    width: auto;

    height: auto;

    max-width: 96vw;

    max-height: 86vh;

    object-fit: contain;

    border-radius: 10px;

    box-shadow: 0 20px 70px rgba(0,0,0,.65);

    transition:
        opacity .35s ease,
        transform .35s ease;

}

#photo:hover {

    transform: scale(1.01);

}

/* ==========================================
   Caption
========================================== */

#caption {

    margin-top: 8px;

    text-align: center;

}

#albumTitle {

    font-size: 1rem;

    font-weight: 500;

    margin-bottom: 6px;

}

#photoCounter {

    color: rgba(255,255,255,.65);

    font-size: .9rem;

}

/* ==========================================
   Previous / Next
========================================== */

.navButton {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 58px;

    height: 58px;

    border-radius: 50%;

    border: none;

    background: rgba(255,255,255,.12);

    color: white;

    font-size: 28px;

    cursor: pointer;

    transition: .25s;

    backdrop-filter: blur(10px);

}

.navButton:hover {

    background: rgba(255,255,255,.28);

}

#previousButton {

    left: 25px;

}

#nextButton {

    right: 25px;

}

/* ==========================================
   Filmstrip
========================================== */

#filmstrip {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding: 8px;

    background: rgba(255,255,255,.04);

    border-top: 1px solid rgba(255,255,255,.08);

}

#filmstrip::-webkit-scrollbar {

    height: 8px;

}

#filmstrip::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,.2);

    border-radius: 20px;

}

.thumbnail {

    width: 72px;

    height: 56px;

    object-fit: cover;

    border-radius: 8px;

    cursor: pointer;

    opacity: .55;

    transition: .25s;

    border: 2px solid transparent;

    flex-shrink: 0;

}

.thumbnail:hover {

    opacity: 1;

    transform: scale(1.06);

}

.thumbnail.active {

    opacity: 1;

    border-color: white;

}

/* ==========================================
   Footer
========================================== */

footer {

    display: flex;

    justify-content: center;

    gap: 15px;

    padding: 18px;

    border-top: 1px solid rgba(255,255,255,.08);

}

footer button {

    padding: 12px 22px;

    border-radius: 30px;

    border: none;

    background: rgba(255,255,255,.10);

    color: white;

    cursor: pointer;

    transition: .25s;

    font-size: .95rem;

    backdrop-filter: blur(10px);

}

footer button:hover {

    background: rgba(255,255,255,.25);

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:900px) {

    header h1 {

        font-size: 1.5rem;

    }

    #photo {

        max-width: 98%;

        max-height: 60vh;

    }

    .navButton {

        width: 48px;

        height: 48px;

        font-size: 22px;

    }

    .thumbnail {

        width: 72px;

        height: 56px;

    }

    footer {

        flex-direction: column;

        align-items: center;

    }

}

/* ==============================
   Albums Button
============================== */

#albumBar{

    display:flex;

    justify-content:center;

    padding:18px;

}

#albumsButton{

    background:rgba(255,255,255,.08);

    color:white;

    border:none;

    border-radius:30px;

    padding:12px 26px;

    font-size:16px;

    cursor:pointer;

    transition:.25s;

}

#albumsButton:hover{

    background:rgba(255,255,255,.20);

}

/* ==============================
   Album Menu
============================== */

Absolutely! This is where it starts feeling like a real app instead of a webpage.

Let's make it feel like Apple Photos on macOS.

Step 1 - Replace your Album Menu CSS

Delete your current #albumMenu CSS and replace it with this:

/* ==========================================
   Albums Popup
========================================== */

#albumBar {

    display: flex;
    justify-content: center;
    padding: 18px;
    position: relative;
}

#albumsButton {

    background: rgba(255,255,255,.08);
    color: white;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 30px;
    padding: 12px 28px;
    font-size: 16px;
    cursor: pointer;
    transition: .25s;
    backdrop-filter: blur(20px);
}

#albumsButton:hover {

    background: rgba(255,255,255,.18);

}

#albumMenu {

    position: absolute;

    left: 50%;
    top: 125px;

    transform: translate(-50%,-20px);

    width: 360px;

    background: rgba(35,35,35,.88);

    backdrop-filter: blur(25px);

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 60px rgba(0,0,0,.55);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .30s,
        transform .30s,
        visibility .30s;

    z-index: 500;

}

#albumMenu.show {

    opacity: 1;

    visibility: visible;

    transform: translate(-50%,0);

}

.albumItem {

    padding: 18px 24px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: .2s;

    border-bottom: 1px solid rgba(255,255,255,.05);

}

.albumItem:last-child {

    border-bottom: none;

}

.albumItem:hover {

    background: rgba(255,255,255,.08);

}

.albumName {

    font-size: 16px;

}

.albumCount {

    color: rgba(255,255,255,.45);

    font-size: 14px;

}

#albumMenu.show{

    display:block;

}

.albumItem{

    padding:18px;

    cursor:pointer;

    transition:.2s;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.albumItem:last-child{

    border-bottom:none;

}

.albumItem:hover{

    background:#2c2c2c;

}

#overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.45);

    backdrop-filter: blur(8px);

    opacity: 0;

    visibility: hidden;

    transition: .30s;

    z-index: 400;

}

#overlay.show{

    opacity:1;

    visibility:visible;

}