@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root {
    /* Primary Colors */
    --primary-color: #0028AD; 
    --secondary-color: #fff; /* Inner background color */
    --theme-logo: #0028AD;

    /* Default Components */
    --text-title: #0028AD;
    --text-content: #0028AD;
    --primary-border: #0028AD;
    --secondary-border: #0028AD5c;
    --btn-text: #fff; 
    --btn-default: #0028AD;
    --btn-default-hover: #0056b3;
    --btn-default-active: #003CAB;
    --dropdown-background: #fff;
    --dropdown-hover: #F2F2F2;
    --dropdown-active: #0028AD;
    --dropdown-text: #0028AD;
    --dropdown-text-hover: #0028AD;
    --dropdown-text-active: #fff;
    --dropdown-border: #00000026;

    /* Footer */
    --footer-background: #F7F8FC; /* Color used for footer */
    --footer-text: #000;

   /* Answer buttons */ 
    --btn-answer-background: #fff; 
    --btn-like: #006400; /* Button color for 'like' */
    --btn-dislike: #8B0000; /* Button color for 'dislike' */
    --btn-neutral: #FFD700; /* Button color for 'neutral' */
    --btn-answer-hover: #fff; 
   
    /* Paging */ 
    --btn-paging: #FFF;
    --btn-paging-hover: #f2f2f2;
    --btn-paging-active: #0028AD;
    --paging-text-active: #FFF;

    /*Loader*/
    --loader-background: linear-gradient(to bottom, rgba(20, 20, 50, 0.6), rgba(5, 5, 25, 0.6));
}

.darkmode {
   /* Primary Colors */
    --primary-color: #000e3c;
    --secondary-color: #001969; /* Inner background color */
    --theme-logo: #FFF;

    /* Default Components */
    --text-title: #FFF;
    --text-content: #E0E0E0;
    --primary-border: #E0E0E0;
    --secondary-border: #ffffff5c;
    --btn-text: #fff; 
    --btn-default: #0028AD;
    --btn-default-hover: #0056b3;
    --btn-default-active: #003CAB;

    /* Dropdown */
    --dropdown-background: #000e3c;
    --dropdown-hover: #ffffff20;
    --dropdown-active: #0028AD;
    --dropdown-text: #E0E0E0;
    --dropdown-text-hover: #E0E0E0;
    --dropdown-text-active: #fff;
    --dropdown-border: #ffffff26;

    /* Footer */
    --footer-background: #10266c;
    --footer-text: #FFF;

    /* Answer Buttons */
    --btn-answer-background: #fff; 
    --btn-answer-hover: #fff; 
    --btn-like: #006400; /* Button color for 'like' */
    --btn-dislike: #8B0000; /* Button color for 'dislike' */
    --btn-neutral: #FFD700; /* Button color for 'neutral' */

    /* Paging */
    --btn-paging: #FFF;
    --btn-paging-hover: #f2f2f2;
    --btn-paging-active: #0028AD;
    --paging-text-active: #FFF;

    /*Loader*/
    --loader-background: linear-gradient(to bottom, rgba(242, 242, 242, 0.7), rgba(200, 200, 200, 0.7));
}

body {
    font-family: 'Source Serif 4', Arial;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.text-title {
    margin-bottom: 18px;
    color: var(--text-title);
    font-weight: bold;
    text-align: center;
    font-size: 20px;
}

.text-content {
    color: var(--text-content);
    font-size: 14px;
}

header {
    position: sticky;
    top: 0;
    background: var(--secondary-color);
    padding: 5px 30px 5px 30px;
    z-index: 10;
}

footer {
    padding: 20px 30px;
    background-color: var(--footer-background);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: Lato;
    font-size: 16px;
    color:var(--footer-text);
}

.btn-default {
    font-size: 12px;
    padding: 6px 0px;
    width: 120px;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
    color: var(--btn-text);
    background: var(--btn-default);
    border: 1px solid var(--btn-default);
    margin: 10px 0px;
}

    .btn-default:hover{
        background: var(--btn-default-hover);
        color: var(--btn-text);
    }

    .btn-default:active, .btn-default.active {
        background: var(--btn-default-active);
        color: var(--btn-text);
    }

.logo img {
    height: 40px;
}

.container-outer {
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    padding: 50px 0px;
}

.container-inner {
    background-color: var(--secondary-color);
    padding: 30px 0px;
    width: 80%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

@media (max-width: 576px) {
    .container-outer {
        padding: 30px 0px;
    }

    .container-inner {
        width: 95%;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .container-outer {
        padding: 45px 0px;
    }
}