body{
    background-color:rgb(0, 0, 0);
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color:white;
}
/*base*/
.icons-grid{
    display:grid;
    grid-template-columns: repeat(5, 80px);
    gap: 40px;
}
.icons{
    width:80px;
    height:80px;
    border-radius: 20px;
    background-color: rgb(0, 0, 0);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size:15px;
    cursor: pointer;
    transition: 0.2s;
    padding:5px;
}
.icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding:3px;
}
.icons:hover{
    transform:scale(1.1);
    background-color:#5c5c5c;
}

dialog{
    background-color: beige;
    color:black;
    border-radius: 12px;
    border: 1px solid #444;
    padding: 20px;
    width: 37%;
    text-align: center;
}

dialog::backdrop{
    background-color: rgb(0, 0, 0, 0.8);
}
dialog h3{
    text-align:left;
}
section{
    text-align: right;
}
article{
    color:#7c7777;
}
nav{
    text-align:right;
    color:#7f7f7f;
}
button{
    margin-top: 15px;
    padding: 6px 14px;
    background-color: #1d16ff;
    border: none;
    color:white;
    cursor: pointer;
}
.tiny-close {
    font-size: 3px;
    opacity: 0.2;
    position: absolute;
    bottom: 2px;
    right: 2px;
    background-color:rgb(251, 210, 161);
}

/*intro*/
.egg-bg{
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        #0072d6,
        #00f2fe
    );
}
/*weather*/
.weather-app{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.weather-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(103, 103, 103)
}
.weather-bg {
    position: absolute;
    inset: 0;
    z-index: -1;


    background: linear-gradient(
        to bottom,
        #1c95ff,
        #00f2fe,
        #dee055
    );

    filter: blur(40px);
    transform: scale(1.2);
}
/*photo*/
.photos-app {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.photo {
    width: 100%;
    aspect-ratio: 1;
    background: #222;
    border-radius: 8px;
    background-position: center;
}
.photo:nth-child(1) { background: url('https://media.tenor.com/_zWYqfZdneIAAAAM/shocked-face-shocked-meme.gif') center/cover; }
.photo:nth-child(2) { background: url('https://media.tenor.com/D_siaJ9VQ9gAAAAM/cat-confused.gif') center/cover; }
.photo:nth-child(3) { background: url('https://tcmhuxevcnxpxpubnhkm.supabase.co/storage/v1/object/public/meme-images/memes/2026/03/01/46cbd1f8-ee64-4e2f-bb2d-96f3a2def3f7.webp') center/cover; }
.photo:nth-child(4) { 
    background: url('https://media.tenor.com/Vsa5nvYxHrYAAAAM/no.gif') center/cover; 
    filter: brightness(1.0);
}
.photo:nth-child(5) { background: url('https://media.tenor.com/HmFcGkSu58QAAAAM/silly.gif') center/cover; }
.photo:nth-child(6) { background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0X2JE59Tf1vpLQCBzc1gVJprf5T3eVe_5Bg&s') center/cover; }

.back-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
}

.photo-info {
    padding: 15px;
    color: rgb(53, 53, 53);
    font-size: 14px;
}
/*clock*/
.clock-bg {
    position: absolute;
    inset: 0;
    z-index: -1;


    background: linear-gradient(
        to bottom,
        #9d9494,
        #1d1919,
        #000000
    );

    filter: blur(40px);
    transform: scale(1.2);
}
.clock-app{
    color:aliceblue;
}
.divider{
    height: 1px;
    background: #3b3b3b;
    opacity: 0.3;
}
.dividers{
    height: 1px;
    background: #000000;
    opacity: 0.3;
}
/*notes*/
.notes-bg{
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fffccb;
}
.notes-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(103, 103, 103)
}
.lock-img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/*pop1*/
.circle {
    position: fixed;
    width: 60px;
    height: 60px;
    background: rgba(255, 0, 0, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pop 1s ease-out forwards;
    pointer-events: none;
}

@keyframes pop {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(4); opacity: 0; }
}

.phone-bg{
    background: #000000;
}
/*Messages*/
.messages-app {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bubble {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 14px;
}

/* received */
.bubble.left {
    background: #e5e5ea;
    align-self: flex-start;
}

/* sent */
.bubble.right {
    background: #007aff;
    color: white;
    align-self: flex-end;
}

.bubble.strange {
    background: black;
    color: red;
}

.typing {
    font-style: italic;
    color: gray;
}

/*health*/
.health-app{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.health-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(255, 255, 255)
}
.health-bg {
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        to bottom,
        #ff8ba0,
        #bc2fba,
        #ff9494
    );

    filter: blur(40px);
    transform: scale(1.2);
}
/*mood*/
.mood-bg {
    padding: 20px;
    background: linear-gradient(135deg, #87cefa, #f0e68c); /* sky-like blurry mix */
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50vh;
    border-radius: 20px;
}

.mood-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.mood-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #c9c9c9; 
}
.mood-circle1 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ff6961; 
}
.mood-circle2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #14ff33; 
}
.mood-circle3 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffea29; 
}

.dividar {
    width: 60%;
    height: 2px;
    background: #828282;
}
/*pop2*/
.popup-msg {
    position: fixed;
    background: white;
    color: black;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    transform: translate(-50%, -50%);
}
/*Contact*/
.contacts-app .contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #a3a3a3;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.contact.strange {
    color: red;
}
.contact-bg {
    position: absolute;
    inset: 0;
    z-index: -1;


    background: linear-gradient(
        to bottom,
        #ffffff,
        #000000,
        #ffffff
    );

    filter: blur(40px);
    transform: scale(1.2);
}
/*messages*/
.message {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

.message.right {
    align-self: flex-end;
    align-items: flex-end;
}

.time {
    font-size: 11px;
    color: gray;
    margin-top: 2px;
}

/*pop3*/
.flash {
    position: fixed;
    inset: 0;
    background: white;
    opacity: 0.9;
    animation: flashAnim 0.3s ease-out;
}

@keyframes flashAnim {
    from { opacity: 1; }
    to { opacity: 0; }
}
/*pop4*/
.wave-effect {
    animation: wave 2s ease-in-out;
}

@keyframes wave {
    0% { transform: scale(1) skew(0deg); }
    25% { transform: scale(1.02) skew(2deg); }
    50% { transform: scale(0.98) skew(-2deg); }
    75% { transform: scale(1.01) skew(1deg); }
    100% { transform: scale(1) skew(0deg); }
}
/*news*/
.news-bg{
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        to bottom,
        #e78484,
        #fdff9a,
        #ff892f
    );

    filter: blur(40px);
    transform: scale(1.2);
}
.news-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(0, 0, 0)
}
/*Phone*/
.phone-app .phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #7f7f7f;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.phone {
    color: red;
}
/*calendar*/
.Calendar-app{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.Calendar-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(103, 103, 103)
}
.Calendar-bg {
    position: absolute;
    inset: 0;
    z-index: -1;


    background: linear-gradient(
        to bottom,
        #d3da9e,
        #d2fba5,
        #dee055
    );

    filter: blur(40px);
    transform: scale(1.2);
}
/*calculator*/
.Calculator-app{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.Calculator-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(103, 103, 103)
}
.Calculator-bg {
    position: absolute;
    inset: 0;
    z-index: -1;


    background: linear-gradient(
        to bottom,
        #114616,
        #26ec41,
        #0d6135
    );

    filter: blur(40px);
    transform: scale(1.2);
}
/*pop5*/
.creepy {
    position: fixed;
    inset: 0;
    background: black;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    letter-spacing: 2px;
}

/*Lock*/
.alert-box {
    position: fixed;
    width: 200px;
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    font-size: 14px;
    z-index: 9999;
}

.alert-box button {
    margin-top: 8px;
    width: 100%;
    background: #ff0000;
    color: white;
    border: none;
    padding: 5px;
    border-radius: 6px;
}
.alert-box {
    pointer-events: all;
}

body {
    overflow: hidden;
}

/*wallet*/
.wallet-bg{
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fffccb;
}
.wallet-bg {
    position: absolute;
    inset: 0;
    z-index: -1;


    background: linear-gradient(
        to bottom,
        #022b50,
        #12cfd9,
        #020335
    );

    filter: blur(40px);
    transform: scale(1.2);
}
.wallet-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(103, 103, 103)
}
.lock-img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/*Find*/
.FindMy-app{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.FindMy-box{
    border-radius: 20px;
    padding: 5px;
    border: 1px solid rgb(103, 103, 103)
}
.FindMy-bg {
    position: absolute;
    inset: 0;
    z-index: -1;


    background: linear-gradient(
        to bottom,
        #31312d,
        #dadbda,
        #464642
    );

    filter: blur(40px);
    transform: scale(1.2);
}