:root {

    --first-color: #1d0000;        /* Warna latar belakang utama: Merah gelap */

    --second-color: #ffffff;       /* Warna teks: putih */

    --third-color: #ffff99;        /* Aksen utama: kuning muda */

    --fourth-color: #ffcd41;       /* Hover: oren */
}



body {

    background: var(--first-color);

    color: var(--second-color);

}

/* === Grid Layout (5 → 3 → 2 kolom) ============================== */

#champion-container {

  display: grid;

  gap: 1rem;

}

@media (min-width: 1200px) {

  #champion-container { grid-template-columns: repeat(5, 1fr); }

}

@media (min-width: 768px) and (max-width: 1199.98px) {

  #champion-container { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 767.98px) {

  #champion-container { grid-template-columns: repeat(2, 1fr); }

}

/* === Card ======================================================== */

.time-post {

    font-size: 0.7rem;

    padding: 0;

    margin: 0;

    font-weight: 700;

}



.card-post {

    background-color: rgba(255, 0, 0, 0.1);

    color: var(--second-color);

}



.img-post {

    width: 30rem;

    max-width: 100%;

}

/* === Pagination ================================================== */

.page.active {

    color: var(--second-color) !important;

    background: var(--third-color);

}

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

.btn-info {

    background-color: var(--third-color);

    border-color: var(--third-color) !important;
    
    color: var(--first-color);
}



.btn-info:hover {

    background-color: var(--fourth-color);
    
    color: var(--second-color);

}

/* === Running Text (marquee strip) ================================ */

.teks-berjalan {
    
 display:block;
 padding:0.3rem 0;
 background-color: linear-gradient(to bottom, #690101 0%, #a60303 50%, #690101 100%);
 border-top: 2px solid red;
 border-bottom: 2px solid red;
 box-shadow: inset 0px 0px 12px rgba(255,0,0,0.7);
 color: #ffffff;

}



.teks-berjaalan h1, .teks-berjaalan h2, .teks-berjaalan h3, .teks-berjaalan h4, .teks-berjaalan h5, .teks-berjaalan h6, .teks-berjaalan p, .teks-berjaalan strong {

    padding: 0;

    margin: 0;

    font-size: 0.8rem;

    text-transform: uppercase;

}

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

.copyright {

    text-transform: uppercase;

    font-size: 0.7rem;

    text-align: center;

}



/* For Mobile Portrait View */

@media screen and (max-device-width: 480px)

    and (orientation: portrait) {

       .title-home {

        font-size: 1rem;

       }



       .logo {

        width: 9rem;

        max-width: 100%;

       }



       .search-bar {

        width: 10rem;

        max-width: 100%;

       }

}