html, body {
    font-family: "Irish Grover", system-ui;
    font-weight: 500;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.theme-font {
    font-family: "Irish Grover", system-ui;
}

p, li {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#header {
    height: 50px;
    background-color: #333;
    color: hsl(0, 0%, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    display: flex; 
    flex-direction: row;
    justify-content: space-around; /* space between but margins on the right and left? */
    align-items: center; /* change to baseline but make margins and paddings of other divs 0? */
}

#header h1{
    margin: 0;
    color: #f5f5f5;
}

.light-mode #header h1{
    color: rgb(40, 40, 40);
}

#weather-div{
    display: flex;
    justify-content: center;
    align-items: center;
}
#weather-div p{
    font-size: 0.8em;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* dark/green mode */
#dark {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Lisää tämä, jos haluat täyttää vanhemman elementin korkeuden */
}
#darkLabel {
    width: 60px; /* 20% larger than 50px */
    height: 24px; /* 20% larger than 20px */
    position: relative;
    display: block;
    background-color: #ebebeb;
    border-radius: 24px; /* Matches height */
    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.4), inset 0px -1px 3px rgba(255,255,255,0.4);
    cursor: pointer;
}

#darkLabel:after {
    content: "";
    width: 22px; /* 20% larger than 18px */
    height: 22px; /* 20% larger than 18px */
    position: absolute;
    top: 1px;
    left: 1px;
    background: linear-gradient(180deg, #097000, #025a0d);
    border-radius: 22px; /* Matches new width and height */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

#darkmode-toggle {
    width: 0;
    height: 0;
    visibility: hidden;
}

#darkmode-toggle:checked + #darkLabel {
    background: #242424;
}

#darkmode-toggle:checked + #darkLabel:after {
    left: 59px; /* 20% larger than 49px */
    transform: translateX(-100%);
    background: linear-gradient(180deg, #777, #3a3a3a);
}

#darkLabel, #darkLabel:after {
    transition: 0.3s;
}

#darkLabel:active:after {
    width: 31px; /* 20% larger than 26px */
}

.light-mode {
    background-color: #fafafa;
    color: black;
}
.light-mode #header {
    background-color: #fafafa;
    color: black;
}

.light-mode #navbar {
    background-color: #fafafa;
}

.light-mode #navbar .nav-item {
    color: black;
}

.light-mode #navbar .nav-item:hover {
    background-color: #58a155;
    color: #fafafa;
}


/* SVG */
label img {
    position: absolute;
    width: 14px; /* 20% larger than 12px */
    top: 5px; /* Adjusted to fit the new size */
    z-index: 100;
}
label img#light-svg {
    left: 5px; /* Adjusted to fit the new size */
    top: 5px; /* Adjusted to fit the new size */
    fill: #ddd;
    transition: 0.3s;
}
label img#dark-svg {
    left: 41px; /* Adjusted to fit the new size */
    fill: black;
    transition: 0.3s;
}
/* dark/green mode end */

#map {
    flex: 1;
    height: 100%;
}

#navbar {
    height: 50px;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
}

#navbar .nav-item {
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Setting the divs inside the nav-item in the middle */
#navbar .nav-item div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

  
#navbar .nav-item:hover {
    background-color: #ddd;
    color: black;
    cursor: pointer;
}

#navbar .nav-item#fullscreen {
    background-color: #037048 ; /*#04AA6D*/
    color: white;
    transition: 0.3s;
}
.light-mode #navbar .nav-item#fullscreen {
    background-color: #58a155;
}

#navbar .nav-item#fullscreen:hover {
    background-color: #033b26 ; /* #034d31  */
    color: black;
}
.light-mode #navbar .nav-item#fullscreen:hover {
    background-color: #417440;
}

#navbar .nav-item:hover {
    background-color: #ddd;
    color: black;
    cursor: pointer;
}