*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #121212;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        sans-serif;

}
#phone {

    position: relative;

    width: 375px;
    height: 667px;

    overflow: hidden;

    border-radius: 28px;

    background: #000;

    box-shadow:
        0 0 0 8px #111,
        0 20px 80px rgba(0,0,0,.55);

}
#wallpaper {

    position: absolute;

    inset: 0;

    background-image:
        url("../assets/stupidBitchAss.jpeg");

    background-size: cover;
    background-position: center;

    z-index: 0;

}
#wallpaper::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.08),
            rgba(0,0,0,.12)
        );

}
.status-bar {

    position: relative;

    z-index: 5;

    height: 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding:
        10px
        15px
        0;

    color: white;

    font-size: 12px;
    font-weight: 600;

    text-shadow:
        0 1px 2px rgba(0,0,0,.6);

}
.status-left,
.status-center,
.status-right {

    display: flex;
    align-items: center;

    gap: 5px;

}
.home-screen {

    position: relative;

    z-index: 2;

    height: calc(100% - 120px);

    padding-top: 20px;

}
.app-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 24px 10px;

    padding: 10px 15px;

}
.app-icon {

    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;

    color: white;

    transition:
        transform .15s ease;

}
.app-icon span {

    margin-top: 6px;

    font-size: 11px;

    text-shadow:
        0 1px 2px rgba(0,0,0,.7);

}
.icon {

    width: 60px;
    height: 60px;

    border-radius: 14px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 28px;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.2),
        0 3px 10px rgba(0,0,0,.25);

}
.messages {
    background: #34c759;
}
.messages::before {
    content: "💬";
}
.photos {
    background:
        linear-gradient(
            135deg,
            #ff5252,
            #ffd740,
            #69f0ae,
            #40c4ff
        );
}
.photos::before {
    content: "🌸";
}
.notes {
    background:
        linear-gradient(
            #fff7a6,
            #ffd54f
        );
}
.notes::before {
    content: "📝";}

.contacts {
    background:
        linear-gradient(
            #ffffff,
            #d7d7d7
        );
}
.contacts::before {
    content: "👤";
}
.phone {
    background:
        linear-gradient(
            #62ff62,
            #28c840
        );
}
.phone::before {
    content: "📞";
}
.settings {
    background:
        linear-gradient(
            #bdbdbd,
            #7e7e7e
        );
}
.settings::before {
    content: "⚙";
}
.dock {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 75px;
    height: 72px;
    z-index: 5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 18px;
    background:
        rgba(255,255,255,.18);
    backdrop-filter:
        blur(18px);
    -webkit-backdrop-filter:
        blur(18px);
}
.dock-icon {

    text-decoration: none;

    transition:
        transform .15s ease;

}
.dock-icon:active {

    transform:
        scale(.92);

}
.dock .icon {

    width: 54px;
    height: 54px;

}
#homeButton {

    position: absolute;

    left: 50%;
    bottom: 10px;

    transform:
        translateX(-50%);

    width: 58px;
    height: 58px;

    border-radius: 50%;

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

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

    backdrop-filter:
        blur(8px);

    cursor: pointer;

    z-index: 10;

}
#homeButton::after {

    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    top: 50%;
    left: 50%;

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

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

    border-radius: 4px;

}
#homeButton:active {

    transform:
        translateX(-50%)
        scale(.92);

}
.app-page {

    position: relative;

    z-index: 2;

    height: calc(100% - 80px);

    overflow-y: auto;

    background:
        #f2f2f7;

}
.app-header {

    padding: 14px;

    background: white;

    border-bottom:
        1px solid #ddd;

}
.app-content {

    padding: 16px;

}
.spotify {
    background: #1ed760;
}
.spotify::before {
    content: "♫";
    color: black;
    font-weight: bold;
}