*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:#000;
    overflow:hidden;
}

/* =======================
   DESKTOP BLOCK
======================= */

#desktop-block{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:#000;
    color:white;
    text-align:center;
    padding:30px;
}

.desktop-card h1{
    font-size:80px;
    margin-bottom:20px;
}

.desktop-card h2{
    margin-bottom:10px;
}

/* =======================
   STORY APP
======================= */

#story-app{
    width:100vw;
    height:100vh;
    background:#000;
}

.story-container{
    position:relative;
    width:100%;
    height:100%;
}

/* =======================
   PROGRESS
======================= */

.progress-wrapper{
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    z-index:100;
}

.progress-bar{
    width:100%;
    height:4px;
    background:rgba(255,255,255,.2);
    border-radius:999px;
    overflow:hidden;
}

.progress-fill{
    width:30%;
    height:100%;
    background:white;
    border-radius:999px;
}

/* =======================
   HEADER
======================= */

.story-header{
    position:absolute;
    top:25px;
    left:15px;
    right:15px;

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

    z-index:101;
}

.profile-section{
    display:flex;
    align-items:center;
    gap:10px;
}

.profile-picture{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid white;
}

.username{
    color:white;
    font-weight:bold;
    font-size:15px;
}

.story-status{
    color:rgba(255,255,255,.7);
    font-size:12px;
}

.close-btn{
    border:none;
    background:none;
    color:white;
    font-size:28px;
    cursor:pointer;
}

/* =======================
   VIDEO
======================= */

.story-content{
    width:100%;
    height:100%;
}

.story-video{
    width:100%;
    height:100%;
    object-fit:cover;
    background:black;
}

/* =======================
   FOOTER
======================= */

.story-footer{
    position:absolute;
    left:15px;
    right:15px;
    bottom:20px;

    display:flex;
    gap:10px;

    z-index:100;
}

.message-box{
    flex:1;

    height:50px;

    border:none;

    border-radius:999px;

    padding:0 18px;

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

    backdrop-filter:blur(10px);

    color:white;

    outline:none;
}

.message-box::placeholder{
    color:rgba(255,255,255,.7);
}

.like-btn{
    border:none;

    min-width:90px;

    border-radius:999px;

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

    backdrop-filter:blur(10px);

    color:white;

    font-size:18px;

    cursor:pointer;

    padding:0 16px;
}

/* =======================
   MOBILE ONLY
======================= */

@media (min-width:768px){

    #story-app{
        display:none;
    }

    #desktop-block{
        display:flex;
    }

}