/*#region Theme Toggle*/
#theme-toggle {
    position: absolute;
    left: 0;
    margin: 1.75em 1.5em 1.5em 1.5em;
    z-index: 2;
    border-radius: 0;
    padding: 0.5em;
    background: none;
    border-radius: 5pt 5pt 10pt 5pt;
    border: 2px solid #888;
    width: 3em;
    height: 3em;
    font-size: 0.85rem;
}


#theme-toggle i {
    display: block;
    font-size: 1.25rem;
}

#theme-toggle #theme-toggle-dark {
    display: none;
}


@media screen and (max-width: 1000px) {
    #theme-toggle {
        width: 2.4em;
        height: 2.4em;
    }

    #theme-toggle i {
        display: block;
        font-size: 0.9rem;
    }          
}
/*#endregion Theme Toggle*/

/*#region Common Color Theme*/
body, 
#header, 
#footer, 
body #nav ul li a,
.project-card-body, 
.project-card-body h1 {
    -moz-transition: color 0.5s ease-in-out, border-bottom-color 0.5s ease-in-out, background-color 0.5s ease-in-out, -moz-transform 0.5s ease;
    -webkit-transition: color 0.5s ease-in-out, border-bottom-color 0.5s ease-in-out, background-color 0.5s ease-in-out, -webkit-transform 0.5s ease;
    -ms-transition: color 0.5s ease-in-out, border-bottom-color 035s ease-in-out, background-color 0.5s ease-in-out, -ms-transform 0.5s ease;
    transition: color 0.5s ease-in-out, border-bottom-color 0.5s ease-in-out, background-color 0.5s ease-in-out, transform 0.5s ease;
}

body.is-preload, 
body.is-preload #header, 
body.is-preload #footer, 
body.is-preload #nav ul li a,
body.is-preload .project-card-body,
body.is-preload .project-card-body h1 {
    -moz-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
    transition: none;
}
/*#endregion Common Color Theme*/

/*#region Light Color Theme*/
body:not(.dark-theme) #theme-toggle {
    border-color: #333;
}

body:not(.dark-theme) #theme-toggle i {
    color: #333
}

body:not(.dark-theme) {
    background: #fff;
    color: #333;
}

body:not(.dark-theme) #header {
    background: #febf92;
    color: #333;
}

body:not(.dark-theme) b,
body:not(.dark-theme) strong,
body:not(.dark-theme) i,
body:not(.dark-theme) em {
    color: #111;
}

body:not(.dark-theme) #logo p {
    color: #111;
}

body:not(.dark-theme).dark-theme #main > section {
    background-color: #23272a;
    color: #333;
}

body:not(.dark-theme) #footer {
    background: #febf92;
    color: #333;
}

#header .icons li a {
    color: #111111cc;
} 

h1, h2, h3, h4, h5, h6 {
     color: #111;
}

body:not(.dark-theme) a, body:not(.dark-theme) #nav ul li a {
    color: #6e3497;
    border-bottom-color: #6e3497;
}

body:not(.dark-theme) a:hover, body:not(.dark-theme) #nav ul li a:hover {
    color: #a54ee3 !important;
    border-bottom-color: #a54ee3 !important;
}

body:not(.dark-theme) strong {
    color: #111;
}

body:not(.dark-theme) .features article .title {
    border-bottom-color: #8c8c8c;
}

body:not(.dark-theme) .publication .pub-overview em {
    color: #111;
    text-decoration: underline;
}

body:not(.dark-theme) .pub-interactable a {
    border: #6e3497 solid 1px !important;
}

body:not(.dark-theme) .pub-interactable a:hover {
    border: #a54ee3 solid 1px !important;
}

body:not(.dark-theme) .pub-interactable button {
    color: #6e3497 !important;
    background: none !important;
    border: #6e3497 solid 1px !important;
}

body:not(.dark-theme) .pub-interactable button:hover {
    color: #a54ee3 !important;
    background: none !important;
    border: #a54ee3 solid 1px !important;
}

body:not(.dark-theme) .folding.note.open {
    border-color: #111;
}

body:not(.dark-theme) .project-card-body {
    background-color: #febf92;
}

body:not(.dark-theme) .project-card-body h1 {
     color: #6e3497;
}

body:not(.dark-theme) .project-card-body:hover h1 {
     color: #a54ee3;
}

body:not(.dark-theme) .card-body {
     color: #333;
}

body:not(.dark-theme) .highlight-box {
    background-color: #febf92;
    border-color: #111;
}
/*#endregion Color Theme Adjustment*/

/*#region Dark Color Theme*/
body.dark-theme #theme-toggle {
    border-color: #888;
}

body.dark-theme #theme-toggle i {
    color: #d6d6d6
}

body.dark-theme {
    background: #252525;
    color: #d6d6d6;
}

body.dark-theme #header {
    background: #110b1f;
    color: #fff;
}

body.dark-theme #main > section {
    background-color: #23272a;
    color: #d6d6d6;
}

body.dark-theme #footer {
    background: #110b1f;
    color: #fff;
}

body.dark-theme #logo p {
    color: #fff;
}

body.dark-theme #header .icons li a {
    color: #ffffffcc;
} 

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
     color: #ffffff;
}

body.dark-theme a, body.dark-theme #nav ul li a {
    color: #eb773d;
    border-bottom-color: #eb773d;
}

body.dark-theme a:hover, body.dark-theme #nav ul li a:hover {
    color: #ff9a42 !important;
    border-bottom-color: #ff9a42 !important;
}

body.dark-theme b,
body.dark-theme strong,
body.dark-theme i,
body.dark-theme em {
    color: #ffffff;
}

body.dark-theme .features article .title {
    border-bottom-color: #f4f4f4;
}

body.dark-theme .publication .pub-overview em {
    color: #fff;
    text-decoration: underline;
}

body.dark-theme .pub-interactable a {
     border: #eb773d solid 1px !important;
}

body.dark-theme .pub-interactable a:hover {
     border: #ff9a42 solid 1px !important;
}

body.dark-theme .pub-interactable button {
    color: #eb773d !important;
    background: none !important;
    border: #eb773d solid 1px !important;
}

body.dark-theme .pub-interactable button:hover {
    color: #ff9a42 !important;
    background: none !important;
    border: #ff9a42 solid 1px !important;
}

body.dark-theme .folding.note.open {
    border-color: #fff;
}

body.dark-theme .project-card-body {
    background-color: #110b1f;
}

body.dark-theme .project-card-body h1 {
     color: #eb773d;
}

body.dark-theme .project-card-body:hover h1 {
     color: #ff9a42;
}

body.dark-theme .card-body {
     color: #d6d6d6;
}

body.dark-theme .highlight-box {
    background-color: #110b1f;
    border-color: #fff;
}
/*#endregion Color Theme Adjustment*/