@font-face {
    font-family: "Primary";
    src: url(../fonts/Quicksand.ttf);
    font-display: swap;
}

:root {
  --base-content-spacing: 20px;
  --base-font-size: 17px;
  --large-font-size: 24px;
}

html {
  scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1, h2, h3, h4, h5 {
    margin: 0.7em 0 0.5em 0;
}

h1 {
    font-size: var(--large-font-size);
}

h2 {
    font-size: calc(0.7 * var(--large-font-size));
}

h3 {
    font-size: calc(0.6 * var(--large-font-size));
}

.clear-fix {
	clear: both;
}

body {
	font-family: "Primary";
	font-size: var(--base-font-size);
	color: #222222;
}

.container {
	margin: 0 auto;
	padding-top: 25px;
	width: 880px;
}

.top-navigation {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: none;
}

#collapsable-navigation {
    display: none;
}

#collapsable-navigation-link {
    color: white;
    background-color: #222222;
    display: block;
    padding: 5px;
}

/*Sidebar*/
.sidebar {
	width: 220px;
	float: left;
}

nav {
    margin-right: 10px;
}

nav a {
	color: #222222;
	font-size: calc(0.95 * var(--base-font-size));
}

nav a:hover {
	font-weight: 600;
}

.active-link {
    font-weight: 600;
}

nav ul {
	list-style: none;
}

nav ul li {
    margin-bottom: 2px;
}

nav p {
	font-size: calc(0.85 * var(--base-font-size));
}

.nav-header {
	margin-top: 10px;
}

.nav-icon, .nav-header-title {
	float: left;
}

.nav-header-title {
	margin-left: 5px;
	font-weight: 600;
    font-size: calc(1.1 * var(--base-font-size));
}

p strong {
    font-weight: 600;
}

/* Main content */
.main-content {
	width: 660px;
	float: left;
    margin-top: 14px;
}

.main-content .post_media_container {
    border-radius: 7px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px;
    transition: all 0.15s ease-in-out;
    line-height: 0;
    margin-bottom: var(--base-content-spacing);
}

.main-content .post_media {
    width: 100%;
    height: auto;
}

.constrained_height {
    max-height: 660px;
}

.main-content .post_media_caption {
    line-height: normal;
    color: white;
    background: #222222;
    margin-top: -1px;
    padding: 10px 8px 10px 8px;
    font-size: calc(0.8 * var(--base-font-size));
}

.main-content ul, ol {
    margin-left: 40px;
    margin-bottom: var(--base-content-spacing);
}

.main-content ul, li + li {
    margin-top: 5px;
}

.main-content blockquote {
    padding: 16px 16px 0 16px;
    font-style: italic;
    margin-bottom: var(--base-content-spacing);
    font-size: var(--base-font-size);
    background: url('/images/quote.svg');
    background-repeat:no-repeat;
    background-position: 0px 5px;
    padding-left: 25px;
}

.main-content h1 {
    margin-top: calc(1.25 * var(--base-content-spacing));
}

.main-content blockquote p {
    margin-bottom: 0px;
}

.main-content .year, .tag-header {
	margin: 0 0 5px 15px;
	font-weight: 600;
    font-size: calc(1.1 * var(--base-font-size));
}

.tag-header {
    margin-bottom: 15px;
}

.tag-header .tag {
    font-weight: 600;
    background-color: #222222;
    border-radius: 2px;
    padding: 2px 4px 2px 4px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 20px 0px;
}

ul.post-list {
    margin-left: 15px;
    margin-bottom: 20px;
}

.post-list {
	margin: 0 15px 3px 15px;
    font-size: var(--base-font-size);
	list-style: none;
}

.post-link-wrapper {
    display: flex;
    align-items: center;
}

.post-link-date {
    padding-left: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.post-list a:hover {
	text-decoration: underline;
}

.post-list li {
	margin-bottom: 3px;
}

.post-list span {
	color: #94979E;
	float: right;
}

.main-content p {
    margin-bottom: var(--base-content-spacing);
    line-height: 1.45;
}

.main-content a {
    text-decoration: underline;
    color: #222222;
}

.main-content a:hover {
    text-decoration: none;
}

.post_media_caption a {
    text-decoration: underline;
    color: white;
}

.post_media_caption code {
    background: white;
    color: #222222;
}

.post-list a {
    all: unset;
    text-decoration: none;
    cursor: pointer;
    color: #222222;
}

.post-list a:hover {
    all: unset;
    text-decoration: underline;
    cursor: pointer;
}

.main-content .date {
	color: #94979E;
    margin-bottom: 20px
}

.main-content .title {
	font-weight: 700;
    font-size: calc(1.2 * var(--large-font-size));
}

.block-tldr {
    color: white;
    background: #222222;
    padding: 12px 10px 12px 10px;
    margin-bottom: 26px;
    font-size: calc(1.05 * var(--base-font-size));
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 20px 0px;
}

.block-tldr code {
    background: black;
}

.block-header-icon {
    float: left;
    margin-right: 4px;
    margin-top: -1px;
}
.block-header {
    margin-bottom: 6px;
}

.block-header-title {
    font-weight: 600;
}

.block-content p {
    margin-bottom: 0;
}

.heading-anchor {
    position: relative;
}

.heading-anchor:hover > .heading-anchor-link img {
    visibility: visible !important;
    height: 60%;
}

.heading-anchor:hover > .heading-anchor-link {
    width: 30px;
}

.heading-anchor-link {
    position: absolute;
    height: 80%;
    margin-left: -30px;
}

.heading-anchor-link img {
    visibility: hidden;
    margin-left: 7px;
    margin-bottom: 1px;
}

/* Footer */
footer {
	padding: 30px 0 30px 0;
}

footer p {
	text-align: center;
	font-size: calc(0.75 * var(--base-font-size));
	font-weight: 100;
    margin-bottom: 0px !important;
}

@media (max-width: 900px) {
    .container {
        width: 768px;
    }
    
    .main-content {
        width: 568px;
    }
    
    .constrained_height {
        max-height: 568px;
    }
    
    .sidebar {
        width: 200px;
    }
    
    .post-list {
        font-size: calc(0.95 * var(--base-font-size));;
    }
    
    footer p {
        font-size: calc(0.7 * var(--base-font-size));;
    }
}

@media (max-width: 788px) {
    .container {
        width: 90%;
    }
    
    .main-content {
        width: 100%;
    }
    
    .sidebar {
        display: none;
    }
    
    .main-content .year, .tag-header {
        margin-left: 0;
    }

    ul.post-list {
        margin-left: 0;
    }
    
    .top-navigation {
        display: block;
    }
    
    .heading-anchor:hover > .heading-anchor-link img {
        visibility: hidden;
    }

    .heading-anchor-link {
        visibility: hidden;
    }
        
}

@media (max-width: 480px) {
    .container {
        width: 95%;
    }
    
    .post-list {
        font-size: calc(0.75 * var(--base-font-size));;
    }
    
    .main-content .title {
        font-size: 28px;
    }
    
    .constrained_height {
        max-height: 480px;
    }
    
    h1 {
        font-size: calc(0.8 * var(--large-font-size));
    }

    h2 {
        font-size: calc(0.65 * var(--large-font-size));
    }

    h3 {
        font-size: calc(0.55 * var(--large-font-size));
    }
}

/* TODO: move this to separate place*/

pre {
    margin-bottom: var(--base-content-spacing);
    background: rgb(32, 32, 37);
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 20px 0px;
}

pre.sh {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 20px 0px;
    border-radius: 7px;
    padding: 12px 0;
}

.terminal-status-bar {
    width: 100%;
    position: relative;
    z-index: 10;
}

.terminal-controls {
    position: absolute;
    margin-top: -5px;
    margin-left: 20px;
}

.terminal-name {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: calc(0.8 * var(--base-font-size));
    font-weight: 100;
    color: #d3d3d3;
}

pre.sh code {
    color: #222;
    padding-top: 35px;
    padding-bottom: 5px;
    background: white;
}

pre code {
    color: white;
    font-family: monospace;
    display: block;
    padding: 12px 20px;
    line-height: 1.3em;
    overflow-x: auto;
    white-space: pre;
    font-size: calc(0.9 * var(--base-font-size));
    -webkit-overflow-scrolling: touch;
    background: rgb(32, 32, 37);
    border-radius: 7px;
}

code {
    font-family: monospace;
    background: rgb(246, 246, 246);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: calc(0.9 * var(--base-font-size));
}

pre code .minimal_keyword {
    color: rgb(241.6176, 35.68164, 139.516875);
/*    0.94752 0.139928 0.547125*/
}

pre code .minimal_type {
    color: rgb(169.317195, 255, 234.353415);
/*    0.663989 1 0.919033 1*/
}

pre code .minimal_call {
    color: rgb(86.000025, 207.99993, 179.000055);
/*    0.337255 0.815686 0.701961 1*/
}

pre code .minimal_property {
    color: rgb(85.620585, 208.061385, 178.981695);
/*    0.335767 0.815927 0.701889 1*/
}

pre code .minimal_number {
    color: rgb(255, 230.917545, 109.088745);
/*    1 0.905559 0.427799*/
}

pre code .minimal_string {
    color: rgb(251.999925, 70.00005, 80.999985);
/*    0.988235 0.27451 0.317647 1*/
}

pre code .minimal_comment {
    color: rgb(107.999895, 121.00005, 135.00006);
/*    0.423529 0.47451 0.529412*/
}

pre code .minimal_dotAccess {
    color: rgb(86.000025, 207.99993, 179.000055);
/*    0.337255 0.815686 0.701961 1*/
}

pre code .minimal_preprocessing {
    color: rgb(253.000035, 142.99992, 63.000045);
/*    0.992157 0.560784 0.247059 1*/
}