/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/eb_garamond-5.woff') format('woff');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/eb_garamond-6.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/eb_garamond-12.woff') format('woff');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/eb_garamond-13.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-size: 23px;
}
    /*
body {
    background: #f6f6f6;
    font-family: "EB Garamond", "Helvetica Neue", "Segoe UI", sans-serif;
    color: #f3f3f3;
    line-height: 1.5rem;
    font-weight: 400;
    min-width: 325px;
} */

a {
    color: #2630f6;
    text-decoration: none;
}
    a:hover {
        color: #52b4d8;
    }

table {
    width: 100%;
    border: 1px solid #ddd;
    font-size: 0.975rem;
}
    table th {
        background: #eee;
        text-align: left;
    }
    table th, td {
        padding: 5px 15px;
    }
    table td {
        border-bottom: 1px solid #ddd;
    }
    table tr:last-child td {
        border-bottom: 0;
    }

code {
    display: inline-block;
    background: #f4f4f4;
    color: #6262fb;
    padding: 0px 3px;
    font-size: 0.775em;
    line-height: 1.2em;
    border-radius: 5px;
}
pre code {
    display: block;
}
    .post .highlight {
        background: #f4f4f4;
        padding: 5px;
    }
    .post img {
        display: block;
        margin: 1.0rem auto;
        max-width: 100%;
        height: auto;
    }

    .post a {
        word-break: break-word;
        text-decoration: underline;
        text-decoration-color: #ff3300;
        text-decoration-thickness: 2px;
    }
        .content a:hover {
            color: #000;
            text-decoration-color: #000;
        }
    .content sup {
        font-size: 0.775em;
        position: relative;
        top: -7px;
        vertical-align: top;
    }
    .content sup a {
        text-decoration: none;
    }
    .post .footnote {
        border: 1px solid #ff3300;
        border-width: 1px 3px 3px 1px;
        padding: 20px;
        margin: 45px auto;
        font-size: 0.875rem;
        line-height: 1.4;
        max-width: 75%;
    }
        .post .footnote .title {
            text-transform: uppercase;
            margin: 0 0 10px 0;
            font-size: 1rem;
            font-weight: bold;
        }
        .post p {
            margin: 0 0 10px 0;
        }
        .post p:last-child {
            margin-bottom: 0;
        }
    .cc-disclaimer {
        font-size: 0.775rem;
        color: #aaa;
        line-height: 1.4;
        margin-top: 15px;
    }
        .cc-disclaimer a {
            color: inherit;
            text-decoration: underline;
        }

html, button, input, select, textarea {
    color: #333;
}

::-moz-selection {
    background: #000;
    text-shadow: none;
    color: #fff;
}

::selection {
    background: #000;
    text-shadow: none;
    color: #fff;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ddd;
    margin: 30px 0;
    padding: 0;
}

button, input, select, textarea {
    padding: 10px;
    font-size: 0.875rem;
    border-radius: 3px;
}
    button {
        cursor: pointer;
        background: #111;
        color: #fff;
        border-color: #111;
    }
    button:hover {
        background: #ff3300;
        border-color: #ff3300;
    }


img {
    max-width: 100%;
}

a img {
    border:none;
}

figure {
    margin: 0;
    text-align: center;
}

figcaption {
    font-size: 0.875rem;
    color: #f9f9f9;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

blockquote {
    background: #3b3a3a;
    font-style: italic;
    border-left: 5px solid;
    border-color: #ffffff;
    padding: 10px 15px;
}
    blockquote p {
        margin: 0 0 10px 0;
    }
    blockquote sup {
        color: #ffffff;
    }
    blockquote p:last-child {
        margin-bottom: 0;
    }

blockquote cite {
    opacity: .8;
}

blockquote em {
    font-weight: 600;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.3em;
    margin: 45px 0 20px 0;
    color: #ffffff;
}

h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.3rem;
}

h4 {
    font-size: 1.1rem;
}

.half {
    max-width: 70%;
}
.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}
    figure.float-right {
        margin: 0 15px 0 15px;
    }

.text-small {
    font-size: .875em;
}

ul.flat {
    margin: 0;
    padding: 0;
}

ul.flat li {
    display: inline-block;
    list-style: none;
    margin-left: 0;
}

.prevent-collapse {
    min-height: .1rem
}

.highlight pre {
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px;
    background-color: transparent !important;
}

.wrap {
    background: #fff;
    margin: 0 auto;
    padding: 90px 120px;
}

.container {
    max-width: 1100px;
    min-width: 320px;
}

.header {
    margin-bottom: 90px;
    display: flex;
    flex-wrap: wrap;
}
    .header .logo, .header .nav {
        flex-grow: 1;
    }
    .header .nav {
        text-align: right;
    }
    .header .nav a {
        display: inline-block;
        margin-left: 30px;
    }
    .header .nav a.active {
        color: inherit;
    }

.slogan {
    margin: 0 0 60px 0;
    font-style: italic;
}

.photo {
    float: right;
    text-align: right;
}
    .photo img {
        border-radius: 100%;
        display: inline-block;
        max-width: 234px;
    }

.slideshow {
    margin: 20px -120px 0 -120px;
}
    .slideshow figure {
        position: relative;
        overflow: hidden;
        height: 0;
        opacity: 0;
        transition: height 0ms 3000ms, opacity 3000ms 0ms;
    }
    .slideshow figure.visible {
        height: auto;
        opacity: 1;
        transition: height 0ms 0ms, opacity 3100ms 0ms;
    }
    .slideshow figure figcaption {
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 0.775em;
        color: #f8f7f7;
    }

.github {
    line-height: 1.3em;
    font-size: 0.875rem;
    margin-bottom: 60px;
    padding: 0;
}
    .github li {
        margin-bottom: 20px;
        display: flex;
    }
    .github .date {
        flex: 15%;
        color: #fffcfc;
    }
    .github .name {
        flex: 20%;
    }
    .github .desc {
        flex: 65%;
    }


.projects {
    margin-top: 60px;
    padding: 0;
}
    .projects .status,
    .projects .tags {
        color: #f4f4f4;
    }
    .projects h3 {
        margin: 0 0 0 0;
    }
    .projects h3 a {
        padding-bottom: 5px;
        display: inline-block;
        border-bottom: 1px solid #ddd;
        text-decoration: none;
    }
    .projects h3 a span {
        color: #f8f6f6;
        margin-right: 15px;
    }
    .projects li p {
        margin: 15px 0 .5em 0;
    }
    .projects li {
        margin-bottom: 2em;
        display: flex;
    }
    .projects .desc {
        flex: 70%;
    }
    .projects .thumb {
        flex: 30%;
        text-align: right;
    }


.footer {
    text-align: center;
    color: #f6f4f4;
    margin: 30px 0;
}
    .footer a {
        color: #f5f2f2;
    }
    .footer a:hover {
        color: #3506f2;
    }

.big {
    margin-bottom: 45px;
}
.subscribe {
    font-size: 0.875rem;
}
    .subscribe a {
        display: inline-block;
        margin-left: 20px;
    }
.posts .title {
    margin: 0 0 15px 0;
}
    .date {
        color: #f6f3f3;
    }
    .posts .post {
        margin-bottom: 45px;
    }
	.post .tags {
		margin-top: 30px;
	}

.items .date {
    display: inline-block;
    min-width: 20%;
}
    .items li {
        margin-bottom: 10px;
    }

.recent-posts li {
    margin-bottom: 25px;
    line-height: 1.2rem;   
}
    .recent-posts .date {
        display: block;
        font-size: 0.875rem;
    }

.tag-cloud {
    margin-top: 20px;
}

.tag-cloud a {
    margin-right: 15px;
}

.tags a {
    display: inline-block;
    border: 1px solid #ffffff;
    border-radius: 3px;
    padding: 0px 6px;
    color: #eeeded;
    line-height: 20px;
    font-size: 0.85em;
    text-decoration: none;
    margin: 0 10px 0 0;
}

.pagination {
    margin: 10px 0;
    padding: 0;
    font-size: 0.875rem;
}

.pagination li {
    list-style: none;
    display: inline-block;
    margin: 0 15px 0 0;
    padding: 0;
}
    .pagination a {
        text-decoration: none;
    }
    .pagination .active a {
        font-weight: bold;
        color: inherit;
        text-decoration: underline;
    }

@media screen and (min-width: 1800px) {
    body {
        font-size: 26px;
        line-height: 1.4;
    }
    .container {
        max-width: 1300px;
    }
}

@media (max-width: 925px) {
    body {
        font-size: 20px;
        line-height: 1.4em;
    }

    .wrap {
        padding: 30px 15px;
    }

    .header {
        display: block;
        text-align: center;
        margin-bottom: 45px;
    }
        .header .logo {
            margin-bottom: 20px;
        }

    .header .nav {
        display: flex;
        justify-content: center;
    }
    .header .nav a {
        margin: 0 15px;
        display: inline-block;
    }
    .slogan {
        text-align: center;
    }
    .photo {
        float: none;
        text-align: center;
    }
    .slideshow {
        margin: 0 -30px;
    }
    .float-right {
        float: none;
    }
        figure.float-right {
            margin: 15px 0;
        }

    .github li {
        display: block;
    }

    .projects li {
        display: block;
        margin-bottom: 3em;
    }
    .projects .thumb {
        text-align: left;
    }
    .projects .desc p {
        margin: 0;
    }
    .projects .status {
        display: block;
        margin-bottom: 15px;
    }
    .projects .tags {
        margin: 0;
    }

    .half {
        max-width: none;
    }

    .post .footnote {
        padding: 15px;
        max-width: none;
    }

        .header {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .header .nav a {
            margin: 0 5px;
            display: inline-block;
            font-size: 0.75rem;
        }
        .subscribe {
            font-size: 0.75rem;
            margin-bottom: 15px;
        }
        .subscribe a {
            margin: 0 10px 0 0;
        }

        .mast .title {
            margin-top: 0;
        }
}