@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
        * {
            box-sizing: border-box;
        }
        
        html {
            /* font-size: 62.5%; */
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0px;
            background-color: rgb(36, 36, 36);
        }
        
        .container {
            background-color: #fff;
            padding-bottom: 10px;
        }
        
        #quoteConteiner {
            background-color: rgb(251 219 207);
            color: #444444;
            ;
        }
        
        .typingText {
            font-size: 1.5rem;
            white-space: wrap;
        }
        
        .typeHereLabel {
            display: block;
            font-size: 1.2rem;
            color: #444;
            padding: 1rem;
        }
        
        #textarea {
            color: #0076ce;
            font-size: 2rem;
            background-color: rgb(235, 235, 235);
            cursor: default
        }
        
        #minTimeEl {
            font-size: 1.2rem;
            color: red!important;
        }
        
        .correct {
            color: green;
            font-weight: bold;
        }
        
        .message {
            color: green;
            font-weight: bold;
            font-family: 'Poppins', sans-serif;
            font-size: 1.5rem;
        }
        
        .incorrect {
            color: red;
            font-weight: bold;
            font-family: 'Poppins', sans-serif;
            font-size: 1.5rem;
        }
        
        .countDown {
            font-size: 1.5rem;
        }
        
        .info {
            font-size: 15px;
            line-height: 18px;
            color: #444444;
        }
        /* .switchNightMood {
            float: left;
        } */
        
        #bangaKeyRadioContainer {
            display: block;
            width: 100%
        }
        
        #keyboardSelection {
            display: none;
        }
        
        #controllSwitch {
            display: flex;
            flex-direction: row;
            flex-basis: auto;
            flex-wrap: nowrap;
            justify-content: space-between
        }
        
        #controllSwitch,
        .form {
            display: flex;
            flex-direction: row;
            flex-basis: auto;
            flex-wrap: nowrap;
            justify-content: space-between
        }
        
        .child {
            width: 25%;
            justify-content: flex-start;
            text-align: left;
        }
        
        .child2 {
            width: 25%;
            justify-content: flex-start;
            text-align: left;
        }
        
        .child3 {
            width: 25%;
            justify-content: flex-end;
            text-align: right;
        }
        
        .hidden,
        #typingTextBangla {
            display: none;
        }
        
        legend {
            font-size: 18px;
        }
        
        input[type=radio]:checked~.check {
            border: 5px solid #0DFF92;
        }
        
        input[type=radio]:checked~.check::before {
            background: #0DFF92;
        }
        
        input[type=radio]:checked~label {
            color: #0DFF92;
        }
        
        div#countDown {
            margin-left: 5px;
        }
        
        .rememberme {
            color: rgb(252, 0, 147);
        }
        
        .headingContainer {
            text-align: center;
        }
        
        ul.list-group.col-sm-4 {
            list-style: none;
        }
        
        @media only screen and (max-width: 600px) {
            .info {
                font-size: 10px;
                line-height: .5rem;
                text-align: center;
                float: left;
                color: #444444;
            }
            .display-4 {
                font-size: 22px;
                font-weight: 300;
                font-weight: bold;
            }
            #controllSwitch {
                flex-direction: column;
                justify-content: center;
            }
            .child,
            .child3 {
                width: 100%;
                justify-content: space-evenly;
                text-align: center;
            }
            .childbig {
                width: 100%;
                justify-content: center;
                text-align: center;
                align-items: center;
            }
            .child2 {
                width: 100%;
                justify-content: flex-start;
                text-align: center;
            }
            .form div,
            .form span,
            .form button {
                width: 100%;
                justify-content: center;
                text-align: center;
                align-items: center;
            }
            .list-group {
                padding: 0px !important;
            }
        }
        
        @media only screen and (max-width: 768px) {
            .input-group>.form-control {
                width: 95px;
            }
            .custom-control {
                padding: 0px;
            }
        }