@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i");

/* Set variables */
:root {
    --font-size-1: 2.5rem;
    --font-size-2: 2rem;
    --font-size-3: 1.65rem;
    --font-size-4: 1.5rem;

    --font-size-small: 1.2rem;
    --font-size-xsmall: 1rem;

}

/* Set padding and margin */
html, body{
    padding: 0;
    margin: 0;
    background-color: #fdfdfd;
    height: 100%;
    text-align: justify;
}

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

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

::selection {
    background-color: #1a71ab;
    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;
}

.title{
    font-size: 3rem;
    text-align: left;
}

.outline-text-2 {
    font-size: var(--font-size-4)
}

.outline-text-3 {
    font-size: var(--font-size-small)
}

/* 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-3 > h3{
    margin-bottom: 1vh;
    text-align: left;
}

.figure{
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: block;
    align: center;
    text-align: center;
    justify-content: center;
}

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: block;
}

/* Responsive content positioning */
@media only screen and (min-width: 750px) /* Large screens */
{
    .title{
        padding: 2vh 10vw;
    }

    .outline-2 > h2 {
        margin: 2vh 10vw;
        margin-top: 4vh;
    }

    .outline-3{
        margin: 0vh 10vw;
    }

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

    .org-ul{
        padding: 0vh 2vw;
    }

    #content{
        margin-left: 4rem;
        margin-right: 4rem;
    }
}

@media only screen and (max-width: 750px) /* Small screens */
{
    .title{
        margin: 2vh 5vw;
    }

    .outline-2 > h2{
        margin: 2vh 5vw;
        margin-top: 4vh;
    }

    .outline-3{
        margin: 0vh 5vw;
    }

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

    .org-ul{
        padding: 0vh 4vw;
    }

}

@media only screen and (max-width: 400px) /* Really small screens */
{
    .profile{
        display: none;
    }

    .org-ul{
        padding: 0vh 8vw;
    }
}

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

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

table, blockquote, pre, ol, ul, p{
    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: 1rem;
    background-color: #30114f;
    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;
}

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

.org-org-meta-line{
    color: #1a71ab;
}

.org-keyword{
    color: #1a71ab;
}

a{
    color: #1a71ab;
}

.underline{
    text-decoration: underline;
}

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

.done{
    color: #017d20;
    font-weight: 400;
    text-align: left;
}

/* Postamble */

/* Add a minimum height for the content */
/* to ensure the footer's position is correct */
#content{
    min-height: calc(100vh - 100px);
}

#postamble{
    margin-top: 20px;
    text-align: center;
    background: #1a1024;
    color: #FFF;
    height: 30px;
    width: 100%;
}

#postamble > span{
    display: inline;
    position: relative;
    top: 2.5px;
    font-size: var(--font-size-xsmall)
}

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

/* Custom */
.profile{
    border-radius: 60%;
    max-width: 200px;
    float: left;
    margin-right: 10px;
}