/* chivo-mono-regular - latin-ext_latin */
 @font-face {
    font-family: 'Chivo Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/chivo-mono-v4-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/chivo-mono-v4-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('./fonts/chivo-mono-v4-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('./fonts/chivo-mono-v4-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
        url('./fonts/chivo-mono-v4-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('./fonts/chivo-mono-v4-latin-ext_latin-regular.svg#ChivoMono') format('svg'); /* Legacy iOS */
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Chivo Mono';
        font-size: 1rem;
    }
    html {
        height: 100%;
    }
    body {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        margin: 0 auto;
        width: min(100%, 600px);
        padding: 10px;
        height: 100%; 
    }
    .span1,
    .span2,
    .span3 {
        text-align: center;
    }
    div h1 {
        text-align: center;
        margin-bottom: 10px;
        font-size: 2.2rem;
    }
    #input-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
        margin: 20px auto;
    }
    #input-container p {
        text-align: center;
    }
    #input-btn-container {
        display: flex;
        justify-content: center;
        gap: 5px;
        width: 200px;
        margin: 0 auto;
    }
    #input-btn-container input {
        height: 30px;
        width: 50%;
        border-radius: 5px;
        padding: 2px 10px;
        text-align: center;
    }
    #los-btn {
        width: 50%;
        height: 30px;
        background-color: #CC00FF;
        color: white;
        padding: 8px;
        border: none;
        border-radius: 5px;
        font-size: 0.9rem;            
    }
    #los-btn:disabled{
        opacity: 0.2; 
    }
    #los-btn:hover:disabled {
        cursor: not-allowed;
    }

    #los-btn:hover {
        cursor: pointer;
    }
    #counter p,
    #counter span {
        font-weight: bold;
        text-align: left;
    }
    #question-container {
        margin: 15px 0 20px 0;
        text-align: left;
    }
    #answers-container {
        margin-bottom: 20px;
    }
    #answers-container div{
        display: flex;
        flex-direction: column;
        gap: 5px;
        
    }
    #answers-container div label {
        background-color: #E7E9EB;
        display: flex;
        padding: 15px;
        gap: 5px;
        transition: all ease-in-out 0.2s;
    }
    #answers-container div label:hover {
        cursor: pointer;
        background-color: #bbb;
        transition: all ease-in-out 0.2s;
    }
    #answers-container div label.checkedlabel {
        background-color: #bbb;
    }
    #btn-container {
        display: flex;
        justify-content: space-between;
        gap: 5px;
    }
    #next-btn {
        background-color: #06FF00;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
    }
    #next-btn:hover {
        cursor: pointer;
    }
    #timespent {
        padding: 5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .hide ,
    #btn-container.hide {
        display: none !important;
    }
    .button-container {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 10px;
    }
    .btn1,
    .btn2 {
        background-color: #06FF00;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
    }
    .btn1:hover,
    .btn2:hover {
        cursor: pointer;
    }

    .result-container {
        width: 100%;
        height: 100%;   
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: left;
    }
    .sub-container {
        width: 100%;
        border: 1px solid rgba(170, 170, 170, 0.425);
        border-radius: 5px;
        padding: 25px;
        
    }
    .sub-container p {
        margin-bottom: 5px;
        padding: 5px;
    } 
    .sub-container > p {
        margin-bottom: 5px;
        padding: 5px;
        background-color: white;
    }
    .sub-container > p:nth-of-type(2) {
        margin-bottom: 20px;
    }
    .sub-container div {
        display: flex;
        justify-content: space-between;
       
    }
    .sub-container > div:nth-of-type(odd) {
        background-color: #e7e9eb72;
    }
    .sub-container > div:nth-of-type(even) {
        background-color: rgba(119, 118, 118, 0.191);
    }
    .green {
        background-color: #00ff4087 !important;
       
    }
    .red {
        background-color: rgba(255, 115, 72, 0.639) !important;
        
    }
    .correct-answer {
        background-color: rgb(198, 198, 198) !important;
    }
    .your-answer,
    .false-answer,
    .correct-ans{
        background-color: rgba(187, 187, 187, 0.388);
        color: white;
       /* white-space: nowrap;*/
        padding: 2px 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .message {
        color: #FF8F03;
        text-align: center;
    }