* {
  margin: 0;
  padding: 0;
}
/*Custome ScroolBar*/
::-webkit-scrollbar {
  width: 4px;
}

/* Track */

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* End Here */
body {
  background: url(../images/uluwatulottery-bg.webp) fixed;
  background-size: 100% 100%;
  color: rgb(255, 255, 255);
}

.container-header {
  background: linear-gradient(to bottom, gold, rgb(255, 233, 107));
  box-shadow: 0px 0px 10px 2px black;
  border-bottom: 2px solid gold;
  margin: 20px;
  border-radius: 20px;
}

.container-header .header {
  text-align: center;
}

.logo {
  width: 500px;
  height: 180px;
}

.navbar {
  padding: 10px 0px;
  background: #695600;
  border-radius: 20px;
}

.navbar a {
  text-decoration: none;
  font-weight: bolder;
  color: white;
  margin: 0px 10px;
}

.container-first {
  margin: 0px 250px;
  padding: 10px 0px;
}

.container-banner {
  margin: 10px 0px;
}

.table-container {
  text-align: center;
  margin: 10px 0px;
  padding: 0px 10px;
}

.full {
  width: 100%;
}

.box {
  background: gold;
  border: 1px solid black;
  box-shadow: 0px 0px 8px 2px black;
}

.box .box-header {
  background: linear-gradient(to bottom, gold, rgb(255, 235, 122));
  color: black;
  font-weight: bolder;
  font-size: 30px;
  padding: 10px 0px;
  border-bottom: 1px solid #004050;
  box-shadow: 0px 2px 6px black;
  text-wrap: nowrap;
}

.box .date-container {
  padding: 10px 0px;
  font-size: 18px;
  color: black;
  font-weight: bolder;
  border-bottom: 2px dashed black;
}

.box .results {
  padding: 25px 0px;
  font-weight: bolder;
  font-size: 22px;
  text-wrap: nowrap;
}

.bola {
  background: linear-gradient(to bottom, rgb(255, 237, 134), #a09000);
  padding: 15px 22px;
  color: black;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 2px black;
}

.small {
  padding: 5px 12px;
}

.flex {
  display: flex;
}

.flex .flex-box {
  width: 100%;
  display: flex;
}

.flex .flex-box .container-flex {
  width: 100%;
  padding: 10px;
}

.article-container {
  background: linear-gradient(to bottom, rgb(255, 236, 131), gold);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid black;
  color: black;
  box-shadow: 0px 6px 6px 2px black;
}

.article {
  padding: 10px;
}

.article h1,
h2,
h3 {
  text-align: center;
}

.article p {
  text-align: justify;
  margin: 12px 0px;
}

/* CSS Carousel */
.slider {
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 500%;
  display: flex;
  text-align: center;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

/* CSS for manual carousel */

.center {
  text-align: center;
}

.navigation-manual {
  position: absolute;
  display: flex;
  margin-top: -2.32%;
  margin-left: 31%;
  text-align: center;
  justify-content: center;
}

.banner {
  width: 99%;
  border: 1px solid rgb(0, 0, 0);
}

.manual-btn {
  border: 2px solid #82ff93;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  display: none;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #82ff93;
}

#radio1:checked ~ .first {
  margin-left: 0;
}

#radio2:checked ~ .first {
  margin-left: -20%;
}
#radio3:checked ~ .first {
  margin-left: -40%;
}

/* CSS Navigation auto */

.navigation-auto {
  position: absolute;
  display: flex;
  justify-content: center;
  margin-top: 35%;
  margin-left: 31%;
  display: none;
}

.navigation-auto div {
  border: 2px solid #82ff93;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child) {
  margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1 {
  background: #82ff93;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
  background: #82ff93;
}

.header-content {
  padding: 12px 0px;
  text-align: center;
  font-size: 22px;
  font-weight: bolder;
  background: linear-gradient(to bottom, gold, #00798f);
}

.tabs {
  max-height: 500px;
  overflow: auto;
}

.history {
  width: 100%;
  border-spacing: 0;
  text-align: center;
}

.history thead {
  padding: 10px 0px;
  top: 0;
  position: sticky;
  font-size: 18px;
}

.history thead th {
  padding: 8px 0px;
  background: linear-gradient(to bottom, #004050, gold);
}

.history tr td {
  padding: 8px 0px;
}

.history tr:nth-child(even) {
  background: #fff38a;
  color: black;
  font-weight: bolder;
}

.history tr:nth-child(odd) {
  background: #b2b85d;
  color: black;
  font-weight: bolder;
}

.copyright {
  text-align: center;
  margin: 20px 0px;
  font-weight: bolder;
  font-size: 20px;
}

@media screen and (max-width: 1300px) {
  .container-first {
    margin: 0px 5px;
  }
}

@media screen and (max-width: 815px) {
  .flex {
    display: block;
  }

  .logo {
    width: 400px;
    height: 120px;
  }
}

@media screen and (max-width: 470px) {
  .box .box-header {
    font-size: 18px;
  }
  .logo {
    width: 300px;
    height: 100px;
  }
  .container-header {
    margin: 10px;
  }
}

@media screen and (max-width: 400px) {
  .small {
    padding: 1px 8px;
  }
}