:root {
/* Default colors */
--background-color: #f4f4f4;
--font-color: #1d1d1d;
/* Main Colors - Header & Buttons & ActiveTab */
--header-buttons-activetab-color: #38b0ec; /* #38b0ec , #ec6238*/
--font-for-header-buttons-activetab:#ffffff;
--button-hover-background:#35b58f;
/* Tabs */
--inactivetab-background:#eee; /* also background color for progressbar */
--activetab-background:#fff;
/* forms etc */
--form-background:#ffffff;
--borders:#ddd;
--box-shadow:rgba(0, 0, 0, 0.1);
/* Progress bar */
--progress-gradient1:#94cae6;
--progress-gradient2:#72c0ec;
--progress-gradient3:#38b0ec;

/* ... var(--background-color);  other variables ... 
var(--box-shadow);
*/
}

.dark-mode {
/* Default colors */
--background-color: #040404;
--font-color: #0F0;
/* Main Colors - Header & Buttons & ActiveTab */
--header-buttons-activetab-color: #000000; 
--font-for-header-buttons-activetab:#0F0;
--button-hover-background:#3F3;
/* Tabs */
--inactivetab-background:#0a0a0a; /* also background color for progressbar */
--activetab-background:#000000;
/* forms etc */
--form-background:#1d1d1d;
--borders:#0F0;
--box-shadow:rgba(0, 0, 0, 0.1);
/* Progress bar */
--progress-gradient1:rgb(172, 255, 172);
--progress-gradient2:rgb(109, 255, 109);
--progress-gradient3:#0F0;
}

.gray-mode {
/* Default colors */
--background-color: #f4f4f4;
--font-color: #1d1d1d;
/* Main Colors - Header & Buttons & ActiveTab */
--header-buttons-activetab-color: #5b5b5b; /* #38b0ec , #ec6238*/
--font-for-header-buttons-activetab:#ffffff;
--button-hover-background:#919191;
/* Tabs */
--inactivetab-background:#eee; /* also background color for progressbar */
--activetab-background:#fff;
/* forms etc */
--form-background:#ffffff;
--borders:#ddd;
--box-shadow:rgba(0, 0, 0, 0.1);
/* Progress bar */
--progress-gradient1:#a9a9a9;
--progress-gradient2:#7a7a7a;
--progress-gradient3:#5b5b5b;
}

.orange-mode {
    /* Default colors */
    --background-color: #f4f4f4;
    --font-color: #1d1d1d;
    /* Main Colors - Header & Buttons & ActiveTab */
    --header-buttons-activetab-color: #ec6238; /* #38b0ec , #ec6238*/
    --font-for-header-buttons-activetab:#ffffff;
    --button-hover-background:#da8970;
    /* Tabs */
    --inactivetab-background:#eee; /* also background color for progressbar */
    --activetab-background:#fff;
    /* forms etc */
    --form-background:#ffffff;
    --borders:#ddd;
    --box-shadow:rgba(0, 0, 0, 0.1);
    /* Progress bar */
    --progress-gradient1:#eba28c;
    --progress-gradient2:#ee8160;
    --progress-gradient3:#ec6238;
}





body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color); 
    color: var(--font-color);
    text-align: center;



}
.container {
    width: 96%;
    margin: auto;
    overflow: hidden;
    text-align: center;

}
h1{
    font-size: 60px;
}
header {
    background: var(--header-buttons-activetab-color);
    color: var(--font-for-header-buttons-activetab);
    padding-top: 30px;
    min-height: 70px;
    border-bottom: var(--font-color) 1px solid;
    margin-bottom: 2%;
    font-size: 40px;
}
header a {
    color: var(--font-for-header-buttons-activetab);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 30px;
}
header ul {
    padding: 0;
    list-style: none;
    font-size: 30px;
}
header li {
    display: inline;
    margin: 0 20px;
}
header nav {
    float: center;
    margin-top: 10px;
}
header nav ul {
    padding: 0;
    
}
header nav ul li {
    display: block;
    margin: 5px 0;
}
body > header > div > nav > ul > a{
    font-size: 30px;
}
body > header > div > nav > ul > a{
    font-size: 30px;
}
header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}
header a:hover {
    color: var(--font-for-header-buttons-activetab);
    font-weight: bold;
}
.banner {
    padding: 40px 0;
    background: url('banner-image.jpg') no-repeat center center/cover;
    color: var(--font-color);
}
.banner h1 {
    margin: 0;
    font-size: 55px;
}
/* Styling for all forms */
form {
    display: contents;
    background-color: var(--font-for-header-buttons-activetab);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px var(--box-shadow);
    margin-top: 20px;
    text-align: center;
    width: 60%;
    align-items: center;
    align-self: center;
}

/* Styling for input fields */
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
    width: 60%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid var(--borders);
    border-radius: 4px;
    box-sizing: border-box; /* Makes sure padding doesn't affect overall width */
    font-size: 50px;
}
hr{
    border-color: var(--borders);
}

select{
    width: 60%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid var(--borders);
    border-radius: 4px;
    box-sizing: border-box; /* Makes sure padding doesn't affect overall width */
    font-size: 50px;
    background-color: var(--background-color);
    color: var(--font-color);
}

/* Styling for buttons */
button, input[type="submit"], input[type="button"] {
    width: 70%;
    padding: 10px;
    margin: 1%;
    border: none;
    border-radius: 4px;
    border: 1px solid var(--borders);
    /* background-color: #b35079; */ 
    background-color: var(--header-buttons-activetab-color);
    color: var(--font-for-header-buttons-activetab);
    cursor: pointer;
    font-size: 50px;
}
input{
    background-color: var(--background-color);
    color: var(--font-color);
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    /* background-color: #429185; */
    background-color: var(--button-hover-background);;
}



progress {
    width: 100%;
    height: 30px; /* Increased height for better visibility */
    background-color: var(--inactivetab-background);
    border: 0;
    border-radius: 15px;
    /* color: #4caf50;  Used by some browsers */
}

/* Style for the filled part of the progress bar */
progress::-webkit-progress-bar {
    background-color: var(--inactivetab-background);
    border-radius: 15px;
}

progress::-webkit-progress-value {
    background: linear-gradient(to right, var(--progress-gradient1), var(--progress-gradient2), var(--progress-gradient3));
    border-radius: 15px;
    transition: width 0.5s ease;
}

progress::-moz-progress-bar {
    background: linear-gradient(to right, var(--progress-gradient1), var(--progress-gradient2), var(--progress-gradient3));
    border-radius: 15px;
}

#timer {
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
    font-family: Arial, sans-serif;
}

.tabs {
    display: flex;
    background: var(--inactivetab-background);
    height: 100px;
    font-size: 45px;
}
.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}
.tab:hover, .tab.active {
    background-color: var(--header-buttons-activetab-color);
    color:var(--font-color);
}
.tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: 20px;
    background: var(--activetab-background);
    color:var(--font-color);
    
}
.tab-content.active {
    display: block;
    opacity: 1;
    font-size: 40px;
}
.button{
    font-size: 50px;
}