:root{
    --bg:#0b1020;
    --card:#121735;
    --text:#e6e8ff;
    --border:#222856;
    --rainbow: linear-gradient(90deg,#ff5252,#ff7b00,#ffea00,#00d084,#00c3ff,#7a5cff,#ff53d9,#ff5252);
} 
    
* {box-sizing:border-box}

body {
    margin: 0;
    padding: 0;
    font:16px/1.5 system-ui,sans-serif;
    background: black;
    background-image: url('img/bg.gif');
    color:var(--text);
}

.wrap {
    max-width:1000px;
    margin:0 auto;
    margin-bottom: 3rem;
    height: auto;
}
    
h1 {
    margin:0 0 18px;
    font-size: 2rem;
    font-weight:800;
    letter-spacing:0.3px;
    display:inline-block;
    padding:8px 14px; 
    border-radius:16px;
    -webkit-background-clip:text;
    background-clip:text;
}
    
/* TABEL */
.card {
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border:1px solid var(--border);
    border-radius:18px;
    padding:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    overflow:auto;
    z-index: 999;
}     
table {
    width:100%; 
    border-collapse:separate;
    border-spacing:0;
    min-width:760px;
    background: var(--card);
}       
th, td {
    padding:10px 12px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    text-align:center
}
th:first-child, td:first-child {
    border-left:1px solid var(--border)
}
td.name {
    text-align:left;
    font-weight:600
} 
.badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.3px;
    background:linear-gradient(90deg,#17c964,#06b6d4);
    color:#031b0f
}
    
/* TABEL: Header */
.head-title { 
    background:var(--card);
    color:var(--text)
}
thead th {
    font-weight:700;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:0.5px
} 
.head-title span {
    display:block;
    padding:10px 0;
    font-size:14px;
    font-weight:800;
    text-transform:none;
    letter-spacing:0
}
.rainbow-bar {
    background:var(--rainbow);
}

/* Nyan 🐱 */
marquee {
    position: fixed;
    pointer-events: none; /*biar ga ganggu konten lain (cmn tabel sih)*/
}
marquee img {
    width: auto;
}
.first-nyan {
    top: 5vh;
    z-index: -1;
}
.second-nyan {
    top: 60vh;
}
.third-nyan {
    height: 100%;
    left: 20vw;
    bottom: 0;
    height: 100vh;
}
.first-nyan img {
    height: 120px;
}
.second-nyan img {
    height: 170px;
}
.third-nyan img {
    height: 60vh;
}

/* Jarvis, responsif dikitlah apa itu biar ga apa kali */
@media (max-width:640px){
    body{padding: 10px;}
    th,td{padding:8px 10px;}
}