/* ===== General Reset ===== */
body, h1, h2, h3, ul, li, p {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Trebuchet MS", Arial, sans-serif;
    background: #0a0a0a url('https://wallpaperaccess.com/full/2552824.jpg') no-repeat center fixed;
    background-size: cover;
    color: #e5e5e5;
}

/* ===== Page Layout ===== */

#wrapper {
    width: 960px;
    margin: 20px auto;
    background: rgba(0,0,0,0.75);
    border: 2px solid #333;
    box-shadow: 0 0 20px #000;
}

/* ===== Header ===== */
header {
    background: linear-gradient(#141414, #2e2e2e);
    border-bottom: 2px solid #444;
    padding: 20px;
    text-align: center;
}

#logo h1 {
    font-size: 48px;
    color: #00eaff;
    text-shadow: 0 0 8px #00eaff;
}

.tagline {
    color: #ccc;
    margin-top: 5px;
    font-style: italic;
}

/* ===== Navigation Bar ===== */

nav {
    background: linear-gradient(#1a1a1a, #0c0c0c);
    border-bottom: 2px solid #444;
}

nav ul {
    list-style: none;
    text-align: center;
}

nav li {
    display: inline-block;
    margin: 0 10px;
}

nav a {
    text-decoration: none;
    padding: 10px 18px;
    display: inline-block;
    border-radius: 5px;
    color: #e5e5e5;
    font-weight: bold;
    background: linear-gradient(#2c2c2c, #111);
    box-shadow: inset 0 0 4px #000;
}

nav a:hover, nav a.active {
    background: linear-gradient(#00eaff, #005566);
    color: #000;
    text-shadow: 0 0 3px #fff;
}

/* ===== Content Layout ===== */

#content {
    display: flex;
    padding: 20px;
}

.left-box {
    width: 65%;
}

.right-box {
    width: 35%;
    background: #111;
    border-left: 2px solid #333;
    padding: 15px;
}

/* ===== Headlines ===== */

h2, h3 {
    margin-bottom: 10px;
    border-bottom: 2px solid #00eaff;
    padding-bottom: 5px;
    text-shadow: 0 0 4px #00eaff;
}

/* ===== Buttons ===== */

.btn-download {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 20px;
    background: linear-gradient(#00eaff, #0096a8);
    color: #000;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 0 10px #00eaff;
}

.btn-download:hover {
    background: #00ffff;
}

/* ===== Sidebar Content ===== */

.news-list, .specs {
    margin: 10px 0 20px;
}

.news-list li, .specs li {
    margin: 5px 0;
    font-size: 14px;
}

/* ===== Footer ===== */

footer {
    text-align: center;
    font-size: 12px;
    padding: 10px;
    border-top: 2px solid #333;
    background: #0c0c0c;
    color: #888;
}
/* ===== Custom Video Player ===== */

.video-box {
    margin-bottom: 20px;
    text-align: center;
    background: #000;
    padding: 10px;
    border: 2px solid #222;
    box-shadow: inset 0 0 10px #00eaff44;
}

#trailer {
    border: 2px solid #00eaff;
    box-shadow: 0 0 10px #00eaff;
}

#playButton {
    margin-top: 10px;
    padding: 10px 20px;
    background: linear-gradient(#00eaff, #007788);
    color: #000;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 0 8px #00eaff;
}

#playButton:hover {
    background: #00ffff;
}
/* ===== Updated Controls ===== */

.controls {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#playButton {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#00eaff, #007788);
    color: #000;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 8px #00eaff;
}

#playButton:hover {
    background: #00ffff;
}

#scrubber {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #111;
    border: 2px solid #00eaff;
    height: 6px;
    cursor: pointer;
    border-radius: 4px;
}

/* Scrubber Thumb (retro slider style) */
#scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #00eaff;
    border-radius: 50%;
    box-shadow: 0 0 6px #00eaff;
}
#scrubber::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #00eaff;
    border-radius: 50%;
    box-shadow: 0 0 6px #00eaff;
}