*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;

}
.beginner {
  min-height: 100vh;
  width: 100%;
  background: #6495ED;
  background-position: center;
  background-size: cover;
  position: relative;
  
  }
/* ACCORDION ONE SECTION */
  #accordion1{
    margin: 30px auto;
    width: 1600px;
    /* height: 100%; */
    
  }
  #accordion1 li{
    position: relative;
    display: flex;
    flex-direction: column;
    list-style: none;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 5px 10px #88888836;
    transition: background-color 0.3s ease;
    background-color: rgba(117, 117, 117, 0.6); /* Base color */
    background-size: 200% 100%;
    background-position: right;
    max-width: 580px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    min-height: 150px;
  }
  #accordion1 li:hover {
  background-color: #3C3C3C; /* Darker green on hover */
}

   #accordion1 li .popup-inner {
    text-align: left;
   }
  #accordion1 li label{
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: white
  }
  #accordion1 li label span {
    position: absolute;
    transform: rotate(90deg);
    font-size: 26px;
    color: black;
    bottom: 0px;
    right: 15px;
  }
  #accordion1 label + input[type="radio"]{
    display: none;
  }
  #accordion1 .accordion-content{
    padding: 0 10px;
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
  }
  #accordion1 label + input[type="radio"]:checked + .accordion-content{
    max-height: 400px;
  }
  /* THE END OF ACCORDION SECTION */
  
/* POP UP SECTION */
.button1{
display: inline-block;
padding: 10px 10px;
background-color: #2196F3;
color: white;
text-decoration: none;
margin: 8px 8px;
text-transform: uppercase;
border-radius: 5px;
font-weight: 700;
transition: box-shadow 0.3s ease-in-out;
}
.button1:hover {
  box-shadow:
    0 0 12px #2196F3,
    0 0 24px #2196F3,
    0 0 36px rgba(33, 150, 243, 0.6),
    0 0 48px rgba(33, 150, 243, 0.4);
}
.button2{
display: inline-block;
padding: 8px 8px;
background-color: #2196F3;
color: white;
text-decoration: none;
margin: 8px 8px;
text-transform: uppercase;
border-radius: 5px;
font-weight: 700;
transition: box-shadow 0.3s ease-in-out;
}
.button2:hover {
  box-shadow:
    0 0 12px #2196F3,
    0 0 24px #2196F3,
    0 0 36px rgba(33, 150, 243, 0.6),
    0 0 48px rgba(33, 150, 243, 0.4);
}

.popup{
opacity: 0;
pointer-events: none;
transition: 0.4s;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background: rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
}
.popup-inner{
background-image: url(./deskwood.jpg);
background-position: center;
background-size: cover;
width: 1340px;
height: 820px;
border-radius: 12px;
box-shadow: 0px 6px 12px rgba(0,0,0,0.2);
}

.popup:target{
opacity: 1;
pointer-events: all;
}

/* FLIPBOOK SECTION */
input{
display: none;
}
img{
width: 100%;
height: 100%;
}
.book{
display: flex;
  margin-left: 90px;
  margin-top: 20px;
  
}
.cover{
width: 563px;
height: 738px;
}
.flip-book{
width: 563px;
height: 738px;
position: relative;
perspective: 1500px;
}
.flip{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: .8s ease-in-out;
color: #000;
}
p{
font-size: 14px;
line-height: 24px;
}
.front{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 0 1px;
box-shadow: inset 20px 0 50px rgba(0,0,0,0.5) 0 2px 5px rgba(0,0,0,.5);
}
.back{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background: #000;
}
.back-btn,
.next-btn{
position: absolute;
bottom: 15px;
right: 20px;
width: auto;
height: 17px;
cursor: pointer;
color: white;
background: gray;
padding: 5px 10px;
font-size: 20px;
border: 1px solid black;
border-radius: 5px;
}
.label-end{
  padding:0;
  margin: 0;
  font-size: 100px;
  margin-top: 300px;
  margin-left: 100px;
}
/* MODAL FOR RSP SECTION */
.button {
  padding: 5px 5px;
  margin: 20px;
  margin-top: 0;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  box-shadow: rgba(0, 0, 0, 0.4) 5px 5px, rgba(0, 0, 0, 0.3) 10px 10px, rgba(0, 0, 0, 0.2) 15px 15px, rgba(0, 0, 0, 0.1) 20px 20px, rgba(0, 0, 0, 0.05) 25px 25px;
  }
  .button:active {
  transform: scale(0.9);
  }
  .close-modalrsp {
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: white;
  padding: 1px 10px;
  margin-left: 200px;
  background: red;
  border-radius: 50%;
  }  
  .modalrsp{
  width: 650px;
  height: 570px;
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.3s ease-in-out;
  border: 1px solid #ccc;
  border-radius: 10px;
  z-index: 1;
  background-color: #fff;
  }
  .modalrsp.active {
  top: 50%;
  }
  .modalrsp .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.05);
  }
  .modalrsp .body {
  padding: 0.75rem;
  }

/* MODAL FOR 4X4 BUTTON SECTION */
.bttn {
padding: 10px 10px;
margin-left: 10px;
margin-top: 2px;
margin-left: 510px;
font-size: 16px;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.bttn:active {
transform: scale(0.9);
}
.close-modal1 {
border: none;
font-size: 20px;
font-weight: bold;
color: white;
padding: 1px 10px;
margin-left: 200px;
background: red;
border-radius: 50%;
}  
.modal1{
width: 650px;
height: 570px;
position: fixed;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
transition: top 0.3s ease-in-out;
border: 1px solid #ccc;
border-radius: 10px;
z-index: 1;
background-color: #fff;
}
.modal1.active {
top: 50%;
}
.modal1 .header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.05);
}
.modal1 .body {
padding: 0.75rem;
}
/* END MODAL FOR 4X4 INDEX SECTION */

/* MODAL FOP 5X5 INDEX */
.btns {
padding: 10px 10px;
margin-left: 10px;
margin-top: 2px;
margin-left: 510px;
font-size: 16px;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.btns:active {
transform: scale(0.9);
}
.close-modal2 {
border: none;
font-size: 20px;
font-weight: bold;
color: white;
padding: 1px 10px;
margin-left: 200px;
background: red;
border-radius: 50%;
}
.modal2{
width: 750px;
height: 690px;
position: fixed;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
transition: top 0.3s ease-in-out;
border: 1px solid #ccc;
border-radius: 10px;
z-index: 1;
background-color: #fff;
}
.modal2.active {
top: 50%;
}
.modal2 .header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.05);
}
.modal2 .body {
padding: 0.75rem;
}

/* MODAL 5X6 index */
.btttn {
padding: 10px 10px;
margin-left: 10px;
margin-top: 2px;
margin-left: 510px;
font-size: 16px;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.btttn:active {
transform: scale(0.9);
}
.close-modal3 {
border: none;
font-size: 20px;
font-weight: bold;
color: white;
padding: 1px 10px;
margin-left: 200px;
background: red;
border-radius: 50%;
}
.modal3{
width: 760px;
height: 800px;
position: fixed;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
transition: top 0.3s ease-in-out;
border: 1px solid #ccc;
border-radius: 10px;
z-index: 1;
background-color: #fff;
}
.modal3 .header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.05);
}
.modal3.active {
top: 50%;
}
.modal3 .body {
padding: 0.75rem;
}

/* 6X6 MODAL INDEX */
.btn {
  padding: 10px 10px;
  margin-left: 10px;
  margin-top: 2px;
  margin-left: 510px;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}
.btn:active {
  transform: scale(0.9);
}
.close-modal {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: white;
  padding: 1px 10px;
  margin-left: 20px;
  background: red;
  border-radius: 50%;
}


.modal {
  width: 900px;
  height: 810px;
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.3s ease-in-out;
  border: 1px solid #ccc;
  border-radius: 10px;
  z-index: 1;
  background-color: #fff;
}
.modal .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.05);
}

.modal.active {
  top: 50%;
}

.modal .body {
  padding: 0.75rem;
}

/* 7X6 index MODAL */
.btnseven {
  padding: 10px 10px;
  margin-left: 10px;
  margin-top: 2px;
  margin-left: 450px;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}
.btnseven:active {
  transform: scale(0.9);
}
.close-modal7 {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: white;
  padding: 1px 10px;
  margin-left: 20px;
  background: red;
  border-radius: 50%;
}
.modal7 {
  width: 1000px;
  height: 810px;
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.3s ease-in-out;
  border: 1px solid #ccc;
  border-radius: 10px;
  z-index: 1;
  background-color: #fff;
}
.modal7 .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.05);
}

.modal7.active {
  top: 50%;
}

.modal7 .body {
  padding: 0.75rem;
}

/* TITLE SECTION TO ALL GAMES */
.title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 355px;
}
.mini-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 260px;
}
.bingo2-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 310px;
}
.bingol-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 310px;
}
.quatro-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 370px;
}
.horrorq-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 330px;
}
.on-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 350px;
}
.seven-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 410px;
}
.six-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 350px;
}
.hr2-title{
  font-size: 25px;
  font-weight: bold;
  color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 370px;
}

/* GAME INDEX SECTION */
.body-card {
  padding: 0;
  margin: 0;
}
.index7-cards{
width: 100%;
margin: auto;
position: center;
margin-top: 0;
justify-content: center;
justify-items: center;
display: grid;
grid-template-columns: repeat(7, 139px);
gap: 2px;
perspective: 1000px;
box-sizing: border-box;
}
.index6-cards{
width: 100%;
margin: auto;
position: center;
margin-top: 0px;
justify-content: center;
justify-items: center;
display: grid;
grid-template-columns: repeat(6, 139px);
gap: 3px;
perspective: 1000px;
}
.index5-cards{
width: 100%;
margin: auto;
position: center;
margin-top: 0px;
justify-content: center;
justify-items: center;
display: grid;
grid-template-columns: repeat(5, 139px);
gap: 3px;
perspective: 1000px;
}
.mini-index {
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(4, 139px);
  gap: 3px;
  perspective: 1000px;
}
.index-card {
width: 139px;
height: 119px;
position: center;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.index-card:active{
transform: scale(0.97);
transition: transform .5s ease;
}
.index-card.flip {
transform: rotateX(180deg);
position: relative;
}
.front-index,
.back-index {
  width: 139px;
  height: 119px;
  padding: 0;
  position: absolute;
  border-radius: 5px;
  background: white;
  backface-visibility: hidden;
}
.front-index {
  transform: rotateX(180deg);
}
.back-index:hover{
  transform: scale(.95);
  
}

/* RSP INDEX CARDS */
.rock-index {
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(1, 528px);
  gap: 3px;
  perspective: 1000px;
}
.rock-card {
width: 528px;
height: 431px;
position: center;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.rock-card:active{
transform: scale(0.97);
transition: transform .5s ease;
}
.rock-card.flip {
transform: rotateX(180deg);
position: relative;
}
.frontrock-index,
.backrock-index {
  width: 528px;
  height: 431px;
  padding: 0;
  position: absolute;
  border-radius: 5px;
  background: white;
  backface-visibility: hidden;
}
.frontrock-index {
  transform: rotateX(180deg);
}

/* GAME CARDS SECTION */
.on-card{
width: 100%;
margin: auto;
position: center;
margin-top: 0;
justify-content: center;
justify-items: center;
display: flex;
align-items: center;
align-self: center;

}
.mini-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(4, 99px);
  gap: 3px;
  perspective: 1000px;
}
.bingo2-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(5, 99px);
  gap: 3px;
  perspective: 1000px;
}
.bingol-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(3, 99px);
  gap: 2px;
  perspective: 1000px;
}
.bingoq-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(3, 99px);
  gap: 3px;
  perspective: 1000px;
}
.bingoh-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(6, 99px);
  gap: 3px;
  perspective: 1000px;
}
.board-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(11, 99px);
  gap: 0px;
  perspective: 1000px;
}
.memory-card {
  width: 99px;
  height: 89px;
  position: center;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.memory-card:active {
  transform: scale(0.97);
  transition: transform .5s ease;
}
.memory-card.flip {
  transform: rotateX(-180deg);
  position: relative;
}
.front-face,
.back-face {
  width: 99px;
  height: 89px;
  padding: 0;
  position: absolute;
  border-radius: 5px;
  background: white;
  backface-visibility: hidden;
}
.front-face {
  transform: rotateX(-180deg);
}

/* HORSE RACE 2 CARDS */
.hr2-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(10, 99px);
  row-gap: 3px;
  column-gap: 0px;
  perspective: 1000px;
}
.horse-card {
  width: 99px;
  height: 79px;
  position: center;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.horse-card:active {
  transform: scale(0.97);
  transition: transform .5s ease;
}
.horse-card.flip {
  transform: rotateX(-180deg);
  position: relative;
}
.fronthorse-face,
.backhorse-face {
  width: 99px;
  height: 79px;
  padding: 0;
  position: absolute;
  border-radius: 5px;
  background: white;
  backface-visibility: hidden;
}
.fronthorse-face {
  transform: rotateX(-180deg);
}

/* MEMORY GAME CARDS SECTION */
.mg1-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(4, 139px);
  gap: 3px;
  perspective: 1000px;
}
.mg2-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(5, 139px);
  gap: 3px;
  perspective: 1000px;
}
.mg3-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(6, 139px);
  gap: 2px;
  perspective: 1000px;
}
.mg4-cards{
  width: 100%;
  margin: auto;
  position: center;
  margin-top: 0;
  justify-content: center;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(7, 139px);
  gap: 2px;
  perspective: 1000px;
}
.memory1-card {
  width: 139px;
  height: 119px;
  position: center;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.memory1-card:active {
  transform: scale(0.97);
  transition: transform .5s ease;
}
.memory1-card.flip {
  transform: rotateX(-180deg);
  position: relative;
}
.memory1front-face,
.memory1back-face {
  width: 139px;
  height: 119px;
  padding: 0;
  position: absolute;
  border-radius: 5px;
  background: white;
  backface-visibility: hidden;
}
.memory1front-face {
  transform: rotateX(-180deg);
}

/* BINGO MINI SECTION CONTAINER*/
.mini-container{
margin-top: 120px;
padding: 10px 10px;
display: flex;
justify-content: center;
align-items: center;

}
.mini-container > div{
margin: 5px;
border: 3px solid black;
border-radius: 8px;
}
.mini-container h2{
color: white;
background-color: red;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.mini1>h2{
color: white;
background-color: blue;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}


/* BINGO 2 SECTION CONTAINER*/
.bingo2-container{
margin-top: 90px;
padding: 5px 5px;
display: flex;
display: flex;
align-items: center;
justify-content: center;

}
.bingo2-container > div{
margin: 3px;
margin-left: 0;
border: 2px solid black;
border-radius: 5px;
}
.bingo2-container h2{
color: white;
background-color: gray;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingo1 h2{
color: white;
background-color: blue;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingo2 h2{
color: white;
background-color: red;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
/* BINGO HEAVY CONTAINER */
.bingoh-container{
margin-top: 90px;
padding: 5px 5px;
display: flex;
display: flex;
align-items: center;
justify-content: center;

}
.bingoh-container > div{
margin: 3px;
margin-left: 0;
border: 2px solid black;
border-radius: 5px;
}
.bingoh-container h2{
color: white;
background-color: gray;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingoh1 h2{
color: white;
background-color: blue;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingoh2 h2{
color: white;
background-color: red;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}

/* BINGO LITE CONTAINER */
.bingol-container{
margin-top: 180px;
padding: 10px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.bingol-container > div{
margin: 3px;
border: 3px solid black;
border-radius: 5px;
}
.bingol-container h2{
color: white;
background-color: gray;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingol1 h2{
color: white;
background-color: red;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingol2 h2{
color: white;
background-color: blue;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingol3 h2{
color: white;
background-color: green;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}


/* BINGO QUATRO CONTAINER */
.bingoq-container{
margin-top: 50px;
margin-bottom: 0;
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.bingoq2-container{
margin-top: 0;
margin-bottom: 0;
padding: 5px 5px;
display: flex;
align-items: center;
justify-content: center;
}
.bingoq-container > div{
margin: 1px;
border: 3px solid black;
border-radius: 5px;

}
.bingoq-container h2{
color: white;
background-color: gray;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingoq1 h2{
color: white;
background-color: red;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingoq2 h2{
color: white;
background-color: purple;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingoq-container > div{
margin: 3px;
border: 3px solid black;
border-radius: 5px;
}
.bingoq2-container > div{
margin: 3px;
border: 3px solid black;
border-radius: 5px;
}
.bingoq2-container h2{
color: white;
background-color: gray;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingoq3 h2{
color: white;
background-color: green;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.bingoq4 h2{
color: white;
background-color: blue;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}

/* ON CONTAINER */
.on-container{
margin-top: 100px;
padding: 0px 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;

}
.on1>h2{
color: white;
background-color: gray;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
.on-game>img{
  width: 400px;
  height: auto;
  border-radius: 12px;
  }

/* rsp CONTAINER */
.rsp-container{
  margin-top: 100px;
  padding: 0px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(6, 139px);
  gap: 40px;
}

/* HORSE RACE 2 CONTAINER */
.hr2-container{
margin-top: 90px;
padding: 10px 10px;
display: flex;
justify-content: center;
align-items: center;

}
.hr2-container > div{
margin: 5px;
border: 3px solid black;
border-radius: 8px;
}
.hr2-container h2{
color: white;
background-color: gray;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 2px solid black;
}
/* BOARD CONTAINER */
.board-container{
  margin-top: 40px;
  padding: 0px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  
}
.board>h2{
  color: white;
  background-color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px solid black;
  border-radius: 5px;
}
/* MEMORY GAME SECTION CSS */
.mg1-container{
  margin-top: 100px;
  padding: 0px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.mg1-container > div{
  margin: 0;
  margin-left: 0;
  border: 2px solid black;
  border-radius: 5px;
}
.mg1>h2{
  color: white;
  background-color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px solid black;
  border-radius: 5px;
}
.mg2-container{
  margin-top: 70px;
  padding: 0px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.mg2-container > div{
  margin: 0;
  margin-left: 0;
  border: 2px solid black;
  border-radius: 5px;
}
.mg2>h2{
  color: white;
  background-color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px solid black;
  border-radius: 5px;
}
.mg3-container{
  margin-top: 5px;
  padding: 0px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mg3-container > div{
  margin: 0;
  margin-left: 0;
  border: 2px solid black;
  border-radius: 5px;
}
.mg3>h2{
  color: white;
  background-color: gray;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px solid black;
  border-radius: 5px;
}

/*default tablet size screen*/
@media all and (max-width: 1024px) {
.mg2-container, .mg1-container{
  margin-top: 30px;
}
.popup-inner a.button2, .popup-inner .button1{
    position: absolute;
    top: 20px;
}
.el-audio-wrapper.fixed--wrapper {
    bottom: 70px;
}
.cover, .flip-book {
    height: 560px;
}
.beginner-lesson ul {
    max-width: 100%;
}


.beginner-lesson ul {
    width: 97% !important;
    margin-left: 0px !important;
}

.popup-inner {
        width: 97% !important;
        height: 684px;
        padding-top: 0px;
        margin-top: 50px !important;
}
.book {
    margin: 20px !important;
    margin-bottom: 0px !important;
}
.mini-cards {
    grid-template-columns: repeat(4, 1fr) !important;
}
.memory-card {
    width: 70px;
    height: 70px;
}
.front-face, .back-face {
    width: 70px;
    height: 70px;
}
.bingo2-cards {
    grid-template-columns: repeat(5, 1fr);
}

.bingo2-container .memory-card {
    width: 55px;
    height: 55px;
}
.bingo2-container .front-face, .bingo2-container .back-face {
    width: 55px;
    height: 55px;
}
.bingol-cards {
    grid-template-columns: repeat(3, 1fr);
}
.bingol-cards .memory-card {
    width: 68px;
    height: 68px;
}
.bingol-cards .front-face, .bingol-cards .back-face {
    width: 68px;
    height: 68px;
}
.board-cards {
    grid-template-columns: repeat(11, 1fr);
}
.board-cards .front-face, .board-cards .back-face {
        width: 60px;
        height: 60px;
    }
.board-cards .memory-card {
        width: 60px;
        height: 60px;
  }
.hr2-cards {
    grid-template-columns: repeat(10, 1fr);
}
.horse-card {
    width: 70px;
    height: 70px;
}
.fronthorse-face, .backhorse-face {
    width: 70px;
    height: 70px;
}
.bingoh-cards {
    grid-template-columns: repeat(6, 1fr);
}
.mg3-cards {
    grid-template-columns: repeat(6, 1fr);
}
.front-index, .back-index {
    width: 100px;
    height: 100px;
}

.index-card {
    width: 100px;
    height: 100px;
}

.bingoq-cards {
    grid-template-columns: repeat(3, 1fr);
}

.memory-game-wrapper-3 .memory1-card {
    width: 100px;
    height: 100px;
}
.mg2-cards.memory-game-wrapper-3 {
    grid-template-columns: repeat(5, 1fr);
}

.mg4-cards {
    grid-template-columns: repeat(7, 1fr);
}

.memory1-card {
    width: 100px;
    height: 100px;
}
.memory1front-face, .memory1back-face {
    width: 100px;
    height: 100px;
}
.modal {
    width: 100%;
    max-width: 740px;
}
.index6-cards {
    grid-template-columns: repeat(6, 1fr);
}
.beginner-lesson {
    margin-bottom: 60px !important;
    padding: 10px 0px 10px 10px;
}
.scoreboard-view {
        right: 0px !important;
        top: 24px !important;
    }
.game-tally-inner {
    padding: 25px;
    margin-bottom: 12px;
    bottom: 160px;
}
.modal3.active {
    top: 63%;
}
.rsp-container {
    grid-template-columns: repeat(6, 1fr);

}
.index5-cards {
    grid-template-columns: repeat(5, 1fr);
}
    .modal3 .index-card {
        width: 80px;
        height: 80px;
    }
    .modal3 .front-index, .modal3 .back-index {
        width: 80px;
        height: 80px;
    }
}

.omok{
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}
#controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
button {
  margin: 0 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
button.black {
  background-color: black;
  color: white;
}
button.white {
  background-color: white;
  color: black;
  border: 1px solid #ccc;
}
button.close-popup {
  background-color: red; /* Red background */
  color: white; /* White text */
  font-size: 24px; /* Larger X */
  border-radius: 50%; /* Round shape */
  width: 50px; /* Size of the button */
  height: 50px; /* Size of the button */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* Remove border */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add shadow */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

button.close-popup:hover {
  background-color: darkred; /* Darker red on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

#gameBoard {
  display: grid;
  grid-template-columns: repeat(15, 40px);
  grid-template-rows: repeat(15, 40px);
  gap: 1px;
  background-color: #d2a679;
  border: 5px solid #8b5a2b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}
.cell {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 1px solid #8b5a2b;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  font-size: 18px; /* Increase the font size of the number */
  font-weight: bold; /* Make the number bold */
  color: #333; /* Dark color for the numbers */
}

.cell.taken {
  cursor: not-allowed;
}

.stone {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  cursor: grab;
}
.stone.black {
  background-color: black;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.stone.white {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#gameContainer {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(50%, 50%) scale(0);
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px;
  z-index: 1000;
  transition: transform 0.3s ease;
}
#gameContainer.open {
  transform: translate(-50%, -50%) scale(1);
}
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
#gameControls {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* ANNOTATION SECTION */
.showup-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showup-btn i {
  font-size: 20px;
  color: white;
}

.floating-toolbar {
  position: fixed;
  bottom: 70px;
  left: 20px;
  background-color: black;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1001;
  display: block; /*edited for now*/
}

.floating-toolbar button {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
   width: 45px;
   height: 45px;
}

.floating-toolbar button.active {
  background-color: black;
  color: white;
}

.floating-toolbar button svg {
  width: 20px;
  height: 20px;
  stroke: white;
  fill: none;
}

.line-thickness-icons {
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.line-thickness-icons button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.line-thickness-icons button:hover {
  background-color: #444;
}


.text-cursor {
  cursor: url('https://cdn.iconscout.com/icon/free/png-256/text-1625481-1379282.png'), auto;
}

.color-picker {
  display: none;
  position: absolute;
  bottom: 50px;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  z-index: 1002;
}

.color-picker button {
  width: 20px;
  height: 20px;
  margin: 5px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.color-picker button.red {
  background-color: red;
}

.color-picker button.blue {
  background-color: blue;
}

.color-picker button.black {
  background-color: black;
}


/*newly Added CSS*/
div#annotation-controlPanel {
    position: absolute;
    top: 0px;
    width: 100%;
}
#annotation-canvas-container {
    position: fixed;
    top: 0px;
    width: 100vw !important;
    overflow: hidden;
    height: 100vh;
    z-index: 999;
}
/*
.canvas-container {
    width: 100% !important;
    overflow: hidden;
    height: 100% !important;
}
.canvas-container {
  width: 100% !important;
  height: 100% !important;
}

#canvas, canvas.upper-canvas {
    width: 100vw !important;
    height: auto !important;
    display: block !important;
    border: 0px solid rgb(0, 0, 0) !important;
}*/
div#thicknessSelect-box {
    position: relative;
}

div#thicknessSelect {
    display: none;
    position: absolute;
    top: 0px;
    right: -50px;
}
div#thicknessSelect.show {
    display: block !important;
}
div#annotation-canvas-container.disablecanvas {
    display: none !important;
}
.floating-toolbar button:disabled {
    background-color: gray;
    color: darkgray;
    cursor: not-allowed;
    border: 1px solid lightgray;
}
div#colorselect {
    display: none;
    position: absolute;
    right: -48px;
    bottom: 0px;
}
button.color-btn {
    font-size: 12px;
}
div#colorselect.show {
    display: block !important;
}