.letter-image {
        max-width: 250px;
        height: auto;
        margin-bottom: 20px;
    }

    .input-letter {
        max-width: 250px;
        height: 150px;
        font-size: 90px;
        text-align: center;
        justify-content: center;
        background-color: transparent;
        border: 1px dashed #007fff;
    }

    .content-card {
        border: 1px solid rgb(97, 97, 97);
        padding: 15px;
    }

    .bg-dark {
        --bs-bg-opacity: 1;
        background-color: rgb(0 26 52) !important;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: #333;
        padding: 20px;
        color: white;
    }

    .sidebar a {
        display: block;
        margin-bottom: 20px;
        color: white;
        text-decoration: none;
    }

    .sidebar a:hover {
        color: #ffc107;
    }

    .form-control:focus {
        color: #fff;
        background-color: transparent;
        border-color: #333;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    }

    @media (min-width: 768px) {
        .sidebar {
            width: 250px;
        }

        .content {
            margin-left: 250px;
        }
    }

    .input-box {
        border-right: 1px dashed #007fff;
        width: 100%;
        height: auto;
    }

    button#submit-btn {
        width: 250px;
        height: 250px;
        font-size: 50px;
        text-align: center;
    }

    .mouse-hover-play {
        cursor: pointer;
    }