html {
    font-size: 62.5%;
    background-color: rgb(204, 204, 204);
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: rgb(204, 204, 204);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

label {
    font-size: 1.6rem;
    line-height: 1.5;
}

input {
    font-size: 1.4rem !important;
    line-height: 1.5;
    padding: 6px 12px;
}

.modal-content {
    border-radius: 10px;
}
.modal-header {
    padding: 10px 10px 10px 10px;
}

.modal-title {
    font-size: 1.6rem;
    line-height: 1.5;
}
.modal-body {
    padding: 10px 10px 10px 10px;
}
.btn {
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 6px 6px;
    border-radius: 10px;
}



@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

.btn:active {
    transform: scale(0.96) !important;
    transition-property: transform !important;
    transition-duration: 0.1s !important;
}

/* Define the highlight effect */
.highlight {
    animation: pulse 0.5s ease-in-out;
}

/* Apply the highlight effect to the button every two seconds */
#login-button.highlight {
    animation: pulse 0.5s ease-in-out;
}