* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
    --white: #ffffff;
    --black: #000;
    --bg-black: #04010c;
    --txt-color: #f3ecfe;
    --purple-btn-bg: #5e1ba5;
    --yellow-btn-bg: #f9bd25;
    --green-btn-bg:#066E43;
    --red-btn-bg: #7b0421;
    --icon-color: #924eda;
    --green-txt: #00ff85ab;
    --red-gradient: linear-gradient(to bottom, #ab013e, #00ab013e);
    --red-to-blue-gradient: linear-gradient(to bottom, #ab013e, #030718);
    --purple-gradient: linear-gradient(to bottom, #7744c6, #00ab013e);
    --green1-gradient: linear-gradient(to bottom, #07ad5e, #030718);
    --green2-gradient: linear-gradient(to bottom, #69890e, #030718);
    --input-bg:#152754;
  }
  html,
  body {
    /* overflow-x: hidden; */
    scroll-behavior: smooth;
    background: var(--bg-black);
    color: var(--txt-color);
    font-family: 'Clash Display', sans-serif;
    margin-inline: auto;
  }
  main,
  footer {
    width: 95%;
    margin-inline: auto;
  }
  img,
  video {
    display: block;
    max-width: 100%;
  }
  a {
    text-decoration: none;
    cursor: pointer;
  }
  ul {
    list-style-type: none;
  }
  li {
    cursor: pointer;
  }
  /* icon */
  .logo-img {
    height: 30px;
    cursor: pointer;
  }
  .fa-solid {
    cursor: pointer;
  }
  .menu-bar {
    font-size: 25px;
  }
  .close-bar {
    color: black;
    font-size: 30px;
    display: grid;
    place-content: center;
    margin-top: 2rem;
  }
/* result info */
.result-info{
  margin-top: 2rem;
}
.info{
  line-height: 25px;

}
.info span{
  display: block;
  margin: 0.5rem 0 1rem 0; 
}
.result-info .sec-title{
    font-size: 2.2rem;
    width: 320px;
    line-height: 45px;
  }
/* table */
table{
  text-align: center; 
  border-collapse: collapse;
  border: none;
  margin-top: 2rem;
  /* margin-inline: auto; */
}

thead tr th{
  background: var(--input-bg);
  font-size: 0.7rem;
  padding: 0.7rem 0.7rem;
}
tbody tr:hover{
  background-color: #919090;
}

 tbody tr td{
  font-size: 0.7rem;
  padding: 0.5rem 0;
}
.lucky-number{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  justify-content: center;
}
.lucky-number li{
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: 0.7rem; */
  background-color: var(--input-bg);
  height: 25px;
  width: 25px;
}

@media only screen and (min-width:768px){
 
  thead tr th{ 
      width: fit-content;
      margin: 0 2rem;
    padding: 1rem 2rem;
  }
  thead tr th{
    font-size: 1.2rem;
  }

  tbody tr td{
    font-size: 1.2rem;
  }
  
  .lucky-number li{
    font-size: 1.2rem;
    width: 45px;
    height: 40px;
    margin: 0 0.3rem;
  }
  /* footer{
   position: absolute;
   bottom: 0; 
  } */
}

@media only screen and (min-width:1017px){
  .result-info,.result-table{
    width: 80%;
    margin-inline: auto;
  }
    tbody tr td{
      font-size: 1.5rem;
    }
  .lucky-number li{
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
  }
  .info{
    width: 800px;
  }
}