body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height:1.5;
  }
  
  .App {
    text-align: center;
  }
  
  .App-logo {
    height: 40vmin;
    pointer-events: none;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .App-logo {
      animation: App-logo-spin infinite 20s linear;
    }
  }
  
  .App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }
  
  .App-link {
    color: #61dafb;
  }
  
  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .game-container{
    width: 405px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    min-height:756px;
  }
  
  @media (min-width:600px){
    .game-container{
      min-height:690px;
    }
  }
  
  .game-over{
    font-size:24px;
    font-weight:bold;
    margin-top:20px;
    margin-bottom:20px;
    text-align:center;
  }
  
  .combo-div{
    font-size:18px;
    margin-top:10px;
  }
  
  .top-bar{
    border-bottom:1px solid #ebebeb;
  }
  
  .top-bar .container{
    display:flex;
    align-items:center;
    justify-content: space-between;
    width:630px;
    max-width:100%;
    margin:0 auto;
    height:50px;
    padding: 0 15px;
    box-sizing: border-box;
  }
  
  .element, .element-left a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color:#000;
    font-size:13px;
  }
  
  
  .element-left{
    font-weight:bold;
  }
  .element-left img {
    display: block;
    margin: 0 auto;
    height:30px;
    margin-right:10px;
  }
  
  #help-button {
    border: none;
    background: none;
    cursor: pointer;
    background: #bce7d3;
    font-weight: bold;
    padding: 7px 15px;
    color: #000;
  }
  
  
  
  .btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    margin-top:20px;
  }
  
  .game-btn {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    border-radius: 25px; 
    background-color: transparent;
    color: black;
    font-size: 1em;
    margin: 0.5em 0;
    cursor: pointer;
  }
  
  .submit-btn{
    background:black;
    border:none;
    color:#fff;
  }
  
  @media (min-width: 600px) {
    .btn-wrapper{
        flex-direction: row;
        justify-content: space-between;
        max-width:600px;
    }
    .game-btn {
        width: 160px;
    }
  }
  
  .page-content{
    width: 100%;
    background: #f3eff9;
  }
  
   .p{text-align: center;
    padding-right:10px;
    padding-left:10px;
   }
  .inner-wrapper{
    width: 600px;
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 40px 20px;
  }
  .footer .inner-wrapper{
    padding:20px 0;
  }
  
  .content{
    padding:0 15px;
    margin-top:20px;
    width:100%;
    max-width:600px;
  }
  
  .links{
    text-align:center;
    width:70%;
    margin:0 auto;
    margin-bottom:50px;
  }
  
  h2.for-content{
    margin-top:40px;
  }
  
  .footer{
    width:500px;
    max-width:100%;
    padding:15px;
    margin:0 auto;
    text-align:center;
    margin-top:20px;
    box-sizing:border-box;
  }
  .contact{
    margin-top:10px;
    font-size:14px;
    color:#786a6a;
    margin-top:30px;
    width:600px;
    max-width:100%;
  }
  
  h1{
    text-align:center;
  }
  .game-header{
    display:flex;
    align-items:center;
    flex-direction: column;
    box-sizing: border-box;
  }
  .game-header h1{
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 0.5em;
  }
  .game-header p{
    font-size: 20px;
      line-height: 30px;
      margin: 0 auto 10px;
      max-width: 100%;
      text-align: center;
      width: 600px;
  }
  
  .message{
    margin-top:10px;
    margin-bottom:15px;
  }
  
  .disclaimer{
    font-size:14px;
    color:#786a6a;
    margin-top:30px;
    width:600px;
    max-width:100%;
  }
  
  .game-header{
    margin-bottom:50px;
  }
  
  img{
    max-width:100%;
  }



  .board {
    display: grid;
    width:405px;
    grid-template-columns: repeat(5, 1fr); /* Creates 5 columns */
    grid-template-rows: repeat(6, 1fr); /* Creates 6 rows */
    gap: 0px; /* Adjust the gap between tiles as needed */
  }
  
  .cell {
    width: 100%; /* Adjust width and height as needed */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width:81px;
    height:81px;
  }
  
  .cell-color1 {
    background-color: #f0f0f0; /* Light color for one set of cells */
  }
  
  .cell-color2 {
    background-color: #d0d0d0; /* Dark color for alternating cells */
  }
  
  .tile-container {
    position:relative;
    width:100%;
    height:100%;
  }

  .tile-container.selected svg{
    display:block;
  }
  
  .tile-selector {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index:9999
    /* Additional styles for selection appearance */
  }

  .tile-container.selected.free-move .selector-solid-outline{
    display:none
  }

  .tile-selector svg{
    width: 100%;
    height: 100%;
    display:none;
  }
  
  .selector-dashed-outline {
    /* Styles for the dashed outline of the selector */
  }
  
  .selector-solid-outline {
    /* Styles for the solid outline of the selector */
  }
  
  .tile-frame {
    position:relative;
    width:100%;
    height:100%;
  }

  .tile-layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform .8s linear;
    transform: scale3d(1, 1, 1) rotateZ(0deg);
    transform-origin: center center;
    transition-timing-function: cubic-bezier(0.35, 1.445, 0.44, 1.01);
  }

  .tile-layer.layer-z{
    transition: transform 1s;
  }

  .tile-layer.matched{
    transform: scale3d(0, 0, 0) rotateZ(45deg);
    transition-timing-function: cubic-bezier(0.34, -0.61, 0.37, 0.99);
  }
  
 /* Example layers - you will add or adjust these based on the specific SVGs used */
.layer-0 {
    z-index: 1;
    /* Additional styles or animations for this layer */
  }
  
  .layer-1 {
    z-index: 2;
    /* Additional styles or animations for this layer */
  }
  
  .layer-2 {
    z-index: 3;
    /* Additional styles or animations for this layer */
  }
  
  .layer-3 {
    z-index: 4;
    /* Additional styles or animations for this layer */
  }