* {
  margin: 0;
  padding: 0;
}

body{
  background: linear-gradient(to bottom, #0073d1, #005aa3, #004883, #005aa3, #0073d1);
}

.container-num {
  margin: 10px 25px 10px 25px;
}

.tabs{
  max-height: 500px;
  overflow-y: auto;
  border-radius: 30px;
  border: 1px solid #0051ff;
  box-shadow: 0px 0px 5px 1px #000000;
}

table.scrolldown{
  border: 1px solid black;
  width: 100%;
  border-spacing: 0;
}

table.scrolldown th{
  position: sticky;
  top: 0px;
  background: linear-gradient(to bottom, #0073d1, #001747);
  height: 40px;
  color: white;
  text-align: center;
  border: 1px solid #001747;
}

table.scrolldown td{
  border-left: 1px solid #001747;
  border-right: 1px solid #001747;
}

table.scrolldown tbody tr{
  height: 30px;
}

table.scrolldown tbody tr:nth-child(even) {
  background-color: #002966;;
  color: white;
}

table.scrolldown tbody tr:nth-child(odd) {
  background-color: #0044aa;;
  color: white;
}

/* table.scrolldown {
  width: 100%;
  border-spacing: 0;
  border: 1px solid black;
}
   
table.scrolldown tbody, table.scrolldown thead {
  display: block;
}   
thead tr th {
  height: 30px; 
  background: rgb(0, 140, 255);
  color: white;
}          
table.scrolldown tbody {
  height: 300px; 
  overflow-y: auto;
  overflow-x: hidden; 
  border-top: 2px solid black;
  background: rgb(255, 255, 255);
}
   
table.scrolldown tbody td {
  width : 500px;
  border-right: 1px solid black;
}

table.scrolldown thead th{
  width : 500px;
} */
td {
  text-align:center;
}
.tempat-tabel {
  padding: 10px 25px 10px 25px;
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0px 0px 8px 1px black;
}
.tempat-tabel2 {
  padding: 10px 25px 10px 25px;
  background: linear-gradient(to right, #0073d1, #00287e, #001747, #00287e, #0073d1);
  border-radius: 30px;
  color: white;
  box-shadow: 0px 0px 8px 1px black;
}

.logo {
  text-align: center;
}

.logototo {
  width: 700px;
  height: 150px;
}

.banner {
  background: linear-gradient(to bottom, #004883, #005aa3, #0073d1, #005aa3, #004883);
  width: 100%;
}

.gambar {
  width: 100%;
  height: 100%;
}

.full{
  width: 497px;
  height: 400px;
  border: none;
}

.tabel2 {
  width: 100%;
  background: #dadada;
  text-align: center;
  margin-bottom: 30px;
}

.tabel2 td {
  border: 2px solid rgb(151, 151, 151);
  height: 50px;
}

.bola {
  text-align: center;
  float: left;
  font-weight: bolder;
  font-size: 40px;
  margin-left: 5px;
  width: 60px;
  background: linear-gradient(to Bottom, #e60000, #e4e000);
  border-radius: 50%;
  padding: 7px 0px 7px 0px;
}

.bola2 {
  text-align: center;
  float: left;
  margin-left: 5px;
  font-weight: bolder;
  font-size: 34px;
  width: 60px;
  background: linear-gradient(to Bottom, #e60000, #e4e000);
  border-radius: 50%;
  padding: 6px 0px 6px 0px;
}

td.price {
  font-size: 40px;
  width: 20%;
}

/* Style the navbar */
#navbar {
  overflow: hidden;
  background: linear-gradient(to top, #690000, #ff0000);
  box-shadow: 0px 4px 4px 2px black;
}

#navbar a {
  float: left;
  display: block;
  border-radius: 10px;
  color: #e5ff00;
  text-align: center;
  font-weight: bolder;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: .3s;
}

#navbar a:hover {
  background-color: #610000;
  color: rgb(255, 255, 255);
}

#navbar a.active {
  background-color: #610000;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

.judul-history {
  text-align: center;
}

.tempat-history {
  text-align: center;
  width: 100%;
  display: flex;
  height: fit-content;
  margin-bottom: 20px;
}

.box {
  float: left;
  margin-left: 7px;
  width: 195px;
  height: fit-content;
  border: 2px solid black;
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 4px 1px black;
}

.HeaderBox {
  background: #001747;
  color: white;
  font-weight: bolder;
  box-shadow: 0px 3px 4px black;
}

.tabel3 {
  width: 100%;
  background: #e0dfdf;
  border-radius: 10px;
}

.tabel3 td {
  border: 1px solid #d6d6d6;
  font-size: 22px;
}

.footer{
  text-align: center;
  margin: 0px 0px 25px 0px;
}

.artikel{
  padding: 20px 200px 20px 200px;
  text-align: justify;
}

.isi{
  padding: 10px 20px 10px 20px;
  border-radius: 30px;
  color: white;
  background: linear-gradient(to right, #005aa3, #004883, #001747, #001747, #004883, #005aa3);
  box-shadow: 0px 0px 6px 2px black;
}

.isi ol{
  padding: 0px 25px 0px 25px;
  text-align: justify;
}

.artikel h1, h2{
  text-align: center;
  margin: 5px 0px 5px 0px;
  color: #ffffff;
  text-shadow: 0px 1px 3px black;
}

.artikel h3{
  color: #ffffff;
  text-shadow: 0px 1px 3px black;
}

.artikel p{
  margin: 5px 0px 5px 0px;
}

.container-frame{
  width: 500px;
  height: 800px;
}

@media screen and (max-width: 800px) {

  body,
  .logo,
  .container-num {
    width: 100%;
    margin: 0;
    /* The width is 100%, when the viewport is 800px or smaller */
  }

  .tempat-history {
    width: 100%;
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .slider {
    animation: slide 35s infinite;
    position: relative;
  }

  @keyframes slide {
    0%{
      transform: translateX(0);
    }
    10%{
      transform: translateX(0);
    }
    20%{
      transform: translateX(-100);
    }
    30%{
      transform: translateX(-200%);
    }
    50%{
      transform: translateX(-300%);
    }
    60%{
      transform: translateX(-400%);
    }
    70%{
      transform: translateX(-500%);
    }
    80%{
      transform: translateX(-600%);
    }
    90%{
      transform: translateX(-700%);
    }
    1000%{
      transform: translateX(-800%);
    }
  }

  .box {
    margin-left: 10px;
    margin-right: 10px;
    width: 170px;
    flex-shrink: 0;
    height: fit-content;
    scroll-snap-align: start;
    border: 2px solid black;
  }

  .tempat-tabel {
    padding: 0;
    background: transparent;
    box-shadow: 0px 0px 0px 0px black;
  }
  .tempat-tabel  h1{
    color: #ffffff;
  }

  .tempat-tabel2 {
    padding: 10px 10px 10px 10px;
    background: linear-gradient(to right, #0073d1, #00287e, #001747, #00287e, #0073d1);
    margin-bottom: 25px;
  }

  .logototo {
    width: 100%;
    height: 100px;
  }

  td.price {
    font-size: 20px;
    width: 20%;
  }
  .bola {
    text-align: center;
    float: left;
    font-size: 30px;
    margin-left: 5px;
    width: 45px;
    background: linear-gradient(to Bottom, #e60000, #e4e000);
    border-radius: 50%;
    padding: 7px 0px 7px 0px;
  }
  
  .bola2 {
    text-align: center;
    float: left;
    margin-left: 5px;
    font-size: 26px;
    width: 50px;
    background: linear-gradient(to Bottom, #e60000, #e4e000);
    border-radius: 50%;
    padding: 6px 0px 6px 0px;
  }

  .footer-banner{
    width: 100%;
  }

  .artikel{
    padding: 0;
    text-align: justify;
  }
  .sticky {
    position: relative;
    top: 0;
    width: 100%;
  }
}