html, body {
	height: 100%;
	margin: 0;
	scroll-behavior: smooth;
}
body {
	background-color: #5c5bc3;
	background-image: url(img/back.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed;
	color: #ffffff;
	line-height: 1.5;
	font-size: 12pt;
	font-family: 'Roboto', sans-serif;
	padding: 0;
	margin: 0;
}
footer{
    background-color: #555;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
}
a{
    color: #ff0;
    text-decoration:none;
}
a:hover{
    color: #fff;
}
a:active{
    color: #fff;
}
a:visited{
    color: #fff;
}
h1,h2,h3,h4,h5,h6 {
    margin: 0;
    color: #ff0;
    line-height: 1.25;
    font-family: 'Roboto', sans-serif;
}
h1{
  font-size:32pt;
}
h2{
  font-size:27pt;
}
h3{
  font-size:22pt;
}
h4{
  font-size:17pt;
}
h5{
  font-size:12pt;
}
h6{
  font-size:11pt;
}

br {
   content: " ";
   display: block;
   margin: 10px 0;
   line-height: 22px;
}
p {
    margin: 0;
    padding: 0;
}
ul,ol,li {
	list-style:none;
	margin:0;
	padding:0;
}
hr {
    margin: 15px 0;
    border-color: #ddd;
}
* {
  box-sizing: border-box;
}
.flex{
	display:flex;
	flex-wrap:wrap;
	flex-flow:row wrap;
	justify-content:center;
}
.top {
  position: sticky;
  bottom: 20px;
  margin-top: calc(100vh + var(--offset));
  
  /* visual styling */
  left: 95%;
  margin-left: auto;
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #00a1ff;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: bold;
}
.footer {
    text-align: center;
}   
.wrapper {
    text-align: center;
	width: 1100px;
	max-width: 95%;
	margin: 0 auto;
	height: auto;
	background: #00000066;
}
.header {
    width: 100%;
    padding: 25px 0;
}
.header a {
    width: 48%;
    text-align: center;
    align-items: center;
    border-radius: 10px;
    color: #fff;
}
.active {
    background: #256dba;
}
.gambarpenuh {
    max-width: 100%;
}

.header a:hover {
    box-shadow: #000 0 0 5px;
    margin: 2% 1% 0 1%;
    color:#000;
}
.body-left {
    width: 20%;
    background: #303030;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: #000 0 0 5px;
}

.body-right {
    padding: 5px;
    width: 80%;
    background: #262525;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: #000 0 0 5px;
}
.menu a img {
    height: 25px;
    margin-right: 10px;
}

.menu a {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px 15px;
    border-bottom: 1px solid #ddd;
    color: #fff;
}
.menu {
    margin: 10px;
}

.menu a:hover {
    background: #005299;
}
.game a {
    width: 24%;
    height: 100%;
    margin: 0.5%;
    background: #545454;
    color: #000;
    font-weight: bold;
    position: relative;
    box-shadow: 0 -25px 0 0 #fff inset;
    overflow:hidden;
}
.game-img {
    width: 100%;
    display: block;
    opacity: 1;
    transition: transform 1s; /* Animation */
    transform-origin: bottom;
}
.game-title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ff0000;
	color:#fff;
    width: 100%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 800ms, visibility 600ms;
	transition: opacity 800ms, visibility 600ms;
}
.game a:hover {
	background:#111;
}
.game a:hover .game-title {
	visibility: visible;
	opacity: 1;
}
.game a:hover .game-img {
	opacity: 0.25;
	-webkit-transition: opacity 600ms, visibility 600ms;
	transition: opacity 600ms, visibility 600ms;
	transform: scale(1.25);
}
.game {
    text-align: center;
    justify-content: normal;
}
/*----- percent -----*/
.percent1{width:1%;}.percent1::before{content:"1%";}
.percent2{width:2%;}.percent2::before{content:"2%";}
.percent3{width:3%;}.percent3::before{content:"3%";}
.percent4{width:4%;}.percent4::before{content:"4%";}
.percent5{width:5%;}.percent5::before{content:"5%";}
.percent6{width:6%;}.percent6::before{content:"6%";}
.percent7{width:7%;}.percent7::before{content:"7%";}
.percent8{width:8%;}.percent8::before{content:"8%";}
.percent9{width:9%;}.percent9::before{content:"9%";}
.percent10{width:10%;}.percent10::before{content:"10%";}
.percent11{width:11%;}.percent11::before{content:"11%";}
.percent12{width:12%;}.percent12::before{content:"12%";}
.percent13{width:13%;}.percent13::before{content:"13%";}
.percent14{width:14%;}.percent14::before{content:"14%";}
.percent15{width:15%;}.percent15::before{content:"15%";}
.percent16{width:16%;}.percent16::before{content:"16%";}
.percent17{width:17%;}.percent17::before{content:"17%";}
.percent18{width:18%;}.percent18::before{content:"18%";}
.percent19{width:19%;}.percent19::before{content:"19%";}
.percent20{width:20%;}.percent20::before{content:"20%";}
.percent21{width:21%;}.percent21::before{content:"21%";}
.percent22{width:22%;}.percent22::before{content:"22%";}
.percent23{width:23%;}.percent23::before{content:"23%";}
.percent24{width:24%;}.percent24::before{content:"24%";}
.percent25{width:25%;}.percent25::before{content:"25%";}
.percent26{width:26%;}.percent26::before{content:"26%";}
.percent27{width:27%;}.percent27::before{content:"27%";}
.percent28{width:28%;}.percent28::before{content:"28%";}
.percent29{width:29%;}.percent29::before{content:"29%";}
.percent30{width:30%;}.percent30::before{content:"30%";}
.percent31{width:31%;}.percent31::before{content:"31%";}
.percent32{width:32%;}.percent32::before{content:"32%";}
.percent33{width:33%;}.percent33::before{content:"33%";}
.percent34{width:34%;}.percent34::before{content:"34%";}
.percent35{width:35%;}.percent35::before{content:"35%";}
.percent36{width:36%;}.percent36::before{content:"36%";}
.percent37{width:37%;}.percent37::before{content:"37%";}
.percent38{width:38%;}.percent38::before{content:"38%";}
.percent39{width:39%;}.percent39::before{content:"39%";}
.percent40{width:40%;}.percent40::before{content:"40%";}
.percent41{width:41%;}.percent41::before{content:"41%";}
.percent42{width:42%;}.percent42::before{content:"42%";}
.percent43{width:43%;}.percent43::before{content:"43%";}
.percent44{width:44%;}.percent44::before{content:"44%";}
.percent45{width:45%;}.percent45::before{content:"45%";}
.percent46{width:46%;}.percent46::before{content:"46%";}
.percent47{width:47%;}.percent47::before{content:"47%";}
.percent48{width:48%;}.percent48::before{content:"48%";}
.percent49{width:49%;}.percent49::before{content:"49%";}
.percent50{width:50%;}.percent50::before{content:"50%";}
.percent51{width:51%;}.percent51::before{content:"51%";}
.percent52{width:52%;}.percent52::before{content:"52%";}
.percent53{width:53%;}.percent53::before{content:"53%";}
.percent54{width:54%;}.percent54::before{content:"54%";}
.percent55{width:55%;}.percent55::before{content:"55%";}
.percent56{width:56%;}.percent56::before{content:"56%";}
.percent57{width:57%;}.percent57::before{content:"57%";}
.percent58{width:58%;}.percent58::before{content:"58%";}
.percent59{width:59%;}.percent59::before{content:"59%";}
.percent60{width:60%;}.percent60::before{content:"60%";}
.percent61{width:61%;}.percent61::before{content:"61%";}
.percent62{width:62%;}.percent62::before{content:"62%";}
.percent63{width:63%;}.percent63::before{content:"63%";}
.percent64{width:64%;}.percent64::before{content:"64%";}
.percent65{width:65%;}.percent65::before{content:"65%";}
.percent66{width:66%;}.percent66::before{content:"66%";}
.percent67{width:67%;}.percent67::before{content:"67%";}
.percent68{width:68%;}.percent68::before{content:"68%";}
.percent69{width:69%;}.percent69::before{content:"69%";}
.percent70{width:70%;}.percent70::before{content:"70%";}
.percent71{width:71%;}.percent71::before{content:"71%";}
.percent72{width:72%;}.percent72::before{content:"72%";}
.percent73{width:73%;}.percent73::before{content:"73%";}
.percent74{width:74%;}.percent74::before{content:"74%";}
.percent75{width:75%;}.percent75::before{content:"75%";}
.percent76{width:76%;}.percent76::before{content:"76%";}
.percent77{width:77%;}.percent77::before{content:"77%";}
.percent78{width:78%;}.percent78::before{content:"78%";}
.percent79{width:79%;}.percent79::before{content:"79%";}
.percent80{width:80%;}.percent80::before{content:"80%";}
.percent81{width:81%;}.percent81::before{content:"81%";}
.percent82{width:82%;}.percent82::before{content:"82%";}
.percent83{width:83%;}.percent83::before{content:"83%";}
.percent84{width:84%;}.percent84::before{content:"84%";}
.percent85{width:85%;}.percent85::before{content:"85%";}
.percent86{width:86%;}.percent86::before{content:"86%";}
.percent87{width:87%;}.percent87::before{content:"87%";}
.percent88{width:88%;}.percent88::before{content:"88%";}
.percent89{width:89%;}.percent89::before{content:"89%";}
.percent90{width:90%;}.percent90::before{content:"90%";}
.percent91{width:91%;}.percent91::before{content:"91%";}
.percent92{width:92%;}.percent92::before{content:"92%";}
.percent93{width:93%;}.percent93::before{content:"93%";}
.percent94{width:94%;}.percent94::before{content:"94%";}
.percent95{width:95%;}.percent95::before{content:"95%";}
.percent96{width:96%;}.percent96::before{content:"96%";}
.percent97{width:97%;}.percent97::before{content:"97%";}
.percent98{width:98%;}.percent98::before{content:"98%";}
.percent99{width:99%;}.percent99::before{content:"99%";}
.percent100{width:100%;}.percent100::before{content:"100%";}

.percent1,.percent2,.percent3,.percent4,.percent5,.percent6,.percent7,.percent8,.percent9,.percent10,.percent11,.percent12,.percent13,.percent14,.percent15,.percent16,.percent17,.percent18,.percent19,.percent20,.percent21,.percent22,.percent23,.percent24,.percent25,.percent26,.percent27,.percent28,.percent29,.percent30,.percent31,.percent32,.percent33{
	background:#ff0000;
	height: 25px;
}
.percent34,.percent35,.percent36,.percent37,.percent38,.percent39,.percent40,.percent41,.percent42,.percent43,.percent44,.percent45,.percent46,.percent47,.percent48,.percent49,.percent50,.percent51,.percent52,.percent53,.percent54,.percent55,.percent56,.percent57,.percent58,.percent59,.percent60,.percent61,.percent62,.percent63,.percent64,.percent65,.percent66{
	background:#ffd400;
	height: 25px;
}
.percent67,.percent68,.percent69,.percent70,.percent71,.percent72,.percent73,.percent74,.percent75,.percent76,.percent77,.percent78,.percent79,.percent80,.percent81,.percent82,.percent83,.percent84,.percent85,.percent86,.percent87,.percent88,.percent89,.percent90,.percent91,.percent92,.percent93,.percent94,.percent95,.percent96,.percent97,.percent98,.percent99,.percent100{
	background:#00a93e;
	height: 25px;
}
.percent1::before,.percent2::before,.percent3::before,.percent4::before,.percent5::before,.percent6::before,.percent7::before,.percent8::before,.percent9::before,.percent10::before,.percent11::before,
.percent12::before,.percent13::before,.percent14::before,.percent15::before,.percent16::before,.percent17::before,.percent18::before,.percent19::before,.percent20::before,.percent21::before,.percent22::before,
.percent23::before,.percent24::before,.percent25::before,.percent26::before,.percent27::before,.percent28::before,.percent29::before,.percent30::before,.percent31::before,.percent32::before,.percent33::before,
.percent34::before,.percent35::before,.percent36::before,.percent37::before,.percent38::before,.percent39::before,.percent40::before,.percent41::before,.percent42::before,.percent43::before,.percent44::before,
.percent45::before,.percent46::before,.percent47::before,.percent48::before,.percent49::before,.percent50::before,.percent51::before,.percent52::before,.percent53::before,.percent54::before,.percent55::before,
.percent56::before,.percent57::before,.percent58::before,.percent59::before,.percent60::before,.percent61::before,.percent62::before,.percent63::before,.percent64::before,.percent65::before,.percent66::before,
.percent67::before,.percent68::before,.percent69::before,.percent70::before,.percent71::before,.percent72::before,.percent73::before,.percent74::before,.percent75::before,.percent76::before,.percent77::before,
.percent78::before,.percent79::before,.percent80::before,.percent81::before,.percent82::before,.percent83::before,.percent84::before,.percent85::before,.percent86::before,.percent87::before,.percent88::before,
.percent89::before,.percent90::before,.percent91::before,.percent92::before,.percent93::before,.percent94::before,.percent95::before,.percent96::before,.percent97::before,.percent98::before,.percent99::before,
.percent100::before{
	position: absolute;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
}
/*----- percent -----*/

/* Smartphones (portrait & landscape) ----------- */
@media only screen and (max-device-width: 823px) and (min-device-width: 320px) {
.body-left {
    width: 25%;
}

.body-right {
    width: 70%;
}


.menu {
    margin: 5px;
}

.menu a {
    padding: 10px 5px;
}

.game a {
    width: 48%;
    margin: 1%;
}

.header a {
    width: 95%;
}

.header a:last-child {
    margin-top: 15px;
}
}