:root {
    --first-color: #111111;
    --second-color: #fff;
    --third-color: #5bc0de;
    --fourth-color: #e9ab00
        --hbg: 182.95081967213;
        --sbg: 100%;
        --lbg: 5%;
        --color-body: hsl(var(--hbg), var(--sbg), var(--lbg));
        --h: 180.10638297872;
        --s: 100%;
        --l: 45.921568627451%;
        --color-primary: hsl(var(--h), var(--s), var(--l));
        --hsecond: 147.10344827586;
        --ssecond: 93.548387096774%;
        --lsecond: 48.627450980392%;
        --color-secondary: hsl(var(--hsecond), var(--ssecond), var(--lsecond));
        --htext: 0;
        --stext: 0%;
        --ltext: 100%;
        --color-text: hsl(var(--htext), var(--stext), var(--ltext));
        --hhd: 182.80373831776;
        --shd: 100%;
        --lhd: 20.980392156863%;
        --color-header: hsl(var(--hhd), var(--shd), var(--lhd));
        --hfooter: 182.80373831776;
        --sfooter: 100%;
        --lfooter: 20.980392156863%;
        --color-footer: hsl(var(--hfooter), var(--sfooter), var(--lfooter));
}

body {
    background: var(--first-color);
    color: var(--second-color)
}

.time-post {
    font-size: .7rem;
    padding: 0;
    margin: 0;
    font-weight: 700
}

.card-post {
    background: var(--third-color);
    color: var(--first-color)
}

.img-post {
    width: 30rem;
    max-width: 100%
}

.page.active {
    color: var(--second-color) !important;
    background: var(--third-color)
}

.btn-info {
    background-color: var(--third-color);
    border-color: var(--third-color) !important;
    color: var(--first-color)
}
.btn-more {
    width: 100%;
    display: block;
    background: hsl(147.10344827586, 93.548387096774%, calc(48.627450980392% - 15%));
    border-radius: 5px;
    padding: 10px 12px;
    text-align: center;
    color: white;
    font-weight: 700;
    border: 1px solid var(--color-secondary);
}
.btn-info:hover {
    background-color: var(--fourth-color)
}

.teks-berjaalan {
    border-bottom: 1px dashed var(--third-color);
    padding: .3rem;
    margin-bottom: .9rem
}

.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: .8rem;
    text-transform: uppercase
}

.copyright {
    text-transform: uppercase;
    font-size: .7rem;
    text-align: center
}

@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%
    }
}