@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
    }

    .shake {
    animation: shake 0.5s ease-in-out;
    }

    body { font-family: sans-serif; margin: 0; padding: 0; text-align: center; background: #f4f4f4; color: #333; }
    .man{text-decoration: none; color: white;}
    header { background:rgb(229, 76, 20); color: white; padding: 20px 20px; }
    header img{ height: 30px;}
    header h1{ font-family: "Mochiy Pop One", sans-serif; font-weight: 400; font-style: normal; }
    .tip { font-size: 1.5rem; margin: 30px auto; max-width: 700px; }
    .tip img{ cursor: pointer; height: 300px;}
    #session-counter{margin: -40px 0 50px 0;}
    .cta { margin: -30px auto; margin-bottom: 30px;}
    input[type="email"] { padding: 10px; width: 300px; max-width: 80%; }
    button { padding: 10px 20px; background: #efa02b; border: none; color: white; cursor: pointer; }
    footer { margin-top: 40px; font-size: 0.9em; color: #777; }
    .ads, .affiliate { margin: 30px auto; max-width: 700px; }

    #hide-div{
        border: 1px solid rgb(0,0,0);
        background-color: rgb(255,255,255);
        margin: 30px auto;
        position: absolute;
        top: 310px;
        width: 700px;
    }
    #hide-div p{
        font-size: 14px;
        text-align: center;
    }
     
    #popup {
        display: none; /* Hidden initially */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(to right, #efa02b, rgb(229, 76, 20));
        color: white;
        padding: 40px;
        border-radius: 10px;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
     /* Close button styling */
        #close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgb(229, 76, 20);
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        }

        #close-btn:hover {
            background: darkred;
        }



    @media screen and (max-width: 992px) {
        #hide-div{
            width: 75%;
        }
    }

    
    @media screen and (max-width: 720px) {
        #hide-div{
            width: 100%;
        }
    }

      .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropbtn {
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #f1f1f1;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }


/*connect four*/
  #board {
    display: grid;
    grid-template-columns: repeat(7, 60px);
    gap: 5px;
    justify-content: center;
    }

    .cell {
        width: 60px;
        height: 60px;
        background-color: lightgray;
        border: 2px solid black;
    }

    .red { background-color: red; }
    .yellow { background-color: yellow; }