/* CSS dari ontheweb */
/* dibuat utk memenui */
/* kebutuhan ontheweb.my.id */

/* modifi 30-12-2023 */
:root {
--biru1: #000080;
--biru2: #1e1ed8;
--biru3: #5a5af8;
--biru4: #a8a8fc;
--coklat1: #662a02;
--coklat2: #853805;
--coklat3: #d86518;
--coklat4: #f5ab7a;
--ungu1: #570381;
--ungu2: #7602af;
--ungu3: #b731fa;
--ungu4: #d795f8;
--hijau1: #016601;
--hijau2: #04bb04;
--hijau3: #2af82a;
--hijau4: #87f887;
--merah1: #6b0202;
--merah2: #aa0202;
--merah3: #fd4444;
--merah4: #f8acac;
--kuning1: #f3b704;
--kuning2: #ffcd38;
--kuning3: #fcda76;
--kuning4: #fce8ad;
--abu1: #302f2f;
--abu2: #535151;
--abu3: #818181;
--abu4: #c2bdbd;
}

.bg-biru1 { background-color: var(--biru1);}
.bg-biru2 { background-color: var(--biru2);}
.bg-biru3 { background-color: var(--biru3);}
.bg-biru4 { background-color: var(--biru4);}
.bg-coklat1 { background-color: var(--coklat1);}
.bg-coklat2 { background-color: var(--coklat2);}
.bg-coklat3 { background-color: var(--coklat3);}
.bg-coklat4 { background-color: var(--coklat4);}
.bg-ungu1 { background-color: var(--ungu1);}
.bg-ungu2 { background-color: var(--ungu2);}
.bg-ungu3 { background-color: var(--ungu3);}
.bg-ungu4 { background-color: var(--ungu4);}
.bg-hijau1 { background-color: var(--hijau1);}
.bg-hijau2 { background-color: var(--hijau2);}
.bg-hijau3 { background-color: var(--hijau3);}
.bg-hijau4 { background-color: var(--hijau4);}
.bg-merah1 { background-color: var(--merah1);}
.bg-merah2 { background-color: var(--merah2);}
.bg-merah3 { background-color: var(--merah3);}
.bg-merah4 { background-color: var(--merah4);}
.bg-kuning1 { background-color: var(--kuning1);}
.bg-kuning2 { background-color: var(--kuning2);}
.bg-kuning3 { background-color: var(--kuning3);}
.bg-kuning4 { background-color: var(--kuning4);}
.bg-abu1 { background-color: var(--abu1);}
.bg-abu2 { background-color: var(--abu2);}
.bg-abu3 { background-color: var(--abu3);}
.bg-abu4 { background-color: var(--abu4);}

.fg-biru1 { color: var(--biru1);}
.fg-biru2 { color: var(--biru2);}
.fg-biru3 { color: var(--biru3);}
.fg-biru4 { color: var(--biru4);}
.fg-coklat1 { color: var(--coklat1);}
.fg-coklat2 { color: var(--coklat2);}
.fg-coklat3 { color: var(--coklat3);}
.fg-coklat4 { color: var(--coklat4);}
.fg-ungu1 { color: var(--ungu1);}
.fg-ungu2 { color: var(--ungu2);}
.fg-ungu3 { color: var(--ungu3);}
.fg-ungu4 { color: var(--ungu4);}
.fg-hijau1 { color: var(--hijau1);}
.fg-hijau2 { color: var(--hijau2);}
.fg-hijau3 { color: var(--hijau3);}
.fg-hijau4 { color: var(--hijau4);}
.fg-merah1 { color: var(--merah1);}
.fg-merah2 { color: var(--merah2);}
.fg-merah3 { color: var(--merah3);}
.fg-merah4 { color: var(--merah4);}
.fg-kuning1 { color: var(--kuning1);}
.fg-kuning2 { color: var(--kuning2);}
.fg-kuning3 { color: var(--kuning3);}
.fg-kuning4 { color: var(--kuning4);}
.fg-abu1 { color: var(--abu1);}
.fg-abu2 { color: var(--abu2);}
.fg-abu3 { color: var(--abu3);}
.fg-abu4 { color: var(--abu4);}

.bg-putih { background-color: white; }
.bg-hitam { background-color: black; }
.fg-putih { color: white; }
.fg-hitam { color: black; }

/* lokasi huruf */
.txt-kanan { text-align: right;}
.txt-tengah { text-align: center;}
.txt-kiri { text-align: left;}

/* bayangan text */
.txt-shadow1 { text-shadow: 2px 2px 2px var(--abu1);}
.txt-shadow2 { text-shadow: 3px 3px 3px var(--abu1);}
.txt-shadow3 { text-shadow: 4px 4px 4px var(--abu1);}

/* text vertikal */
.txt-v-5 {  padding-top: 50px; }
.txt-v-10 {  padding-top: 100px; }
.txt-v-15 {  padding-top: 150px; }
.txt-v-20 {  padding-top: 200px; }
.txt-v-25 {  padding-top: 250px; }

/* jumbotron versi 4 */
.jumbotron {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

/* opacity */
.opac-0 { opacity: 1; !important }
.opac-9 { opacity: .9; }
.opac-8 { opacity: .8; }
.opac-7 { opacity: .7; }
.opac-6 { opacity: .6; }
.opac-5 { opacity: .5; }
.opac-4 { opacity: .4; }
.opac-3 { opacity: .3; }
.opac-2 { opacity: .2; }
.opac-1 { opacity: .1; }

/* font size */
.fs1 {font-size: 6em; line-height: 95%;}
.fs2 {font-size: 5.5em; line-height: 95%;}
.fs3 {font-size: 5em; line-height: 95%;}
.fs4 {font-size: 4.5em; line-height: 95%;}
.fs5 {font-size: 4em; line-height: 95%;}
.fs6 {font-size: 3.5em; line-height: 95%;}
.fs7 {font-size: 3em; line-height: 100%;}
.fs8 {font-size: 2.5em; line-height: 100%;}
.fs9 {font-size: 2em; line-height: 120%;}