/* Set variables */:root {
    --font-size-1: 2rem;
    --font-size-2: 1.5rem;
    --font-size-3: 1.15rem;
    --font-size-4: 1rem;
    --font-size-small: 0.8rem;
    --font-size-xsmall: 0.6rem;
}

/* Set padding and margin */html, body{
    padding: 0;    margin: 0;    background-color: #fdfdfd;
}

/* Header margin */h2{
    margin-top: 2rem; margin-bottom: 1.5rem;
}

h3{
    margin-top: 1rem; margin-bottom: 1rem;
}

h4{
    margin-top: 1rem; margin-bottom: 1rem;
}

/* ------------------------- */::selection {
    background-color: purple;    color: white;
}

html, body{
    font-family: "Source Sans Pro", 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-3);
}

h5{
    font-size: var(--font-size-3);
}

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: 100%;
}

/* Code */pre{
    margin: 1rem;    background-color: #EEE;    padding: 0.5rem;    border-radius: 0.2rem;    font-size: var(--font-size-small) !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 purple;    padding-left: 1rem;		font-style: italic;
}

p, pre, ol, ul, table, code{
    color: #1A1A1A;
}

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

h1, h2, h3, h4, h5, h6{
    color: #0A0A0A;
}

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

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

/* Stripe table */tr:nth-child(even) {
    background-color: #EEE;
}

.title{
    padding: 2vh 5vw;
}

pre{
    font-family: "Courier New", monospace;    font-size: var(--font-size-4)
}

.org-org-meta-line{
    color: purple;
}

.org-keyword{
    color: purple;
}

a{
    color: purple;
}

.underline{
    text-decoration: underline;
}

.todo{
    color: #7D161A;		font-weight: 400;
}

.done{
    color: purple;		font-weight: 400;
}

/* Postamble */#postamble{
    text-align: center;    width: 100%;
}

#postamble > p{
    display: inline;    font-size: var(--font-size-4)
}

.outline-text-2, .outline-text-3, .outline-text-4{
	max-width: 100%;
	overflow-x: auto;
}