visual-git-guide.css

html{
    background: #FAFAFA;
}

body{
    font-family: sans-serif;
    margin: 0 auto;
    width: 70%;
    padding: 20px 0px;
    background: white;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    color: rgba(0,0,0,0.7);
}

@media handheld, screen and (max-width: 995px){
    body{
        width: 100%;
    }
}

h1, h2, h3{
    color: rgba(0,0,0,0.8);
    margin-left: 20px;
    margin-right: 20px;
}

h1{font-size: 4rem;}
h2{font-size: 2rem;}
h3{font-size: 1.2rem;}

a, a:visited{
    text-decoration: none;
    color: #f05033;
    font-size: 1rem;
}


p, div, ol, ul, pre, strong{
    margin-left: 20px;
    margin-right: 20px;
}

hr{
    color: #212121;
    height: 1px;
    background: #BDBDBD;
}


.dark-mode {
    background: #1e1e1e; /* Dark gray background */
    color: #e0e0e0; /* Lighter text for better contrast */
}

.dark-mode a, .dark-mode a:visited {
    color: #4fa9f6; /* Slightly softer blue for links */
}

.dark-mode h1, .dark-mode h2, .dark-mode h3 {
    color: #ffffff; /* Keeping headers bright for emphasis */
}

.dark-mode hr {
    background: #2c2c2c; /* A slightly lighter gray for horizontal rules */
}

#dark-mode-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 10px;
    background-color: #f05033; /* Button background */
    color: white; /* Button text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


.center {
    text-align: center;
}
#link-to-png, #link-to-svg {
    font-style: italic; display: none;
}
ol ol {
    list-style-type: lower-alpha;
}
#language-box {
    position: absolute;
    top: 2px;
    font-family: sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#language-box ul {
    display: inline;
    list-style: none;
    margin: 0 0 0 -0.5em;
    padding: 0.5em;
    width: 100%;
}
#language-box ul li {
    padding: .2ex 0;
    display: inline;
}
#language-box ul li.selected {
    display: none;
}
@media print {
    #language-box {
        display: none;
    }
    body{
        width: 100%;
    }
}
pre {
  margin-left: 2em;
}