/* ===============================================
   JAMIROQUAI + NICK.COM (2000 SPACE FUNK EDITION)
   =============================================== */

body {
    background: radial-gradient(circle at 50% 30%, #001144 0%, #000022 90%);
    background-image: url('tile-stars.gif');
    background-repeat: repeat;
    color: #BFFFD7;
    font-family: 'Verdana', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: url('cursor-funk.cur'), auto;
}

/* LINKS COLORIDOS COM BRILHO */
a {
    color: #FF66FF;
    text-decoration: none;
    border-bottom: 1px dashed #FF66FF;
    transition: 0.2s;
}
a:hover {
    color: #FFFFFF;
    background: linear-gradient(90deg, #ff00ff 0%, #00ffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* HEADER COM GRADIENTE CÓSMICO */
.header-banner {
    width: 100%;
    max-width: 900px;
    background: linear-gradient(180deg, #5A00B5 0%, #110044 90%);
    color: #FFFF66;
    border-bottom: 6px groove #FF00FF;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 0 25px #00FFFF88;
}

.header-banner h1 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 38px;
    text-shadow: 3px 3px 0 #FF00FF, -3px -3px 0 #00FFFF;
    margin: 5px 0;
    letter-spacing: 1px;
}

.subtitle {
    font-size: 18px;
    color: #66FFCC;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px #00FFAA;
}

/* MARQUEE */
marquee {
    border: 2px inset #FF00FF;
    background-color: #220044;
    padding: 4px 0;
}

/* CONTAINER */
.main-container {
    display: flex;
    width: 100%;
    max-width: 900px;
    margin-top: 20px;
    gap: 10px;
}

/* SIDEBAR */
.sidebar {
    width: 25%;
    min-width: 160px;
    background: linear-gradient(180deg, #220055 0%, #000033 90%);
    border: 3px ridge #66FF66;
    padding: 10px;
    box-shadow: 4px 4px 0 #00FFFF;
}

.sidebar-title {
    color: #FFFF00;
    border-bottom: 2px dashed #FF00FF;
    font-family: 'Courier New', monospace;
    text-align: center;
    text-shadow: 0 0 5px #00FF88;
}

.navigation-menu ul {
    list-style: none;
    padding: 0;
}
.navigation-menu li {
    margin-bottom: 8px;
}

.nav-link {
    display: block;
    background: linear-gradient(180deg, #4444AA 0%, #111144 100%);
    border: 2px outset #99FFFF;
    color: #CCFFFF;
    font-weight: bold;
    text-align: center;
    padding: 6px;
    border-radius: 8px;
    box-shadow: inset 0 -3px 0 #000033;
}
.nav-link:hover {
    background: linear-gradient(180deg, #66FF66 0%, #33AA99 100%);
    color: #000;
    border: 2px inset #FFFFFF;
}

/* INFO */
.info-box {
    margin-top: 10px;
    background-color: #001144;
    border: 2px solid #66FF66;
    padding: 5px;
    font-family: monospace;
    box-shadow: 2px 2px #00FFAA;
}

/* GIFS */
.gif-item {
    display: block;
    margin: 10px auto;
    border: 2px groove #66FF66;
    max-width: 100%;
}

/* CONTEÚDO PRINCIPAL */
.content-area {
    flex-grow: 1;
    background: linear-gradient(180deg, #110044 0%, #000022 100%);
    border: 3px solid #FF66FF;
    padding: 15px;
    box-shadow: 4px 4px #00FFFF;
}

.section-title {
    font-family: 'Impact', sans-serif;
    font-size: 26px;
    color: #00FFAA;
    text-shadow: 0 0 8px #FF00FF;
    border-left: 6px double #FF00FF;
    padding-left: 10px;
}

/* TABELA */
.discography-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
}
.discography-table th,
.discography-table td {
    border: 1px solid #FF66FF;
    padding: 6px 8px;
}
.discography-table th {
    background: linear-gradient(180deg, #330066 0%, #220033 100%);
    color: #FFFF00;
    text-shadow: 0 0 6px #FF00FF;
}

/* GALERIA */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.gallery-item {
    width: calc(33.33% - 10px);
    border: 2px dashed #00FFAA;
    box-shadow: 0 0 10px #00FFFF88;
    border-radius: 6px;
    transition: 0.2s;
}
.gallery-item:hover {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 0 0 15px #FF66FF;
}

/* FOOTER */
.footer-classic {
    width: 100%;
    max-width: 900px;
    text-align: center;
    border-top: 6px groove #FF00FF;
    margin-top: 40px;
    padding: 15px 0;
    background: linear-gradient(180deg, #220044 0%, #000022 100%);
    color: #AAA;
    font-size: 13px;
    text-shadow: 0 0 4px #00FFFF;
}

.webring-buttons img {
    height: 31px;
    width: 88px;
    margin: 5px;
    border: 1px solid #33FFAA;
}

/* BLINK */
.blink {
    animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation {
    to { visibility: hidden; }
}

/* CURSOR E DETALHE EXTRA */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(#00FFFF, #FF00FF);
    border-radius: 6px;
}