@charset "utf-8";
/* CSS Document */

.button {
        background-color: #CCC; /* Blue background */
        color: #666;             /* White text */
        border: thin;             /* No border */
        font-size: 1rem;          /* Text size */
        border-radius: 5px;       /* Rounded corners */
        cursor: pointer;          /* Pointer cursor on hover */
        /**outline: none;            /* Remove outline */
        transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for background and shadow */
    }

    /* Hover and focus styles for the button */
    .button:hover, button:focus {
        background-color: #FC0; /* Darker shade of blue when hovered or focused */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Shadow effect for depth */
    }

    /* Active styles for the button */
    .button:active {
        background-color:#FC0; /* Even darker blue when button is clicked */
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); /* Smaller shadow to simulate pressing */
    }