:root {
    --blog-color: #8C6CBB;/* used as a background (prev: #7B639A) */
    --dark: #251C33;/* used as a text color (prev: #270B4D) */
    --purple: #945FE5;/* used as a border color (prev: #381960) */
    --blog-color-light: #7A6B91;/* used as a background (prev: #614687) */
    --white: #5F5B66;/* used as a background (prev: #7B639A) */
    --blog-font: 1.2em "Fira Sans", sans-serif;
    --code-font: 1.2em "Fira Sans", sans-serif;
}

body {
    background-color: var(--blog-color-light);
    display: grid;
    grid-template-columns: auto auto auto;
}

.nav {
    grid-column: 1 / span 3;
}

main {
    grid-column: 2 / span 1;
	padding: 20px 50px 50px;
	background-color: var(--blog-color);
	color: var(--dark);
	text-align:left;
	justify-items:left;
	max-width:800px;
}

h1, h2, h3{
	border:none;
	font-weight:bold;
	margin:20px auto 20px 0;
}

hr {
	margin:15px 0;
	width:100%;
	border: 2px solid var(--purple);
  	border-radius: 5px;
}

p {
    margin: 0.5rem auto 0.5rem 0;
    font-family: var(--blog-font);
    
}
main a {
    color: black;
    text-decoration: none;
}
ul {
    line-height: 0.5;
    font-family: var(--blog-font);
    list-style-position: inside;
}

.table-of-contents{
	background-color:var(--white);
	padding:10px 2em;
	margin:2em;
	outline: 5px solid var(--purple);
	border-radius:20px;
}

ul li {
    line-height: 1.0;
    margin: 1.5rem 0;
}
ol {
    list-style-position: outside;
    padding-left: 1.5rem;           
    overflow-wrap: break-word;      
    word-wrap: break-word;
    margin-left:0;
}

ol li {
    line-height: 1.5;
    margin: 0.5rem auto 0 0;
    padding-left: 0; 
}


.blog-image {
    margin: 10px auto;
}

.blog-image img{
    max-width: min(700px, 90vw);
}
.blog-image img.small{
	max-height:250px;
}
.code-line {
    background-color: var(--blog-color-light);
    border: 1px solid var(--dark);
    font-family: var(--code-font);
    color: var(--dark);
    padding: 1px 2px;
    white-space: normal;
    word-wrap: break-word;
}

.code-block {
    background-color: var(--blog-color-light);
    color: var(--dark);
    padding: 1rem;
    border-radius: 5px;
    font-family: var(--code-font);
    font-size: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid var(--dark);
    max-width: 100%;
    display: block;
}

@media (min-width:769px){
	a:hover{
		text-decoration:underline;
		text-decoration-thickness:1px;
	}
}
@media (max-width: 768px) {
    blockquote {
        margin: 1rem 0rem;
    }
    main {
	    padding: 1rem;
	    margin: 0 auto;
    }
    .table-of-contents{
	    margin:0.5rem;
    }
    a{
	    text-decoration:none;
    }
}