*{
    margin: 0;
    padding: 0;
}
/* modalcss */
/* The Modal (background) */

.modal {
  display: none;  /*Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  cursor: pointer;
  text-align: center;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
/* modeBtn CSS */
.checkbox-wrapper-54 input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper-54 *,
.checkbox-wrapper-54 ::after,
.checkbox-wrapper-54 ::before {
  box-sizing: border-box;
}

/* The switch - the box around the slider */
.checkbox-wrapper-54 .switch {
  --width-of-switch: 3.5em;
  --height-of-switch: 2em;
  /* size of sliding icon -- sun and moon */
  --size-of-icon: 1.4em;
  /* it is like a inline-padding of switch */
  --slider-offset: 0.3em;
  position: relative;
  width: var(--width-of-switch);
  height: var(--height-of-switch);
  display: inline-block;
}
.dark{
background-color: black;
color: white;
transition: 1s;
}
.light{
background-color: white;
color:black;
transition: 1s;
}
/* The slider */
.checkbox-wrapper-54 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #8f8f97;
  transition: .4s;
  border-radius: 30px;
  box-shadow: #613737 2px 4px 7px 0px;
  
}

.checkbox-wrapper-54 .slider:before {
  position: absolute;
  content: "";
  height: var(--size-of-icon,1.4em);
  width: var(--size-of-icon,1.4em);
  border-radius: 20px;
  left: var(--slider-offset,0.3em);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(40deg,#da580c,#ea860c 70%);
  ;
 transition: .4s;
}

.checkbox-wrapper-54 input:checked + .slider {
  background-color: #303136;
  box-shadow: rgb(236, 228, 228) 2px 3px 4px ;
  content:"on";
}

.checkbox-wrapper-54 input:checked + .slider:before {
  left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
  background: #303136;
 content: "";
  /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
};


/* Mode BTn css End*/
body{
   background-color: green;
    text-align: center
}
.row{
  position: relative;
  padding-top: 40px;
}
.container{
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.game{
    height: 60vmin;
    width: 60vmin;
    display: flex;
    justify-content: center;
    align-items:center ;
    flex-wrap: wrap;
    gap: 10px;
}
.box2{
    width: 18vmin;
    height: 18vmin;
    border-radius: 1rem;
    border: none;
    box-shadow: rgb(228, 233, 238) 4px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    font-size: .1vmin;
    color: brown;
    background-color: #6f6f7a70;
    transition: 1s linear;
} 
.box{
  width: 18vmin;
  height: 18vmin;
  border-radius: 0.5rem;
  border: none;
  box-shadow: rgb(117 100 39) 4px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) 13px 10px 5px 3px inset;
  font-size: .1vmin;
  color: rgba(161, 96, 96, 0.236);
  background-color: #66b6d570;
  transition: 1s cubic-bezier(0.215, 0.610, 0.355, 1);

}


.trunO{
    background-image: url(./imageMusic/saheb.png);
    background-position: 12px 6px;
    background-size: 14vmin;
    border:2px solid red;
    background-repeat: no-repeat;
    transition: all .01s;
}
.trunX{
    background-image: url(./imageMusic/avator-removebg-preview.png);
    background-position: 12px 6px;
    background-size: 14vmin;
    border:2px solid red;
    background-repeat: no-repeat;
    transition: all .01s;
}

h1{
    font-variant: small-caps;
    color: #0b2523;
    text-shadow: 2px 3px 3px rgb(62, 62, 222);
    text-align: center; 
    margin-top: -23px;
    background-color: rgba(132, 56, 56, 0.209);
    /* position: absolute;
    top: 20px; */
}
h4{
  font-variant: small-caps;
    color: #d63713;
    text-shadow: 2px 3px 3px rgb(241, 235, 235);
    text-align: center; 
    font-size: 44px;
}



/* CSS */
.button-26 {
  background: #fff;
  border: 2px solid #888;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
  outline: none;

  padding: 0;
  box-shadow: 0 2px 10px rgba(153, 40, 40, 0.323), 5px 14px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.1s ease-in-out;
}
.button-26__content {
  padding: 14px 14px;
  border-radius: 8px;
  box-shadow: inset 0 -6px #d5d7de, 0 -2px #ffffff;
  transition: all 0.1s ease-in-out;
}
.button-26__text {
  color: #a03d3d;
  display: block;
  font-weight: 700;
  transform: translate3d(0, -4px, 0);
  transition: all 0.1s ease-in-out;
  font-variant: small-caps;
}
.button-26:active {
  box-shadow: none;
}
.button-26:active .button-26__content {
  box-shadow: none;
}
.button-26:active .button-26__text {
  transform: translate3d(0, 0, 0);
}
.butnDiv{
  position: absolute;
  left: 44%;
  bottom: -83px;
}
.modeSwitchBtn{
  position: absolute;
  left: 47%;
  bottom: -21px;
}
/*   */
.winner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-image: url('./imageMusic/win.gif');
  background-size: 100%;
  text-align: center;


}
.draw{
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 291px;
  background-image: url('./imageMusic/draw.gif');
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
 
}
.Q img{
width: 40px;
height: 40px;
border-radius: 50%;
border:3px solid green;
margin: -10px 44px;
}
@media only screen and (max-width: 768px) {
 
  .butnDiv{
    position: absolute;
    left: 35%;
    bottom: -63px;
}
    .modeSwitchBtn{
      position: absolute;
      left: 152px;
      bottom: 17px;
    }
    .checkbox-wrapper-54 .switch {
      --width-of-switch: 4.8em;
      --height-of-switch: 2.4em;
}
.game {
  height: 80vmin;
  width: 80vmin;
}

.box {
  width: 24vmin;
  height: 24vmin;
  background-size: 18vmin;

}
.box2 {
  width: 21vmin;
  height: 21vmin;
}
h1{
  text-shadow: 2px 2px 4px rgb(221 27 27);
  margin-top: -10px;
  font-weight: bolder;
  padding: 9px 15px;
  background-color: rgba(46, 138, 224, 0.655);
}
.Q img{
width: 23px;
height: 23px;
margin: 7px 52px;
border: rgb(136, 222, 16) 2px solid ;
border-radius: 50%;


}
.row{
  padding-top: 10px;
}
h4{
  position: absolute;
  top: 19%;
  left: 49%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-shadow: 2px 3px 13px rgb(23, 11, 11) !important;
}
}