*{
box-sizing:border-box;
}


body{

margin:0;

font-family:

Arial,Helvetica,sans-serif;

background:#f4f4f4;

color:#222;

}



.header{
    background:#111;
    color:white;
    padding:25px 20px;
    position:relative;
}

.logo{
    font-size:28px;
    font-weight:700;
}

.header-logo{
    position:absolute;
    top:50%;
    right:20px;
    width:60px;
    height:60px;
    object-fit:contain;
    transform:translateY(-50%);
}


.subtitle{

color:#ccc;

margin-top:8px;

}



.container{

max-width:720px;

margin:auto;

padding:15px;

}



.nav{

background:white;

padding:15px;

display:flex;

gap:25px;

}


.nav a{

text-decoration:none;

color:#111;

font-weight:bold;

}




.card{

background:white;

padding:20px;

border-radius:14px;

margin-bottom:18px;

}



.cover{

width:100%;

border-radius:12px;

}




.tag{

display:inline-block;

background:#eee;

padding:6px 12px;

border-radius:20px;

font-size:13px;

}



.title{

font-size:24px;

font-weight:bold;

line-height:1.4;

margin-top:12px;

}



.desc{

color:#555;

line-height:1.7;

}



.time{

font-size:13px;

color:#888;

}



.btn{

display:block;

background:#111;

color:white;

padding:15px;

border-radius:10px;

text-align:center;

text-decoration:none;

margin-top:18px;

}



.article h1{

font-size:30px;

}


.article p{

font-size:17px;

line-height:1.9;

}



.footer{

padding:30px;

text-align:center;

font-size:12px;

color:#888;

}

/* =========================
   Loading Screen
========================= */

#loading-screen{
    position:fixed;
    inset:0;
    background:#111;

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

    z-index:99999;

    opacity:1;
    visibility:visible;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

#loading-screen.hide{
    opacity:0;
    visibility:hidden;
}

.loading-content{
    text-align:center;
}

.loading-logo{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:25px;
}

.loading-spinner{
    width:38px;
    height:38px;

    margin:0 auto 20px;

    border:3px solid #444;
    border-top-color:#fff;

    border-radius:50%;

    animation:loading-spin 0.9s linear infinite;
}

.loading-text{
    color:#fff;
    font-size:16px;
    letter-spacing:1px;
}

.loading-countdown{
    margin-top:15px;
    color:#fff;
    font-size:28px;
    font-weight:700;
    letter-spacing:2px;
}

@keyframes loading-spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}