*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#111 url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    color:white;

    font-family:Verdana, Arial, sans-serif;

    overflow-x:hidden;

}

#page{

    width:1024px;

    margin:20px auto;

    border:4px solid #444;

    background:#1a1a1a;

    box-shadow:0 0 30px black;

}

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

header{

    background:linear-gradient(#444,#111);

    border-bottom:3px solid crimson;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

}

#logo h1{

    font-size:42px;

    color:#ff4040;

    text-shadow:

    2px 2px black,

    0 0 20px red;

}

#logo p{

    color:#ccc;

    margin-top:5px;

}

#clock{

    font-size:28px;

    background:black;

    color:#00ff00;

    border:3px inset #555;

    padding:10px;

    width:170px;

    text-align:center;

}

/* ================= MARQUEE ================= */

marquee{

    background:#000;

    color:#ffcc00;

    padding:8px;

    font-weight:bold;

    border-top:2px solid #444;

    border-bottom:2px solid #444;

}

/* ================= NAV ================= */

nav{

    background:#222;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

}

nav a{

    text-decoration:none;

    color:white;

    background:#333;

    padding:12px 20px;

    margin:6px;

    border:2px outset #666;

    font-weight:bold;

    transition:.2s;

}

nav a:hover{

    background:crimson;

    transform:translateY(-2px);

}

/* ================= LAYOUT ================= */

#content{

    display:grid;

    grid-template-columns:220px 1fr 220px;

    gap:15px;

    padding:15px;

}

.panel{

    background:#252525;

    border:2px solid #555;

    padding:12px;

    margin-bottom:15px;

}

.panel h2{

    color:#ff5050;

    margin-bottom:10px;

    border-bottom:1px solid #555;

    padding-bottom:5px;

}

/* ================= PLAYER ================= */

#player{

    background:#202020;

    border:2px solid #555;

    padding:15px;

}

#player h2{

    color:#ff5050;

    margin-bottom:15px;

}

#screen{

    background:black;

    border:5px inset #555;

    padding:10px;

}

#screen img{

    width:100%;

    display:block;

}

#videoTitle{

    margin-top:15px;

    color:#ffcc00;

}

#videoAlbum{

    color:#bbb;

    margin-bottom:15px;

}

.controls{

    display:flex;

    justify-content:center;

    gap:15px;

}

/* ================= BUTTONS ================= */

button{

    width:100%;

    margin-top:8px;

    padding:10px;

    background:linear-gradient(#555,#222);

    color:white;

    border:2px outset #777;

    cursor:pointer;

    font-weight:bold;

}

button:hover{

    background:linear-gradient(crimson,#880000);

}

.controls button{

    width:180px;

}

/* ================= INPUT ================= */

input{

    width:100%;

    padding:8px;

    background:black;

    color:white;

    border:2px inset #555;

}

/* ================= NEWS ================= */

#news{

    margin-top:20px;

}

.newsItem{

    background:#2b2b2b;

    border-left:5px solid crimson;

    padding:10px;

    margin-bottom:12px;

}

.newsItem h3{

    color:#ff8080;

    margin-bottom:5px;

}

/* ================= COUNTDOWN ================= */

#countdown{

    margin-top:20px;

    background:#252525;

    padding:15px;

    border:2px solid #555;

}

#countdown h2{

    color:#ff5050;

    margin-bottom:10px;

}

#countdown ol{

    margin-left:25px;

    line-height:1.8;

}

/* ================= TABLE ================= */

table{

    width:100%;

    border-collapse:collapse;

}

td{

    border:1px solid #555;

    padding:6px;

}

tr:nth-child(even){

    background:#333;

}

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

footer{

    background:#111;

    border-top:3px solid crimson;

    text-align:center;

    padding:15px;

    color:#aaa;

}

/* ================= CRT EFFECT ================= */

#scanlines{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

    opacity:.10;

    background:repeating-linear-gradient(

        to bottom,

        transparent 0px,

        transparent 2px,

        black 3px

    );

    z-index:9999;

}

/* ================= SEARCH ================= */

#searchResult{

    margin-top:10px;

    color:#00ff66;

    min-height:20px;

}

/* ================= VISITOR ================= */

#visitorCounter{

    text-align:center;

    font-size:26px;

    color:#00ff00;

    background:black;

    padding:10px;

    border:3px inset #666;

    letter-spacing:2px;

}

/* ================= QUOTE ================= */

#quoteBox{

    background:black;

    border:2px inset #555;

    padding:10px;

    color:#ffcc00;

    min-height:70px;

}

/* ================= RESPONSIVE ================= */

@media (max-width:1050px){

#page{

width:95%;

}

#content{

grid-template-columns:1fr;

}

.controls{

flex-direction:column;

}

.controls button{

width:100%;

}

}