.time-show {
    display: flex;
    justify-content: center;
    font-family: 'Digital7', sans-serif;
    font-size: 12rem;
}

.high-school-logo {
    height: 85px !important;
}

@font-face {
    font-family: 'Digital7';
    src: url('../fonts/digital-7/digital-7.ttf') format('truetype');
}

/* media query for small devices */
@media (max-width: 576px) {
    .time-show {
        font-size: 8rem;
    }
    .navbar .navbar-brand .align-middle {
        font-size: 0.8rem;
    }
    footer .text-muted {
        font-size: 0.8rem;
    }
    #classroom {
        font-size: 0.8rem;
    }
    /* login */
    .login-form {
        padding: 1rem;
    }
    .login-form .form-control {
        font-size: 1rem;
    }
    .login-form .btn {
        font-size: 1rem;
    }
    .high-school-logo {
        height: 50px !important;
    }
    .high-school-logo img {
        height: 100%;
    }
    
    footer span {
        font-size: 1rem;
        text-align: center;
    }

    .timer-container {
        button {
            font-size: 0.8rem;
            padding: 0.4rem 0.6rem;
            height: fit-content;
        }
    }

    .time-show {
        font-size: 6rem;
    }

    /* change modal title on small devices - about - contact */
    #aboutModal .modal-title, #contactModal .modal-title {
        font-size: 1rem;
        text-align: center;
        font-weight: bold;
    }
}

.time-up-img {
    animation: pulse 2s infinite alternate;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* force style for disabled buttons */
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}