:root {
    --color-brown: #7a4b38;
    --color-red: #e83b30;
    --color-orange: #f16d20;
    --color-yellow: #f0a600;
    --color-light-green: #67ae40;
    --color-dark-green: #1b7e4e;
    --color-cyan: #30bcd1;
    --color-blue: #424dec;
    --color-purple: #a161cb;
    --color-pink: #f78d90;

    --color-latex-red: #e00030;
    --color-latex-green: #28ae7b;
    --color-latex-blue: #6595ed;
    --color-latex-orange: #ffa502;
    --color-latex-violet: #9d39be;
    --color-latex-gray: #808080;
    --color-latex-pink: #ff00af;
}
.brown      { color: var(--color-brown); }
.red        { color: var(--color-red); }
.orange     { color: var(--color-orange); }
.yellow     { color: var(--color-yellow); }
.lightGreen { color: var(--color-light-green); }
.darkGreen  { color: var(--color-dark-green); }
.cyan       { color: var(--color-cyan); }
.blue       { color: var(--color-blue); }
.purple     { color: var(--color-purple); }
.pink       { color: var(--color-pink); }

.latexRed    { color: var(--color-latex-red); }
.latexGreen  { color: var(--color-latex-green); }
.latexBlue   { color: var(--color-latex-blue); }
.latexOrange { color: var(--color-latex-orange); }
.latexViolet { color: var(--color-latex-violet); }
.latexGray   { color: var(--color-latex-gray); }
.latexPink   { color: var(--color-latex-pink); }


html { scroll-behavior: auto; }

body, p {
    background: #222;
    color: #ddd;
    font-family: Roboto Slab, Arial;
}

.mono { font-family: Roboto Mono, 'Courier New', Courier, monospace;}
b, .bold { font-weight: 700; }

h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0.3em 0; font-weight: 700; }

h1 {
    color: var(--color-yellow);
    font-size: 36px;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 20px;
}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 16px;
}

section {
    padding-left: 10px;
    border-left: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 50px;
}

a { color: var(--color-cyan) ;}
a:hover { color: var(--color-yellow) ;}
a:visited { color: var(--color-purple) ;}

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid #444;
}
.noBorders,
.noBorders th,
.noBorders td {
    border: none;
}

.flexRow,
.flexCol {
    display: flex;
    flex-wrap: wrap;
}
.flexRow { flex-direction: row; }
.flexCol { flex-direction: column; }
.flexCentered { align-items: center;}

.code {
    font-family: Roboto Mono, Courier New;
    font-weight: 300;
    text-align: left;
    padding: 0px 10px;
    border-radius: 5px;
    background-color: #111;
}
.code   { color: wheat; }
.code b { color: tomato; font-weight: 800; }
.code i { color: seagreen; font-weight: 800; font-style: normal;}
.code u { color: darkslategrey; font-style: normal; text-decoration: none;}

.memoCard {
    padding: 20px;
    border: 1px solid #444;
    border-radius: 10px;
}