/* dark mode */
:root {
    --primary-color: #302AE6;
    --secondary-color: #000000;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
    --bg-img: url("../img/background.png");
    --judul:#000000;
    --episode:#000000;
    --pengarang:#000000;
    --nth:#e9e9e9;
    --hovv:#e2e2e2;
    --atas:#e2e2e2
}
body{
  background-image: var(--bg-img);
  color: var(--font-color);
   scrollbar-face-color: #EEC800;
   scrollbar-shadow-color: #006cb4;
   scrollbar-highlight-color:#006cb4;
   scrollbar-3dlight-color: #006cb4;
   scrollbar-darkshadow-color: #006cb4;
   scrollbar-track-color: #006cb4;
   scrollbar-arrow-color: #C1C1D1;
}

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: rgb(20, 20, 20);
    --heading-color: #818cab;
    --bg-img: url("../img/background-black.png");
    --judul:#fff;
    --episode:#fff;
    --pengarang:#fff;
    --nth:#494949;
    --hovv:#363636;
    --atas:#363636;
}
h1 {
  color: var(--secondary-color);
}
a {
  color: var(--primary-color);
}

.kanan > li > .respon{
  background-color: var(--bg-color);
  color: var(--font-color);
}
/* all  */
*{
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}
.konten{
  margin : 100px 40px 40px 40px;
  background-color: var(--bg-color);
  min-height: 475px;
  padding: 20px;
  box-shadow: 0 0 5px grey;
}

.kanan{
     float:right;
 }
.kiri{
  float: left;
}

.kiri a img{
  margin-right: 20px;
}

.active {
  color: #2196F3;
}
div.clear {
  clear: both;
  }

/* navbar  */
nav{
    margin: 0px;
    top: 0;
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 99;
}
nav ul li {
    float: left;
}
nav ul {
  z-index: 2;
    list-style-type: none;
    margin:0;
    overflow: hidden;
    padding:0 40px;
    background-color: var(--bg-color);
    box-shadow: 0 4px 7px rgba(0,0,0,0.5);
  }
nav li input{
  width: 30%;
  margin:15px 10px;
  }
nav li a {
    display: block;
    color: #595959;
    padding: 27px 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
  }
nav li a:hover:not(.active) {
    color: #2095F2
  }

nav ul li a img.logo{
      float:left;
      width: 70px;
      margin-top: -20px;
    }
nav .kanan >  a{
  text-decoration: none;
    color: #fff;
    font-weight: bold;
}
nav .kanan >  a{
  display: inline-block;
  text-align: center;
  margin-top: 15px;;
  padding: 10px;;
  border-radius: 4px;
  background-color: #2196F3;
}

nav .kanan > a:hover{
  background-color: #fff;
  color:#2196F3;
  border: solid 2px #2196F3;
  padding: 8px;
}

.kanan ul{
  position: absolute;
  right: 10px;
  top: 60px;
  text-align: left;
}
nav li input, nav #find input{
  height: 33px;
  width: 300px;
  border-radius: 4px;
  float:right;
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('../img/searchIcon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.kanan li input:focus{
  width: 100%;
}

nav #find input{
  margin-bottom: 10px;
}




.kanan > ul > li > a{
  text-align: left;
  margin: 0;
  padding: 0;
}
.kanan > ul > li {
    width: 100%;
  margin: 5px;;
  padding: 0;
}
.kanan > li > input{
  margin-top: 20px;
}
.kanan > a{
  font-size:15px;
}
/* tambahan untuk dropdown*/
.kanan > i{
  cursor: pointer;
}

.kanan > ul{
  width: 250px;
  text-align: left;
}
.kanan > ul > li{
  font-weight: normal;
  font-size: 20px;
}
.kanan > ul > li a{
  cursor: pointer;
}

/* modal box */
.modal-konten button{
  border: none;
  display: inline-block;
  text-align: center;
  margin-top: 15px;;
  padding: 10px;;
  border-radius: 4px;
  background-color: #2196F3;
  box-shadow: 0 3px 6px #2095F2;
  color: white;
}

.modal-konten button:hover{
  cursor:pointer;
}
.tutup{
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 36px;
  transform: rotate(45deg);
  cursor: pointer;
  font-family: sans-serif;
}

.bg-modal{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  z-index: 100;
  text-align: center;
}
.modal-konten{
  border-radius: 4px;
  width: 500px;
  height: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: var(--bg-color);
  text-align: center;
  padding: 20px;
  position: relative;
}

.pop-konten{
  padding-top: 50px;
  text-align: center;
  border-radius: 4px;
  width: 500px;
  height: 300px;
  background-color: var(--bg-color);
}

.modal-konten >form>input, .modal-konten textarea{
  text-align: center;
  width: 300px;
  margin: 5px 0 5px 0;
  border-radius: 4px;
}
.modal-konten >form>input{
  height: 40px;
}
.modal-konten >form>div{
  text-align: left;
  position: relative;
  left:40%;
}
.modal-konten >form>img{
  max-height: 180px;
  max-width: 80%;
}
.modal-konten >form>p{
  margin: 0;
  padding: 0;
}
.modal-konten >button{
  position: relative;
  bottom: 10px;
}

.garis{
  border-bottom: 1px solid grey;
  margin-bottom: 10px;
}
.abu{
  color: grey;
  margin-left: 10px;
  font-size: 14px;
}
.hijau{
  color: green;
}
.biru{
  color: blue;
}
.merah{
  color: rgba(255,0,0,0.8);
}
.kuning{
  color: yellow;
}
.size14{
  font-size: 14px;
}
.size18{
  font-size: 18px;
}
.icon{
  display: none;
}

.btn-masuk{
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  margin-top: 15px;;
  padding: 10px;;
  border-radius: 4px;
  background-color: #2196F3;
  box-shadow: 0 3px 6px #2095F2;
}

@media screen and (max-width: 920px) {
      .topnav li .respon{display: none;}
      .topnav a.icon {
        float: left;
        display: block;
        padding-right: 30px;
        padding-left:  0px;
      }
      #find input{
        background-color: var(--bg-color);
        color: var(--font-color);
      }
    }
/* interaksi bar  */
        div.bar {
          text-align: center;
          transition: height 3s ease-out;
        }
        div.bar a{
          padding:4px 0;
          display: block;
          color: #595959;
          text-decoration: none;
          font-weight: bold;
        }
@media screen and (min-width: 920px){
        div#find input, div#bar a{
              display: none;
        }
    }

/* footer  */
footer{
  position: static;
  background-color: var(--bg-color);
  width: 100%;
  text-align: center;
  margin:0;
  padding: 10px 0 ;
  box-shadow: 0 -4px 7px rgba(0,0,0,0.5)

}
footer a:hover{
  color: #2095F2;
}
footer p{
  cursor: default;
}
@media screen and (min-width: 400px) {
  footer{
    position: static;
  }

  footer div a{
    text-decoration: none;
    margin: 10px;
    padding: 10px 0px;
    display: inline;
    color: #7F7F7F;
  }
  footer div p{
    text-align: center;
      color: #7F7F7F;
      margin: 10px;
  }
}
@media screen and (max-width: 500px) {
  footer div a {
    text-decoration: none;
    margin: 0px;
    padding: 0;
    display: block;
    color: #7F7F7F;
  }
  footer div p{
    text-align: center;
      color: #7F7F7F;
      margin: 0;
      padding: 0;
  }
  .konten{
    margin: 100px 10px 20px 10px;
  }

}

@media screen and (max-width: 700px) {
  .modal-konten{
    margin: 15px;
  }
  .modal-konten{
    max-height: 80%;
  }
}
@media screen and (min-heigth: 300px) {
  footer{
    display: none;
  }
}


/* loading */
#loading{
  width: 80px;
  height: 80px;
  border: solid 12px #ccc;
  border-top-color: #2095F2;
  border-radius: 100%;
  z-index: 100;

  position: fixed;
  left: 45%;
  top: 45%;

  animation: putar 1s linear infinite;
}

@keyframes putar {
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}