/* DARK MODE SWITCH */

:root {
    /* light theme */
    --fontcolor: #000;
/*    --h1color: rgb(0, 75, 119);
    --icolor: rgb(121, 0, 0);  */
    --h1color: rgb(121, 0, 0);
    --icolor: rgb(0, 75, 116);
    --linkcolor: var(--icolor);
    --languagecolor: var(--h1color);
    --icondark: inline;
    --iconlight: none;
    --background-opacity: 0;
    --background-controls: rgb(213, 211, 201);
    --background-border: rgb(118, 115, 105);
}
  
html[data-theme='dark'] {
    /* dark theme */
    --fontcolor: #eee;
    --h1color: rgb(51, 154, 214);
    --icolor: var(--h1color);
    --linkcolor: var(--h1color);
    --languagecolor: #eee;
    --icondark: none;
    --iconlight: inline;
    --background-opacity: 1;
    --background-controls: rgb(3, 48, 51);
    --background-border: rgb(0, 47, 73);
}


/* ================= */

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 0px;
    margin: 0px;
}

#background-light {
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: -2;
    height: 100%;
/*    background-image: linear-gradient(45deg, rgb(125, 106, 91) 5%, rgb(234, 221, 211) 95%);  */
    background-image: linear-gradient(45deg, rgb(135, 131, 115) 5%, rgb(255, 255, 255) 90%);
}

#background-dark {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg, rgb(0, 0, 0) 25%,rgb(3, 48, 51) 100%);
    opacity: var(--background-opacity);
    transition: opacity 1s;
}

#image-area, #name {
    width: 38%;
    min-width: 480px;
}

#image-area {
    display: block;
    position: fixed;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: lightgray;
}

#image-area-gradient {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 0.6));
    background-size: 100px 100%; 
    background-repeat: no-repeat;
    background-position: right;
}

#name, #menu-button {
    padding: 10px;
}

#name {
    position: fixed;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    height: 80px;
    color: #fff;
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0) 95%);
    z-index: -1;
}

#image-area .button {
    height: 32px;
    width: 32px;
}

#menu-button {
    position: absolute;
    right: 0px;
    width: 32px;
}

#menu-open {
    z-index: 1;
}

#menu-close {
    text-align: right;
    padding: 10px;
    padding-bottom: 50px;
    background-image: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgb(0, 0, 0, 0));
}

#menu {
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: -100%;
    right: 0px;
    height: 100%;
    width: 240px;
    background-color:rgb(0, 0, 0, 0.8);
    transition: top 0.5s, opacity 0.5s;
    transition-timing-function: ease-in-out;
    opacity: 0;
}

#menu:target {
    top: 0px;
    opacity: 1;
}

#menu-items {
    position: absolute;
    top: 25%;
    text-align: right;
    width: 100%;
}

.menu-item {
    display: block;
}

#menu-items a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 2px;
    border-bottom: 1px solid #fff;
    margin: 10px;
    text-align: right;
    font-size: 20px;
    transition: color 1s, border 1s;
}

#menu-items a:hover {
    color: rgb(51, 154, 214);
    border-bottom: 1px solid rgb(51, 154, 214);
}

#content-area {
    padding: 30px;
    padding-top: 15px;
}

@media (min-width: 1263px) {
    #content-area {
       margin-left: 38%;
    }
    #background-light {
        left: 38%;
    }
}

@media (max-width: 1263px) {
    #content-area {
        margin-left: 480px;
     }
     #background-light {
        left: 480px;
    }
}

@media (max-width: 777px) {
    #image-area, #name, #menu {
        width: 100%;
    }
    #image-area {
        display: block;
        position: absolute;
        top: 0px;
        height: 80px;
        min-width: 0px;
    }
    #name {
        position: absolute;
        z-index: 1;
    }
    #menu-button, #menu-close {
        display: none;
    }
    #menu {
        display: block;
        position: absolute;
        box-sizing: border-box;
        top: 0px;
        margin-top: 45px;
        left: 0px;
        height: 35px;
        background-color: rgb(0, 0, 0, 0.5);
        transition: none;
        opacity: 1;
        z-index: 2;
    }
    #menu:target {
        top: 0px;
        opacity: 1;
    }
    #menu-items {
        text-align: left;
        top: 0px;
    }
    .menu-item {
        display: inline;
    }
    #menu-items a {
        font-size: 14px;
        margin: 6px;
        border: none;
    }
    #content-area {
        margin-top: 80px;
        margin-left: 0px;
    }
    #background-light {
        left: 0;
    }
}

#name, h1 {
    font-size: 20px;
}

h1 {
    color: var(--h1color);
}

h2 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 17px;
    line-height: 1.3em;
    color: var(--icolor);
}

i, em, b, strong {
    color: var(--icolor);
}

a {
    color: var(--linkcolor);
}

#language-selection {
    font-size: 17px;
    color: var(--languagecolor);
    text-align: right;
}

#language-selection a {
    text-decoration: none;
    color: var(--languagecolor);
}

#darkmodeswitch {
    position: relative;
    display: inline;
    top: 2px;
    margin-left: 4px;
    cursor: pointer;
    z-index: 3;
}

#icon-dark {
    display: var(--icondark);
}

#icon-light {
    display: var(--iconlight);
}

#content-area p, #content-area ul, #content-area ol, #content-area form, #content-area input, #content-area textarea, .progressbar, .total-progress {
    font-family: 'Times New Roman', Times, serif;
    font-size: 17px;
    line-height: 1.3em;
}


#content-area p, #content-area ul, #content-area ol, #content-area form, #content-area input, #content-area textarea {
    color: var(--fontcolor);
}

#content-area input, #content-area textarea {
    padding: 4px;
    font-size: 15px;
}

#content-area .button {
    padding: 8px;
}

li {
    padding-bottom: 9px;
}

input, textarea {
    background-color: var(--background-controls);
    border-width: 3px;
    border-style: solid;
    border-color: var(--background-border);
}

#content-area h1, #content-area h2, #content-area p, #content-area p i, #content-area p em, #content-area p b, #content-area p strong, #content-area ul,
#content-area ol, #content-area form, #content-area input, #content-area textarea, #language-selection, #language-selection a, a, .total-progress {
    transition: color 1s;
}

.progressbar {
    border-radius: 1em;
    border: 0;
    color: #fff;
}
.progressbar, .total-progress {
    width: 400px;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.total-progress {
    color: var(--fontcolor);
}