* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

/* basic styling of buttons */
button, input[type=button], input[type=submit] {
    padding: 1em 2em;
    font-size: 1.2em;
    font-weight: bold;
    border: 4px solid #222;
    border-radius: 4px;
    background-color: #ffc;
}

/* adds a color change on hover */
button:hover, input[type=button]:hover, input[type=submit]:hover {
    background-color: #ff9933;
}


button, input[type=button] {
    /* button size and bg color*/
    padding: 15px 30px;
    background-color: orange;

    /* large white text */
    font-size: 20px;
    color: white;

    /* rounded corners */
    border-radius: 10px;

    /* subtle shadow effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);


    border: none;
    cursor: pointer;

    /* transitions for smooth hover effect */
    transition: all 0.3s ease, transform 0.2s ease;

    }

    /* adding hover effect */
    button:focus, input[type=button]:focus {
        background-color: #ff9933;
        transform: translateY(-2px); /* button moves up subtly for dynamic effect */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    }

    /* adding focus and effects */
    button:focus, input[type=button]:focus {
        outline: none;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
    }