*{box-sizing:border-box}body,html{margin:0;padding:0}body{line-height:1.6;color:#111;font-size:16px;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}.container{width:80%;max-width:960px;margin:0 auto}.row{display:flex;flex-flow:row wrap;justify-content:space-between;width:100%;margin-bottom:16px}.row:last-child{margin-bottom:0}.row .col{flex-grow:1;flex-basis:0}.row .col-1{width:8.333333333333332%}.row .col-2{width:16.666666666666664%}.row .col-3{width:25%}.row .col-4{width:33.33333333333333%}.row .col-5{width:41.66666666666667%}.row .col-6{width:50%}.row .col-7{width:58.333333333333336%}.row .col-8{width:66.66666666666666%}.row .col-9{width:75%}.row .col-10{width:83.33333333333334%}.row .col-11{width:91.66666666666666%}.row .col-12{width:100%}@media screen and (max-width:768px){.row .col,.row [class*=" col-"],.row [class^=col-]{flex-grow:0;flex-basis:100%}}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:16px;font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}h1,h2,h3,h4,h5,h6{font-weight:500}h1{font-size:37.009px;line-height:1.3}h2{font-size:32.182px;line-height:1.35}h3{font-size:27.984px;line-height:1.4}h4{font-size:24.334px;line-height:1.45}h5{font-size:21.16px;line-height:1.5}h6{font-size:18.4px;line-height:1.55}p{font-size:16px}@media (max-width:768px){h1{font-size:33.311px}h2{font-size:29.479px}h3{font-size:26.088px}h4{font-size:23.086px}h5{font-size:20.43px}h6{font-size:18.08px}}input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:45px;width:100%;margin-bottom:16px;padding:16px;font-size:16px;background:#f5f5f5;border:1px solid #a7a7a7;border-radius:2px;transition:all .2s ease}input[type=email]:hover,input[type=file]:hover,input[type=number]:hover,input[type=password]:hover,input[type=search]:hover,input[type=tel]:hover,input[type=text]:hover,input[type=url]:hover,select:hover,textarea:hover{border-color:#111}input[type=email]:focus,input[type=file]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{outline:0;border-color:#0062ff}textarea{min-height:70px}.button,[type=submit],button{height:45px;margin-bottom:16px;padding:10px 30px;outline:0;text-decoration:none;color:#f5f5f5;font-size:16px;background:#111;border:1px solid #111;border-radius:2px;transition:all .2s ease}.button:focus,.button:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{opacity:.9}.button:active,[type=submit]:active,button:active{opacity:.7}.button[disabled],[type=submit][disabled],button[disabled]{opacity:.8;cursor:not-allowed}.button.outline,[type=submit].outline,button.outline{color:#111;background:0 0}.button.outline:focus,.button.outline:hover,[type=submit].outline:focus,[type=submit].outline:hover,button.outline:focus,button.outline:hover{color:#f5f5f5;background:#111}a{color:#0062ff;transition:all .2s ease}a:hover{cursor:pointer;color:#111}ol,ul{margin-top:0;margin-bottom:16px;padding-left:0;list-style-position:inside}ol li,ul li{margin-bottom:16px}ol li:last-child,ul li:last-child{margin-bottom:0}ol ol,ol ul,ul ol,ul ul{margin-left:16px}img{margin-top:0;margin-bottom:16px}.box{margin-bottom:16px;padding-top:16px;padding-right:16px;padding-left:16px;border:1px solid #a7a7a7;border-radius:2px}.nav{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}.nav .nav-item{margin-right:16px}.nav .nav-item:last-child{margin-right:0}.card{display:flex;flex-direction:column;margin-bottom:16px;border:1px solid #a7a7a7;border-radius:2px}.card .card-content{margin:0;padding:16px}.card .card-image{display:block;height:auto;width:100%}pre{margin-top:0;margin-bottom:16px}pre code{display:block;padding:16px;white-space:pre-wrap;word-wrap:break-word}code{padding:2px;white-space:nowrap;background:#e7e7e7;border:1px solid #d7d7d7;border-radius:2px;font-family:Consolas,Monaco,Menlo,monospace}hr{border-width:.5px;border-color:#a7a7a7}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.size-full-height{min-height:100vh}.size-full-width{width:100%}.size-full{width:100%;min-height:100vh}.hidden{display:none}.flex{display:flex}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.direction-vertical{flex-direction:column}.direction-horizontal{flex-direction:row}.center{flex-direction:column;justify-content:center;align-items:center}.border-black{border:1px solid #111}.border-gray{border:1px solid #a7a7a7}.border-white{border:1px solid #f5f5f5}.border-blue{border:1px solid #0062ff}.border-red{border:1px solid #ff1500}.border-yellow{border:1px solid #ffbf00}.border-green{border:1px solid #00b30f}.border-rounded{border-radius:2px}.border-circle{border-radius:2px}.color-black{color:#111}.color-gray{color:#a7a7a7}.color-white{color:#f5f5f5}.color-blue{color:#0062ff}.color-red{color:#ff1500}.color-yellow{color:#ffbf00}.color-green{color:#00b30f}.background-black{background-color:#111}.background-gray{background-color:#a7a7a7}.background-white{background-color:#f5f5f5}.background-blue{background-color:#0062ff}.background-red{background-color:#ff1500}.background-yellow{background-color:#ffbf00}.background-green{background-color:#00b30f}:root { --radius:.5rem; --text-shadow:1px 1px 0 #000; --transition: all .2s linear; --textColor: #fff; --bodyBg: #0C0F10; --linkColor: #f7e587; --heading-color: #e2c360; --subtitle-color: #f7e587; --headerBg: #0C0F10; --headerBorder: none; --buttonBg: linear-gradient(to bottom,#fff095 0%,#b88416 100%); --buttonBorder: none; --buttonRadius: 5rem; --navBg: #2b2b2b; --navColor:#e2c360; --navBottomBorder:1px dotted #2b2b2b; --box-shadow:none; --box-shadow-2:0 0 1px 0 #ccb766; --kontenBg: transparent; --kontenBorder:none; --badgeBg:#b88416; --topten-headBg: #b88416; --toptenBg: #313131; }body{ color: var(--textColor); font-weight: 400; background: var(--bodyBg); } img { max-width: 100%; height: auto; vertical-align: middle; } svg { overflow: hidden; vertical-align: middle; } a{ color:var(--linkColor); font-weight: bolder; text-decoration: none; transition: var(--transition); } a:hover{ color:var(--textColor); } .sticky-top { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } .container{ width:100%; padding:0 .5rem; } .header{ padding: .25rem; background: var(--headerBg); border-bottom: var(--headerBorder); } .header .container{ display: flex; align-items: center; justify-content: space-between; } .logo{ width: 200px; } .logo img{margin:0} .button{ background: var(--buttonBg); box-shadow: var(--box-shadow); text-transform: uppercase; border-radius: var(--buttonRadius); border:var(--buttonBorder); text-shadow: var(--text-shadow); } .tags{ display: flex; flex-wrap: wrap; justify-content: center; } .tags a{ background: linear-gradient(to bottom,#6a6a6a 0%,#464646 100%); text-transform: capitalize; border:none; padding: 5px 20px; height:auto; margin: .25rem; font-weight: normal; } .button:hover,.tags a:hover{ opacity: .75; } .nav{ background: var(--navBg); justify-content: center; padding:.75rem; text-transform: uppercase; text-align: center; color:var(--navColor); } .nav .nav-item{ color:var(--navColor); margin: 0 .5rem; } .nav .nav-item:hover{ color:var(--linkColor); } .banner{ display: flex; flex-wrap: nowrap; overflow-x: hidden; } .banner picture{ flex:0 0 100%; } .banner img{ width: 100%; margin-bottom:0; } .midimg{ display: block; margin:.75rem auto; text-align: center; } .midimg img{ margin-bottom:0; } .konten{ background: var(--kontenBg); border-top:var(--kontenBorder); padding:0 1.5rem .5rem 1.5rem; } footer{ padding-top: 1rem; } .konten h1,h2,h3,h4,h5{ color:var(--heading-color); } .konten nav{ display: flex; justify-content: center; flex-wrap: wrap; padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:var(--navBottomBorder); } .konten nav a{ color:var(--textColor); font-weight: normal; padding:0 .5rem; white-space: nowrap; } .konten nav a:hover{ color:var(--heading-color); } strong{ color:var(--subtitle-color); } .kontak{ display: flex; flex-direction: column; text-shadow: 1px 1px 2px #000; margin: 1.5rem 0 3rem; } .kontak a{ color:#fff; vertical-align: middle; padding:1rem; } .kontak a:hover{ opacity: .75; } .kontak svg{ width: 28px; margin-right:.25rem; vertical-align: middle; filter:drop-shadow(0 1px 1px #000); } .kontak span{ vertical-align: middle; } .btn-telegram{ background-color: #2aabee; } .btn-skype { background-color: #03a9f4; } .btn-wa{ background-color: #25D366; } .btn-fb { background-color: #3b5998; } .btn-lc{ background-color: #FE5000; } .mb-0{ margin-bottom:0; } .kiri,.kanan{ width:calc(50% - .5rem); } .item{ display: flex; flex-wrap: wrap; margin-bottom:.25rem; padding:.5rem; } .item .topgame{ width:calc(100% / 2); padding:.25rem; transition: var(--transition); } .item img{ width:100%; height:auto; border-radius: var(--radius); margin:0; } .item .topgame:hover{ transform: scale(1.05); } .kanan{ margin-bottom:1rem; } .topten-head{ background: var(--topten-headBg); margin-bottom:0; font-size:1.2rem; font-weight:bolder; color:#fff; text-shadow: var(--text-shadow); padding:.75rem .5rem; border-bottom:1px solid rgba(252,252,0,.35); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); box-shadow: var(--box-shadow-2); } .topten-slick{ padding:.5rem; background: var(--toptenBg); border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); box-shadow: var(--box-shadow-2); } .topten{ display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid rgba(252,252,0,.35); padding:.5rem 0; } .topten img{ width:100%; margin-bottom: 0; } .subtitle{ color:var(--subtitle-color); font-size:1.25rem; padding:.25rem; text-shadow: 0 1px 0 #000; } .subtitle::before{ content:'\00a0'; background: var(--heading-color); left:0; margin-right:.25rem; } .badge { display: inline-block; background: var(--badgeBg); color:#fff; text-shadow: 1px 1px 0 #000; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .logogame{ width:38px; } .text-player{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-idr,.text-badge{ text-align: right; width:125px; } .text-badge{width:60px} .text-right{ text-align:right; } .text-left{ text-align: left; } .topten-head *{ text-align: center; } .h100{ height:100vh; } .tgl-slick{ display: flex; flex-wrap: nowrap; overflow-x: hidden; } .result-box { width: 182px; flex: 0 0 182px; text-align: center; padding-bottom:.75rem; background: var(--toptenBg); border-radius: var(--radius); box-shadow: var(--box-shadow-2); margin: 0.25rem; } .result-box .h4 { font-size: 1.25rem; text-transform: uppercase; padding: 0.25rem 0.25rem 0; margin: 0; color: var(--subtitle-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-box p,.result-ball { margin: 0; } .result-ball { border-top: 2px dotted var(--textColor); border-bottom: 2px dotted var(--textColor); font-size: 3rem; font-weight: bolder; margin:.5rem 0; } .mr-1{ margin-right:.25rem; } .lihat-prediksi{ display: block; border-radius:0; font-size:1rem; text-transform: capitalize; height: auto; margin:1rem 0 0; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } .m-0{margin:0} .tabel-prediksi{width:100%;font-weight: bold;border:1px solid var(--textColor);background: var(--toptenBg);border-collapse: collapse;margin:1rem auto;} .tabel-prediksi h6{color:var(--subtitle-color);font-weight: bolder;} .tabel-prediksi td,.tabel-prediksi th{text-transform:uppercase;padding:5px;border:1px solid var(--textColor);text-align: center} .tabel-prediksi tr:nth-child(even){color:var(--subtitle-color);} .tabel-prediksi td:first-child{text-align: left;} .tabel-prediksi tfoot img{ width:150px; max-width:150px; height:auto; margin-bottom:0; } @media screen and (max-width:1000px){ .kiri .item{flex-wrap: nowrap;} .kiri,.kanan{width:100%;} .tgl-slick{ overflow-x: auto; } } @media screen and (max-width:480px){ .logo{width:180px} }.bg-jp{ --background: #2b2b2b; --color-jp : #f7e587; } .bg-jp { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-weight: 900; border-radius: var(--radius); padding: .5rem; background: var(--background); margin:1rem 0; box-shadow:0 6px 4px -4px rgba(0,0,0,.75); } .jptitle { font-size: 30px; width: calc(50% - 15px); margin-right: 15px; color: #fff; text-transform: uppercase; text-shadow: var(--text-shadow); background-color: rgba(0,0,0,.3); border: 4px inset #f7e587; border-radius: var(--radius); padding: .25rem 1rem; } .jptitle span { color: var(--color-jp) } .jpwidth { width: 50%; } .jp { font-size: 30px; color: #fff; text-shadow: 0px 2px 2px #000; -webkit-text-shadow: 0px 2px 2px #000; background-color: rgba(0,0,0,.75); background-image: url(/assets/public/noise.png); border: 4px inset #f7e587; border-radius: var(--radius); padding: .25rem 1rem; } .jp:before { color: var(--color-jp); content: 'IDR. '; } @media screen and (max-width:768px){ .jptitle { font-size: 25px; margin: 0 0 .5rem 0; width: 100%; } .jpwidth { width: 100%; } .jp { font-size: 25px; } }