body {

    margin:0;

    min-height:100vh;

    overflow-x:hidden;

    overflow-y:auto;

}

    background:
    radial-gradient(circle at top left, white 0%, transparent 25%),
    linear-gradient(
        135deg,
        #ffd6f3,
        #ffb5e8,
        #ffc9f5
    );

}


/* DESKTOP */

.desktop {

    min-height:100vh;

    padding:30px;

}


/* TITLE */

h1 {

    text-align:center;

    color:white;

    font-size:45px;

    text-shadow:
    0 3px 0 #ff8bd4,
    0 0 20px white;

    animation: float 3s infinite ease-in-out;

}



@keyframes float {

    0%,100% {

        transform:translateY(0);

    }

    50% {

        transform:translateY(-10px);

    }

}



/* ICON AREA */

.icons {

    display:flex;

    gap:35px;

    flex-wrap:wrap;

    justify-content:center;

    margin-top:40px;

}



/* ICONS */

.icon {

    width:120px;

    text-align:center;

    text-decoration:none;

    color:white;

    font-weight:bold;

    font-size:18px;

    transition:.3s;

}



/* ICON IMAGE */

.icon img {

    width:80px;

    height:80px;

    padding:12px;

    background:

    linear-gradient(
        white,
        #ffd3f0
    );

    border-radius:25px;


    box-shadow:

    0 8px 20px rgba(255,100,200,.35),

    inset 0 5px 10px white;


    animation:

    bounce 3s infinite ease-in-out;

}



/* MAKE EACH ICON BOUNCE DIFFERENTLY */

.icon:nth-child(2) img {

    animation-delay:.4s;

}


.icon:nth-child(3) img {

    animation-delay:.8s;

}


.icon:nth-child(4) img {

    animation-delay:1.2s;

}



@keyframes bounce {


    0%,100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-12px);

    }


}



/* HOVER EFFECT */

.icon:hover {

    transform:

    scale(1.2)

    rotate(-5deg);

}



.icon:hover img {

    box-shadow:

    0 0 30px white,

    0 0 50px #ff8bd4;

}



/* WINDOW */

.window {


    width:420px;


    margin:60px auto;


    padding:30px;


    background:

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


    backdrop-filter:blur(15px);


    border-radius:30px;


    border:

    3px solid rgba(255,255,255,.7);



    box-shadow:

    0 15px 40px rgba(255,100,200,.35);



    color:#d45ba6;


    animation:

    windowPop .8s ease;

}



@keyframes windowPop {


    from {

        opacity:0;

        transform:scale(.8);

    }


    to {

        opacity:1;

        transform:scale(1);

    }


}




.window h2 {

    color:#ff69c8;

    text-align:center;

}



/* TASKBAR */

.taskbar {

    position:relative;

    width:100%;

    height:55px;

    margin-top:40px;





    background:

    rgba(255,255,255,.4);



    backdrop-filter:blur(15px);



    border-top:

    2px solid white;



    display:flex;


    align-items:center;



    padding-left:25px;



    color:white;



    font-weight:bold;



    box-shadow:

    0 -5px 20px rgba(255,100,200,.3);


}



/* LITTLE BUBBLES */


.desktop::before {


    content:"";


    position:absolute;


    width:150px;

    height:150px;


    background:white;


    opacity:.25;


    border-radius:50%;


    top:100px;

    left:50px;


    animation:

    bubble 8s infinite;


}



.desktop::after {


    content:"";


    position:absolute;


    width:90px;

    height:90px;


    background:white;


    opacity:.3;


    border-radius:50%;


    bottom:100px;


    right:100px;


    animation:

    bubble 6s infinite;


}



@keyframes bubble {


    0%,100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-40px);

    }


}

/* ========================= */
/*       ART GALLERY         */
/* ========================= */



.gallery-window {


width:900px;


margin:40px auto;


padding:25px;


background:

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


backdrop-filter:

blur(15px);



border-radius:35px;



border:

3px solid rgba(255,255,255,.8);



box-shadow:


0 20px 50px rgba(255,100,200,.35);



animation:

windowPop .8s ease;


}





.gallery-title {


background:

linear-gradient(

white,

#ffd0ef

);



padding:15px;



border-radius:20px;



text-align:center;



font-size:25px;



font-weight:bold;



color:#ff70c9;



box-shadow:

inset 0 5px 10px white;


}





.gallery {


display:grid;


grid-template-columns:

repeat(3,1fr);



gap:30px;



margin-top:30px;


}







.art-card {



background:

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



padding:18px;



border-radius:25px;



text-align:center;



color:#d65ca8;



box-shadow:


0 10px 25px rgba(255,100,200,.25);



transition:.3s;



animation:

float 4s infinite ease-in-out;



}







.art-card:nth-child(2){

animation-delay:.5s;

}



.art-card:nth-child(3){

animation-delay:1s;

}








.art-card img {


width:100%;


border-radius:20px;



border:

4px solid white;



box-shadow:


0 0 20px rgba(255,150,220,.5);



transition:.3s;


}







.art-card:hover {



transform:

scale(1.08)

rotate(2deg);



box-shadow:


0 0 40px white,

0 0 60px #ff8bd4;


}






.art-card:hover img {


transform:

scale(1.05);



}






.art-card h2 {


color:#ff69c8;



font-size:20px;


}







.art-card p {


font-size:14px;


}

.art-button {

text-decoration:none;

color:inherit;

}



.art-button .art-card {

cursor:pointer;

}



.art-button:hover .art-card {

transform:

scale(1.08)

rotate(2deg);

}


/* ====================== */
/* ARTWORK VIEWER         */
/* ====================== */


.viewer-window {

width:800px;

margin:40px auto;

padding:25px;


background:

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


backdrop-filter:blur(15px);


border-radius:35px;


border:3px solid white;


box-shadow:

0 20px 50px rgba(255,100,200,.35);


text-align:center;


}



.zoom-container {


width:700px;

height:500px;


margin:auto;


overflow:hidden;


border-radius:25px;


background:white;


cursor:zoom-in;


}



.zoom-container img {


width:100%;

height:100%;


object-fit:contain;


transition:

transform .3s ease;


}

.info-card a {

display:inline-block;

margin:8px 0;

padding:10px 16px;

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

border:2px solid rgba(255,255,255,.8);

border-radius:18px;

text-decoration:none;

color:#ff4fa5;

font-weight:bold;

transition:0.25s ease;

box-shadow:0 4px 10px rgba(255,150,220,.2);

}

.info-card a:hover {

transform:translateY(-3px) scale(1.05);

background:white;

box-shadow:
0 0 18px rgba(255,180,230,.8);

}