a,body,div,em,font,form,h1,h2,h3,h4,h5,h6,html,ins,li,object,ol,p,q,s,span,strong,var {
margin:0;
padding:0;
outline:0;
border:0;
vertical-align:baseline;
font-weight:inherit;
font-style:inherit;
font-size:100%;
line-height:2
}
h1,h2,h3,h4,h5,h6 {
margin:10px 0;
font-weight:700
}
h1 {
font-size:20px;
text-transform: uppercase;
}
h2 {
font-size:19px
}
h3 {
font-size:18px;
text-transform: uppercase;
}
h4,h5,h6 {
font-weight:300
}
p {
margin-bottom:.5em
}
ol {
margin:0 0 1.5em 3em
}
ol {
list-style:decimal
}
li>ol {
margin-bottom:0;
margin-left:1.5em
}

ul {
margin:0 0 1.5em 3em
}
ul {
list-style:decimal
}
li>ul {
margin-bottom:0;
margin-left:1.5em
}

b,strong {
font-weight:700
}
em,i {
font-style:italic
}
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
line-height: 1.6;
background: #f9f9f9;
color: #000;
display: flex;
justify-content: center;
font-size:16px;
}
/* Main Wrapper */
.wrapper {
max-width: 1200px;
width: 100%;
background: #f9f9f9;
display: flex;
flex-direction: column;
overflow: hidden;
}

.tengah {
text-align:center
}

.modesoal {
font-size:15px;
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
font-weight:bold;
}

.materisoal {
color:#00A859;
font-size:15px;
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
font-weight:bold;
}

.ytdl {
 width:100%;
 background-color:#123;
 border:0 solid #fff;
 display:inline-block;
 cursor:pointer;
 color:#fff;
 font-family:-apple-system,BlinkMacSystemFont,Roboto,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
 font-size:15px;
 padding:6px 24px;
 text-decoration:none;
 margin-bottom:3px 
}
.ytdl:hover {
 color:#fff;
 background-color:#000 
}
.ytdl:active {
 position:relative;
 top:1px 
}

.ataspol {
font-weight:600;
margin-left:17px
}

#daftarisi ul {
 list-style-type:none;
 margin-left:1px 
}
#daftarisi li {
 list-style-type:none;
 display:inline-block 
}

.mapel {
	width:150px;
	text-align: center;
	padding:3px;
	display:inline-block;
	margin:3px;
	border:1px solid #ccc;
}

.responsive-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.pendidikan {
  display: block;
  height: 199px;
  width: 199px;
  text-indent: -9999px;
  overflow: hidden;
  background: url('https://latihan.man5banjar.online/aset3/pendidikan-min.png') no-repeat;
  transition: background-position 1ms linear;
  margin:5px;
}

.pendidikan.sd {
  background-position: 0 -200px;
}

.pendidikan.sd:hover {
  background-position: 0 0;
}

.pendidikan.smp {
  background-position: -201px -200px;
}

.pendidikan.smp:hover {
  background-position: -201px 0;
}

.pendidikan.sma {
  background-position: -401px -200px;
}

.pendidikan.sma:hover {
  background-position: -401px 0;
}


.siji {
 width:30%;
 -moz-box-shadow:0 1px 0 0 #f0f7fa;
 -webkit-box-shadow:0 1px 0 0 #f0f7fa;
 box-shadow:0 1px 0 0 #f0f7fa;
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#33bdef),color-stop(1,#019ad2));
 background:-moz-linear-gradient(top,#33bdef 5%,#019ad2 100%);
 background:-webkit-linear-gradient(top,#33bdef 5%,#019ad2 100%);
 background:-o-linear-gradient(top,#33bdef 5%,#019ad2 100%);
 background:-ms-linear-gradient(top,#33bdef 5%,#019ad2 100%);
 background:linear-gradient(to bottom,#33bdef 5%,#019ad2 100%);
 background-color:#33bdef;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #057fd0;
 display:inline-block;
 cursor:pointer;
 color:#fff;
 font-size:14px;
 font-weight:600;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0 -1px 0 #5b6178;
 margin:2px 2px 2px 2px 
}
.siji:hover {
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#019ad2),color-stop(1,#33bdef));
 background:-moz-linear-gradient(top,#019ad2 5%,#33bdef 100%);
 background:-webkit-linear-gradient(top,#019ad2 5%,#33bdef 100%);
 background:-o-linear-gradient(top,#019ad2 5%,#33bdef 100%);
 background:-ms-linear-gradient(top,#019ad2 5%,#33bdef 100%);
 background:linear-gradient(to bottom,#019ad2 5%,#33bdef 100%);
 background-color:#019ad2 
}
.siji:active {
 position:relative;
 top:1px 
}
.loro {
 width:30%;
 -moz-box-shadow:0 1px 0 0 #fff6af;
 -webkit-box-shadow:0 1px 0 0 #fff6af;
 box-shadow:0 1px 0 0 #fff6af;
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#ffec64),color-stop(1,#ffab23));
 background:-moz-linear-gradient(top,#ffec64 5%,#ffab23 100%);
 background:-webkit-linear-gradient(top,#ffec64 5%,#ffab23 100%);
 background:-o-linear-gradient(top,#ffec64 5%,#ffab23 100%);
 background:-ms-linear-gradient(top,#ffec64 5%,#ffab23 100%);
 background:linear-gradient(to bottom,#ffec64 5%,#ffab23 100%);
 background-color:#ffec64;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #fa2;
 display:inline-block;
 cursor:pointer;
 color:#000;
 font-size:14px;
 font-weight:600;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0 1px 0 #fe6;
 margin:2px 2px 2px 2px 
}
.loro:hover {
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#ffab23),color-stop(1,#ffec64));
 background:-moz-linear-gradient(top,#ffab23 5%,#ffec64 100%);
 background:-webkit-linear-gradient(top,#ffab23 5%,#ffec64 100%);
 background:-o-linear-gradient(top,#ffab23 5%,#ffec64 100%);
 background:-ms-linear-gradient(top,#ffab23 5%,#ffec64 100%);
 background:linear-gradient(to bottom,#ffab23 5%,#ffec64 100%);
 background-color:#ffab23 
}
.loro:active {
 position:relative;
 top:1px 
}
.telu {
 width:30%;
 -moz-box-shadow:inset 0 1px 0 0 #a6827e;
 -webkit-box-shadow:inset 0 1px 0 0 #a6827e;
 box-shadow:inset 0 1px 0 0 #a6827e;
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#7d5d3b),color-stop(1,#634b30));
 background:-moz-linear-gradient(top,#7d5d3b 5%,#634b30 100%);
 background:-webkit-linear-gradient(top,#7d5d3b 5%,#634b30 100%);
 background:-o-linear-gradient(top,#7d5d3b 5%,#634b30 100%);
 background:-ms-linear-gradient(top,#7d5d3b 5%,#634b30 100%);
 background:linear-gradient(to bottom,#7d5d3b 5%,#634b30 100%);
 background-color:#7d5d3b;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border:1px solid #54381e;
 display:inline-block;
 cursor:pointer;
 color:#fff;
 font-size:14px;
 font-weight:600;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0 1px 0 #4d3534;
 margin:2px 2px 2px 2px 
}
.telu:hover {
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#634b30),color-stop(1,#7d5d3b));
 background:-moz-linear-gradient(top,#634b30 5%,#7d5d3b 100%);
 background:-webkit-linear-gradient(top,#634b30 5%,#7d5d3b 100%);
 background:-o-linear-gradient(top,#634b30 5%,#7d5d3b 100%);
 background:-ms-linear-gradient(top,#634b30 5%,#7d5d3b 100%);
 background:linear-gradient(to bottom,#634b30 5%,#7d5d3b 100%);
 background-color:#634b30 
}
.telu:active {
 position:relative;
 top:1px 
}
.papat {
 width:30%;
 -moz-box-shadow:inset 0 1px 0 0 #cf866c;
 -webkit-box-shadow:inset 0 1px 0 0 #cf866c;
 box-shadow:inset 0 1px 0 0 #cf866c;
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#d0451b),color-stop(1,#bc3315));
 background:-moz-linear-gradient(top,#d0451b 5%,#bc3315 100%);
 background:-webkit-linear-gradient(top,#d0451b 5%,#bc3315 100%);
 background:-o-linear-gradient(top,#d0451b 5%,#bc3315 100%);
 background:-ms-linear-gradient(top,#d0451b 5%,#bc3315 100%);
 background:linear-gradient(to bottom,#d0451b 5%,#bc3315 100%);
 background-color:#d0451b;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border:1px solid #942911;
 display:inline-block;
 cursor:pointer;
 color:#fff;
 font-size:14px;
 font-weight:600;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0 1px 0 #854629;
 margin:2px 2px 2px 2px 
}
.papat:hover {
 background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#bc3315),color-stop(1,#d0451b));
 background:-moz-linear-gradient(top,#bc3315 5%,#d0451b 100%);
 background:-webkit-linear-gradient(top,#bc3315 5%,#d0451b 100%);
 background:-o-linear-gradient(top,#bc3315 5%,#d0451b 100%);
 background:-ms-linear-gradient(top,#bc3315 5%,#d0451b 100%);
 background:linear-gradient(to bottom,#bc3315 5%,#d0451b 100%);
 background-color:#bc3315 
}
.papat:active {
 position:relative;
 top:1px 
}

#trendingtopic {
font-size:17px;
min-height: 700px;
}

.dadi {
width:31%;
font-weight:600;
padding:5px;
display:inline-block;
cursor:pointer;
margin:3px;
border-bottom:1px solid #ccc;
background-color:#f9f9f9;
text-align: center;
}
.dadi:hover {
background-color:#dbeaf9
}
#pertanyaan {
font-family: Arial, sans-serif;
font-size:20px;
background-color:#fff;
padding:10px;
border-left:#ddd solid 1px;
border-right:#ddd solid 1px
}
#pertanyaan br {
content:"";
margin:1em;
display:block;
font-size:24%
}
#jawaban {
font-size:10px;
font-weight:700;
background-color:#eee;
border:1px solid #ddd;
padding:10px
}
#hasiljawaban {
vertical-align:middle;
display:inline
}
#hasiljawaban img {
vertical-align:middle;
display:inline;
margin-left:3px;
height:25px;
width:25px
}
hr {
border-top:1px solid #ddd;
border-bottom:0 dashed #fff;
margin-top:1px;
margin-bottom:0
}
.pilihane {
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:15px;
font-weight:700;
padding:6px 12px;
text-transform:uppercase;
text-decoration:none
}
.pilihane:hover {
background-color:#000;
color:#fff
}
.pilihane:active {
position:relative;
top:1px color:#fff
}
.pilihane:visited {
position:relative;
top:1px;
color:#fff
}
.dipilih {
background-color:#000
}
.jawaba {
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:15px;
font-weight:700;
padding:6px 12px;
text-transform:uppercase;
text-decoration:none;
}
.jawaba:hover {
background-color:#000
}
.jawaba:active {
position:relative;
top:1px
}
.jawabb {
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:15px;
font-weight:700;
padding:6px 12px;
text-transform:uppercase;
text-decoration:none
}
.jawabb:hover {
background-color:#000
}
.jawabb:active {
position:relative;
top:1px
}
.jawabc {
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:15px;
font-weight:700;
padding:6px 12px;
text-transform:uppercase;
text-decoration:none
}
.jawabc:hover {
background-color:#000
}
.jawabc:active {
position:relative;
top:1px
}
.jawabd {
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:15px;
font-weight:700;
padding:6px 12px;
text-transform:uppercase;
text-decoration:none
}
.jawabd:hover {
background-color:#000
}
.jawabd:active {
position:relative;
top:1px
}
.jawabe {
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:15px;
font-weight:700;
padding:6px 12px;
text-transform:uppercase;
text-decoration:none
}
.jawabe:hover {
background-color:#000
}
.jawabe:active {
position:relative;
top:1px
}
#tunggu {
position:absolute;
display:none
}
.soalselanjutnya {
-moz-box-shadow:inset 0 1px 0 0 #54a3f7;
-webkit-box-shadow:inset 0 1px 0 0 #54a3f7;
box-shadow:inset 0 1px 0 0 #54a3f7;
background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#007dc1),color-stop(1,#0061a7));
background:-moz-linear-gradient(top,#007dc1 5%,#0061a7 100%);
background:-webkit-linear-gradient(top,#007dc1 5%,#0061a7 100%);
background:-o-linear-gradient(top,#007dc1 5%,#0061a7 100%);
background:-ms-linear-gradient(top,#007dc1 5%,#0061a7 100%);
background:linear-gradient(to bottom,#007dc1 5%,#0061a7 100%);
background-color:#007dc1;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:3px;
border:3px solid #069;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:14px;
font-weight:600;
padding:6px 24px;
text-decoration:none;
text-shadow:0 1px 0 #154682;
margin-top:1px
}
.soalselanjutnya:hover {
background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#0061a7),color-stop(1,#007dc1));
background:-moz-linear-gradient(top,#0061a7 5%,#007dc1 100%);
background:-webkit-linear-gradient(top,#0061a7 5%,#007dc1 100%);
background:-o-linear-gradient(top,#0061a7 5%,#007dc1 100%);
background:-ms-linear-gradient(top,#0061a7 5%,#007dc1 100%);
background:linear-gradient(to bottom,#0061a7 5%,#007dc1 100%);
background-color:#0061a7
}
.soalselanjutnya:active {
position:relative;
top:1px
}
#back2Top {
width:40px;
line-height:40px;
overflow:hidden;
z-index:999;
display:none;
cursor:pointer;
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
transform:rotate(270deg);
position:fixed;
bottom:200px;
right:0;
background-color:#ddd;
color:#555;
text-align:center;
font-size:30px;
text-decoration:none
}
#back2Top:hover {
background-color:#ccc;
color:#000
}
header {
background: #f9f9f9;
border-bottom:1px solid #ddd;
color: #333;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
header a:link {
display: flex;
align-items: center;
}
footer {
background: #f9f9f9;
border-top:1px solid #ddd;
color: #123;
text-align: left;
padding: 1rem;
}

footer a {
  color:#123;
}

footer a:hover {
  color:#f00;
}


header h1 {
font-size: 1.5rem;
}
.search-box {
position: relative;
display: flex;
align-items: center;
width: 300px;
}
.search-box input {
flex: 1;
padding: 0.5rem;
border: solid 1px #333;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box button {
padding: 0.5rem 1rem;
border: solid 1px #333;
background: #333;
color: #fff;
font-weight: bold;
cursor: pointer;
border-radius: 0 4px 4px 0;
transition: background 0.3s ease;
}
.search-box button:hover {
background: red;
}
/* Link Colors */
a {
color: #0063B1;
text-decoration: none;
}
a:hover {
color: red;
}
/* Layout Styles */
.container {
display: flex;
flex-wrap: wrap;
}
.content {
flex: 1;
padding: 1rem;
}

.content img {
max-width: 100%
}

.sidebar {
flex: 0 0 350px;
max-width: 350px;
padding: 1rem;
}
.apik2 {
margin: 1rem 0;
padding: 0.5rem;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.content, .sidebar {
flex: 1;
max-width: 100%;
padding: 0.5rem;
}
}
@media (max-width: 480px) {
body {
padding: 0;
}
header {
flex-direction: column;
align-items: flex-start;
}
  
header img {
width:100%;
height:auto;
}
  
.search-box {
margin-top: 0.5rem;
width: 100%;
}

.siji {
  width:98% 
 }
 .loro {
  width:98% 
 }
 .telu {
  width:98% 
 }
 .papat {
  width:98% 
 }
 .dadi {
  width:45%;
  margin:auto 
 }
 .selamatdatang {
  font-size:75% 
 }
 #sd {
  margin:1px 
 }
 #smp {
  margin:1px 
 }
 #sma {
  margin:1px 
 }
  
}