:root {
/* Light mode */

    --light-text: #222430;
    --light-visited-hover: #1F1B24;
    --light-theme: #d34a97;
    --light-menu-bg-color: wheat;
    --light-background-image: linear-gradient(to right, hsla(39, 77%, 83%, 1), 
    hsla(360, 100%, 100%, 1), 
    hsla(39, 77%, 83%, 1));
    --light-ots-color: #222430;
    --light-th-color: #222430;


/* Dark mode */

    --dark-text: #727272;
    --dark-visited-hover: #E9C893;
    --dark-theme: #BB86FC;
    --dark-menu-bg-color: black;
    --dark-background-image: linear-gradient(to right, #000000 0%, #121212 25%, #1D1D1D 50%, #121212 75%, #000000 100%);
    --dark-ots-color: #121212;
    --dark-th-color: #727272;
    
/* Default mode */

    --text-color: var(--dark-text);
    --visited-hover: var(--dark-visited-hover);
    --theme-color: var(--dark-theme);
    --menu-bg-color: var(--dark-menu-bg-color);
    --background-image: var(--dark-background-image);
    --story-bg-image: var(--dark-story-bg-image);
    --ots-color: var(--dark-ots-color);
    --th-color: var(--dark-th-color);    
}

/* Switched mode */
.theme-switch:checked ~ #page {

    --text-color: var(--light-text);
    --visited-hover: var(--light-visited-hover);
    --theme-color: var(--light-theme);
    --menu-bg-color: var(--light-menu-bg-color);
    --background-image: var(--light-background-image);
    --story-bg-image: var(--light-story-bg-image);
    --ots-color: var(--light-ots-color);
    --th-color: var(--light-th-color);   

}

/* Styling */
#menu,
#menu ul,
#menu ul li
#menu ul li a {
    background-color: var(--menu-bg-color);
    color: var(--theme-color);
    transition: background-color 0.0s;
}

.otsikkoteksti,
.otsikkoteksti_sivun_ylaosa {
    color: var(--ots-color);
    transition: color 0.2s;
}

#page {
    background-image: var(--background-image);
    color: var(--text-color);
    transition: color .2s, background-image .2s;
    min-height: 100vh; /* Tämä tekee sen, että koko sivun taustakuva - mukaanlukien etusivun "tyhjä" tila muuttuu samaksi taustaksi! Ilman tätä alle näytön korkuisen sivun taustaväri olisi se, mikä määritellään style_dark.css:n body -osiossa! HUOM! Sitä ei ole pakko määritellä!!! */
}
a {
    color: var(--theme-color);
}

a:hover, a:visited:hover {
    color: var(--visited-hover);
}

th {
    color: var(--th-color);
}


/* Theme switcher */
.theme-switch {
    /* Hides the checkbox */
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.switch-label {
    cursor: pointer;
    padding: 20px 0px 0px 20px;
    font-weight: bolder;
    display: flex;
    font-size: 24px;
}

.switch-label:hover {
    color: #E9C893;
    text-decoration: none;
    transition: 0.2s;
}



.theme-switch:focus ~ #page .switch-label::before,
.switch-label:hover::before {
    text-shadow: 0 0 15px var(--switch-shadow-color);
}

.theme-switch:focus ~ #page .switch-label::after,
.switch-label:hover::after {
    opacity: 1;
}

/* Karsitut jutut 
:root {
    --light-switch-shadow: pink;
    --light-switch-icon: ;
    --light-switch-text: "";


    --dark-switch-shadow: #fce477;
    --dark-switch-icon: "";
    --dark-switch-text: "";
    

    --switch-shadow-color: var(--dark-switch-shadow);
    --switch-icon: var(--dark-switch-icon);
    --switch-text: var(--dark-switch-text);
;
}


.theme-switch:checked ~ #page {
    --switch-shadow-color: var(--light-switch-shadow);
    --switch-icon: var(--light-switch-icon);
    --switch-text: var(--light-switch-text);

}
*/

/*
.switch-label::before {
    content: var(--switch-icon);
    font-size: 40px;
    transition: text-shadow .2s;
}
 
.switch-label::after {
    align-self: center;
    content: var(--switch-text);
    color: var(--switch-shadow-color);
    font-size: 28px;
    line-height: 40px;
    opacity: 0;
    padding: 0px 0px 0px 0px;
    transition: opacity .2s;
}
*/