@font-face {
    font-family: 'Open Sans';
    src: url('../3rdparty/fonts/OpenSans/OpenSans-Regular.ttf');
}

@font-face {
    font-family: 'Source Code Pro';
    src: url('../3rdparty/fonts/SourceCodePro/SourceCodePro-Regular.ttf');
}

* {
    margin: 1px;
}

body {
    font-family: 'Open Sans';
    margin-top: 20px;
}

h1 {
    font-size: 2.5em;
    margin: 4px;
    line-height: 50px;
    padding: 20px 0 20px 0;
}

h2 {
    font-size: 1.75em;
    margin: 1px;
    padding: 15px 0 15px 0;
}

h3 {
    font-size: 1.5em;
    margin: 1px;
    padding: 10px 0 10px 0;
}

h4 {
    font-size: 1.3em;
    margin: 1px;
}

h5 {
    font-size: 1.2em;
    margin: 1px;
}

main {
    width: 90%;
    margin: auto;
    position: relative;
}

footer {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 90%;
}

#title {
    padding-bottom: 10px;
    margin: auto;
}

ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 20px;
}

p, li {
    line-height: 24px;
    margin: auto;
}

@media (max-width: 700px) {
    body {
        font-size: 1.3em;
    }
}

pre code {
    display: block;
    margin: 8px 0 8px 0;
    padding: 20px;
    font-family: 'Source Code Pro';
}

footer .small {
    font-size: small;
}

body {
    color: #000;
    background-color: #fff;
}

a {
    color: #00f;
}

pre code {
    background-color: #ddd;
}

.sub-header {
    color: #aaa;
}

footer {
    color: #aaa;
}

footer a {
    color: #aaa;
}

footer a:hover {
    color: #444;
}

.dark-mode-toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

.dark-mode-switch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 2em;
    margin: auto;
}

.dark-mode-switch-container {
    position: absolute;
    display: block;
    margin: auto;
    margin-top: 24px;
    padding: 0.25em 0 0.25em 0;
    right: 0;
}

.dark-mode-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2em;
}

.dark-mode-slider:before {
    position: absolute;
    content: "";
    height: 1.5em;
    width: 24px;
    left: 4px;
    bottom: 0.25em;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.dark-mode-slider {
    background-color: #171717;
}

.dark-mode-slider:before {
    background-color: white;
}

input:checked + .dark-mode-slider {
    background-color: white;
}

input:checked + .dark-mode-slider:before {
    background-color: #171717;
}

input:checked + .dark-mode-slider:before {
    -webkit-transform: translateX(32px);
    -ms-transform: translateX(32px);
    transform: translateX(32px);
}

body:has(.dark-mode-toggle:checked) {
    color: #ccc;
    background-color: #171717;
}

body:has(.dark-mode-toggle:checked) a {
    color: #0055bb;
}

body:has(.dark-mode-toggle:checked) a:hover {
    color: #0088cc;
}

body:has(.dark-mode-toggle:checked) pre code {
    background-color: #ddd;
}

body:has(.dark-mode-toggle:checked) .sub-header {
    color: #777;
}

body:has(.dark-mode-toggle:checked) footer {
    color: #777;
}

body:has(.dark-mode-toggle:checked) footer a {
    color: #777;
}

body:has(.dark-mode-toggle:checked) footer a:hover {
    color: #bbb;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background-color: #171717;
    }
    
    a {
        color: #0055bb;
    }
    
    a:hover {
        color: #0088cc;
    }
    
    pre code {
        background-color: #ddd;
    }
    
    .sub-header {
        color: #777;
    }
    
    footer {
        color: #777;
    }
    
    footer a {
        color: #777;
    }
    
    footer a:hover {
        color: #bbb;
    }

    .dark-mode-slider {
        background-color: white;
    }
    
    .dark-mode-slider:before {
        background-color: #171717;
    }
    
    input:checked + .dark-mode-slider {
        background-color: #171717;
    }
    
    input:checked + .dark-mode-slider:before {
        background-color: white;
    }

    body:has(.dark-mode-toggle:checked) {
        color: #000;
        background-color: #fff;
    }
    
    body:has(.dark-mode-toggle:checked) a {
        color: #00f;
    }
    
    body:has(.dark-mode-toggle:checked) pre code {
        background-color: #ddd;
    }
    
    body:has(.dark-mode-toggle:checked) .sub-header {
        color: #aaa;
    }
    
    body:has(.dark-mode-toggle:checked) footer {
        color: #aaa;
    }
    
    body:has(.dark-mode-toggle:checked) footer a {
        color: #aaa;
    }
    
    body:has(.dark-mode-toggle:checked) footer a:hover {
        color: #444;
    }

    .dark-mode-slider:before {
        left: auto;
        right: 4px;
    }

    input:checked + .dark-mode-slider:before {
        -webkit-transform: translateX(-32px);
        -ms-transform: translateX(-32px);
        transform: translateX(-32px);
    }
}