/* Lato font */
@font-face {
 font-family: "Lato";
 src: url(Lato-Regular.ttf);
}

/* Set variables */
:root {
    --font-size-1: 2rem;
    --font-size-2: 1.8rem;
    --font-size-3: 1.6rem;
    --font-size-4: 1.4rem; 
    --font-size-6: 1.2rem; 
    --font-size-6: 1.0rem; 
    --font-size-small: 0.8rem;
    --font-size-xsmall: 0.6rem;
}

/* Set padding and margin */

html, body{
    font-size: 1.2rem;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px;
    margin-right: 50px;
    background-color: #000000;
    foreground-color: #FAFAFA;
}

/* Header margin */
h1{margin-top: 1rem; margin-bottom: 1rem;}
h2{margin-top: 1rem; margin-bottom: 1rem;}
h3{margin-top: 1rem; margin-bottom: 1rem;}
h4{margin-top: 1rem; margin-bottom: 1rem;}

/* ------------------------- */

::selection {
    background-color: steelblue;
    color: white;
}

html, body{
    font-family: "Lato", Helvetica, sans-serif;
    font-weight: 300;
}

h1{font-size: var(--font-size-1);}
h2{font-size: var(--font-size-2);}
h3{font-size: var(--font-size-3);}
h4{font-size: var(--font-size-4);}
h5{font-size: var(--font-size-6);}

h1 > .subtitle{
    font-size: var(--font-size-3);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  letter-spacing: -0.03em;
}

.outline-2 > h2, #table-of-contents > h2{
    text-align: center;
}

/* Table of contents */
#table-of-contents ul{
    list-style-type:none;
    margin: 0;
}

#table-of-contents .tag{
    display: none;
}

.outline-3{
    border-bottom: 1px solid #CCC;
}

.outline-2 > h2{
    grid-row-start: 1;
    grid-row-end: 2;
}

.outline-2{
    grid-row-start: 2;
    grid-row-end: 3;
}

img{
    max-width: 90%;
}

/* Code */
pre{
    margin: 1rem;
    background-color: #111;
    padding: 0.5rem;
    border-radius: 0.2rem;
    font-size: var(--font-size-6) !important;
}

.outline-3{
    display: grid;
    grid-template-columns: 40fr 60fr;
}

/* Responsive content positioning */
@media only screen and (min-width: 750px) /* Large screens */
{
    .outline-3{
        margin: 0vh 10vw;
    }

    .outline-text-2, #table-of-contents{
        padding: 0vh 10vw;
    }

}

@media only screen and (max-width: 750px) /* Small screens */
{
    .outline-3{
        margin: 0vh 5vw;
        display: block;
    }

    .outline-text-2, #table-of-contents{
        padding: 0vh 5vw;
    }
}

blockquote{
    border-left: 0.2rem solid steelblue;
    padding-left: 1rem;
    font-style: italic;
}

p, pre, ol, ul, table{
    color: #F1F1F1;
}

p code:not(.sourceCode), li code:not(.sourceCode), td code:not(.sourceCode) {
    color: #ddd;
    background-color: #444;
    padding: .2em;
}

p sourceCode {
    color: #ddd;
    background-color: #f00;
}

table, blockquote, pre, ol, ul, p, #postamble{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h1{
    color: #FAFAFA;
    text-align: left;
}

h2, h3, h4, h5, h6{
    color: #FAFAFA;
    text-align: left;
    background-color: #222;
}

.tag{
    margin-top: 0.5rem;
    display: block;
    color: black;
    font-size: var(--font-size-xsmall);
}

.tag > span{
  font-weight: 400;
  font-size: 0.6rem;
  background-color: steelblue;
  text-transform: uppercase;
  border-radius: 2px;
  width: fit-content;
  height: auto;
  padding: 1px 5px;
  margin: 1px;
}

/* Stripe table */
tr:nth-child(even) {
  background-color: #222;
  --bs-table-accent-bg: #000000d1;
}

.title{
   padding: 2vh 2vw;
   text-align: center;
}

pre{
	font-family: "Courier New", monospace;
    font-size: var(--font-size-4)
    max-width: 100%;
    overflow-x: auto;
}

a{
    color: steelblue;
}

.underline{
    text-decoration: underline;
}