*{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: #333; --bodyBg: #f2f2f2; --linkColor: #000; --heading-color: #000; --subtitle-color: #000; --headerBg: #f2f2f2; --headerBorder: none; --buttonBg: #ab0102; --buttonBorder: none; --buttonRadius: .25rem; --navBg: #ffb804; --navColor:#000; --navBottomBorder:1px dotted #2b2b2b; --box-shadow:none; --box-shadow-2:0 0 1px 0 #ccb766; --kontenBg: #ddd; --kontenBorder:2px solid #bdbdbd; --badgeBg:#876302; --topten-headBg: #ffb804; --toptenBg: #000; }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:.5rem; 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:1.5rem 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{ width:350px; } .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{ width:calc((100% - 350px) - .5rem); margin-bottom:1rem; color:#fff; } .topten-head{ background: var(--topten-headBg); margin-bottom:0; font-size:1.2rem; font-weight:bolder; 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:80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-idr,.text-badge{ text-align: right; width:125px; } .text-idr strong{ color:var(--topten-headBg); } .text-badge{width:60px} .text-right{ text-align:right; } .text-left{ text-align: left; } .topten-head *{ text-align: center; } .h100{ height:100vh; } @media screen and (max-width:1000px){ .kiri .item{flex-wrap: nowrap;} .kiri,.kanan{width:100%;} } @media screen and (max-width:480px){ .logo{width:180px} }