form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}

input[type="text"], input[type="email"], input[type="number"], select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

div {
    margin: 10px 0;
}

label {
    margin-right: 20px;
    display: inline-block;
    font-size: 16px;
}

#vibrate {
    background-color: #ccab52;
    color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s ease;
    animation: vibrate 0.1s infinite;
}

@keyframes vibrate{
    0% {transform: translate(0px,-1px)rotate(0deg);}
    /* 10% {transform: translate(-1px,-2px)rotate(-1deg);}
    20% {transform: translate(-3px,0px)rotate(1deg);}
    30% {transform: translate(3px,2px)rotate(0deg);}
    40% {transform: translate(1px,-1px)rotate(1deg);}
    50% {transform: translate(-1px,2px)rotate(0deg);} */
    /* 60% {transform: translate(-3px,1px)rotate(0deg);}
    70% {transform: translate(3px,1px)rotate(-1deg);}
    80% {transform: translate(-1px,-1px)rotate(1deg);}
    90% {transform: translate(1px,2px)rotate(0deg);}
    100% {transform: translate(1px,-2px)rotate(-1deg);} */
}

#vibrate:active{
    box-shadow: 0 8px -20px rgb(0, 0, 0, 0.4);
}