:root
{
    --theme_color: #E6EFF4;

    --primary_color: white;
    --primary_color_selected: rgb(155, 153, 153);

    --secondary_color: #1A4959;
    --secondary_color_selected: rgba(0, 123, 255, 0.1);

    --logo_color: hue-rotate(0);

    --border_color: #1A4959;
    --primary_icon_color: brightness(0);
    --secondary_icon_color: brightness(0) invert(1);
    --special_icon_color: invert(98%) sepia(15%) saturate(679%) hue-rotate(171deg) brightness(97%) contrast(96%);

    --primary_text_color: #1A4959;
    --secondary_text_color: white;
    --text_standout: #b3b300;

    --input_color: white;
    --input_color_selected: rgb(208, 211, 170);
    --input_text_color: rgb(46, 44, 44);
    --input_text_color_selected: black;
    --text_label: white;

    --link_color: rgb(100, 99, 99);
    --link_color_selected: rgb(53, 78, 29);
}

.dark-theme
{
    --theme_color: #132c18;

    --primary_color: #132c18;
    --primary_color_selected: rgb(155, 153, 153);

    --secondary_color: #76A696;
    --secondary_color_selected: #a2c5b9;

    --logo_color: hue-rotate(35deg) invert(1);

    --border_color: white;
    --primary_icon_color: brightness(0) saturate(100%) invert(67%) sepia(20%) saturate(600%) hue-rotate(10deg);
    --secondary_icon_color: brightness(0) saturate(100%) invert(67%) sepia(20%) saturate(600%) hue-rotate(10deg);
    --special_icon_color: brightness(0);

    --primary_text_color: white;
    --secondary_text_color: black;
    --text_standout: #b3b300;

    --input_color: white;
    --input_color_selected: rgb(208, 211, 170);
    --input_text_color: rgb(46, 44, 44);
    --input_text_color_selected: black;
    --text_label: white;

    --link_color: rgb(100, 99, 99);
    --link_color_selected: rgb(74, 136, 16);
}

/* BASE HTML ELEMENTS */

html{
    font-family: sans-serif;
}

nav
{
    background-color: var(--secondary_color);
}

body
{
    background-color: var(--primary_color);
}

#title
{
    color: var(--secondary_text_color);
    font-weight: bold;
}

#dateTime
{
    color: var(--secondary_text_color);
    font-weight: bold;
}

.language-toggle-btn
{
    color: var(--secondary_text_color);
    background-color: transparent;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.language-toggle-btn:hover
{
    background-color: var(--secondary_color_selected);
    transition: background-color 0.3s ease;
}

#theme-toggle
{
    background: none;
    border: none;
    cursor: pointer;
}

#theme-icon
{
    filter: var(--secondary_icon_color);
}

#login_button
{
    background-color: var(--secondary_color);
    color: var(--secondary_text_color);
    text-decoration: none;
    cursor: pointer;
    border-radius: 7px;
}

#login_button:hover
{
    background-color: var(--secondary_color_selected);
    color: var(--link_color_selected);
    transition: background-color 0.3s ease;
}

.loginIcon
{
    filter: var(--special_icon_color);
}

/* WEATHER STATION PANELS */


.coordinates
{
    font-family: 'Courier New', monospace;
}

.timestamp
{
    font-family: 'Courier New', monospace;
}

.main_box
{
    background: var(--primary_color);
}

.station1,
.station2,
.station3,
.station4,
.station5,
.station6
{
    background: var(--theme_color);
    color: var(--primary_text_color);
    border: 1px solid var(--border_color);
    font-weight: bold;
    border-radius: 25px;
}

#station_weatherInfo1,
#station_weatherInfo2,
#station_weatherInfo3,
#station_weatherInfo4,
#station_weatherInfo5,
#station_weatherInfo6
{
    background: var(--theme_color);
    color: var(--primary_text_color);
    font-weight: bold;
    border-radius: 5px;
}


.station_panel1,
.station_panel2,
.station_panel3,
.station_panel4,
.station_panel5,
.station_panel6
{
    background: var(--theme_color);
    color: var(--primary_text_color);
    font-weight: bold;
    border-radius: 5px;
}

.wind_panel
{
    background: var(--theme_color);
    color: var(--primary_text_color);
    font-weight: bold;
    border-radius: 5px;
}

.icon-wrapper
{
    filter: hue-rotate(180deg) brightness(120%);
}

#station_weatherData1,
#station_weatherData2,
#station_weatherData3,
#station_weatherData4,
#station_weatherData5,
#station_weatherData6
{
    background: var(--theme_color);
    color: var(--primary_text_color);
    font-weight: bold;
    border-radius: 5px;
}

.temp
{
    color: var(--primary_text_color);
}

.temp img
{
    filter: var(--primary_icon_color);
}
.seatemp
{
    color: var(--primary_text_color);
}

.seatemp img
{
    filter: var(--primary_icon_color);
}

.humidity
{
    color: var(--primary_text_color);
}

.humidity img
{
    filter: var(--primary_icon_color);
}

.pressure
{
    color: var(--primary_text_color);
}

.pressure img
{
    filter: var(--primary_icon_color);
}

#wind_icon
{
    filter: var(--primary_icon_color);
}

.speed
{
    color: var(--primary_text_color);
}

.speed img
{
    filter: var(--primary_icon_color);
}

.gust
{
    color: var(--primary_text_color);
}

.gust img
{
    filter: var(--primary_icon_color);
}

#wind_weatherData1,
#wind_weatherData2,
#wind_weatherData3,
#wind_weatherData4,
#wind_weatherData5,
#wind_weatherData6
{
    background: var(--theme_color);
    color: var(--primary_text_color);
    font-weight: bold;
    border-radius: 5px;
}