*{
    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/gangnamlottery-bg.webp) fixed;
    background-size: 100% 100%;
    color: white;
}

.header-container{
    width: 100%;
    background: rgb(255, 255, 255);
    border-bottom: 2px solid rgb(0, 0, 0);
    box-shadow: 0px 3px 8px black;
}

.header{
    text-align: center;
}

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

.navbar{
    background: #9b0000;
    padding: 10px 0px;
}

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

.date-container{
    text-align: center;
    padding: 10px 0px;
    background: #700000;
    font-size: 22px;
    font-weight: bolder;
}

.marquee-container{
    padding: 10px 0px;
    background: #460000;
    font-weight: bolder;
    margin: 0px 0px 10px 0px;
}

.border-moving{
    border: 2px solid white;
    border-radius: 50%;
}

.container-table-first{
    width: 100%;
}
.container-flex{
    display: flex;
}

.container-full{
    width: 100%;
}

.full{
    width: 100%;
}

.box-container{
    margin: 20px 50px;
    background: linear-gradient(to bottom, #ff0000, #000000);
    text-align: center;
    font-weight: bolder;
    border-radius: 10px;
    font-size: 22px;
    border: 1px solid white;
    box-shadow: 0px 0px 6px 3px white;
}

.box-container .header-box{
    padding: 10px 0px;
    border-top: 2px solid white;
}

.container-timer{
    padding: 10px 0px;
}

.morning, .noon, .afternoon, .night{
    padding: 10px 0px 0px 0px;
}

.first{
    width: 100%;
    font-size: 18px;
}

.first td{
    padding: 20px 0px;
}

.container-results{
    padding:10px 0px;
}

.bola{
    padding: 15px 22px;
    background: linear-gradient(to bottom, #ff0000, blue);
    border-radius: 50%;
    border: 1px solid white;
    box-shadow: 0px 0px 6px 2px rgb(255, 255, 255);
    font-size: 22px;
}

.container-article{
    margin: 10px 50px;
    background: linear-gradient(to bottom, #ff0000, #000000);
    box-shadow: 0px 0px 6px 2px rgb(255, 255, 255);
}

.article{
    padding: 10px;
}

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

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

.footer-banner{
    margin: 20px 10px;
}

.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%;
  }
  
  .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;
  }
  #radio3:checked ~ .navigation-auto .auto-btn2{
    background: #82ff93;
  }

  .copyright{
    padding: 20px 0px;
    background: #700000;
    text-align: center;
  }

  .history-container{
    margin: 20px 10px 0px 10px;
  }

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

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

  .history thead th{
    padding: 12px 0px;
    background: linear-gradient(to bottom, #ff0000, #000000);
    top: 0;
    position: sticky;
  }

  .history td{
    padding: 10px 0px;
    border: 1px solid #460000;
  }

  .history tr:nth-child(even){
    background: #9b0000;
  }

  .history tr:nth-child(odd){
    background: #700000;
  }

  .time-history{
    padding: 10px 0px;
    text-align: center;
    font-weight: bolder;
    background: #700000;
  }

  @media screen and (max-width:750px) {
    .box-container{
        margin: 20px 8px;
    }

    .container-article{
        margin: 10px 8px;
    }
  }

  @media screen and (max-width:630px) {
    .bola{
        padding: 10px 17px;
    }
  }

  @media screen and (max-width:525px) {
    .bola{
        font-size: 18px;
        padding: 7px 12px;
    }
    .logo{
        width: 320px;
        height: 80px;
    }
  }
  @media screen and (max-width:410px) {
    .box-container{
        font-size: 14px;
        margin: 20px 3px;
    }
    .bola{
        font-size: 12px;
        padding: 5px 10px;
    }
    .box-container .header-box{
        padding: 5px 0px;
    }
    .container-results{
        padding: 5px 0px;
    }
    .first td{
        padding: 10px 0px;
    }
  }