/* Global styles */
@font-face {
    font-family: "firasanslight";
    src: url("/fonts/FiraSans-Light.otf");
}

@font-face {
    font-family: "firasansbold";
    src: url("/fonts/FiraSans-Regular.otf");
}

@font-face {
    font-family: "majesti";
    src: url("/fonts/Majesti-Banner-Light.otf");
}


body {
    font-family: firasanslight;
    font-feature-settings: "liga", "kern";
    background-color: #FFF;
}

/* Fix jumping scrollbar when switching to long pages */

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
    font-size:1rem;
}

/* margin top */

.mt-xl {
    margin-top: 60px;
    font-family: majesti;
    letter-spacing: 2px;
}

.mt-xl h1 {
    font-family:majesti;
}


/* link */

a {
    color: #458588;
    background-color: transparent;
}

a:active, a:hover {
    outline-width: 0;
}

a:hover, a:focus {
    color: #458588;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* horizontal rule */

hr {
    border: 0;
    border-top: 1px solid #fabd25;
}

.content .markdown hr {
    margin-left: 1.52rem;
    margin-right: 1.52rem;
    margin-top:0.5rem;
    margin-bottom:1rem;
}

/* Partial: Header */

.header a {
    text-decoration: none;
}


.header h1.name {
    font-weight: 600;
    font-size: 2.1875rem;
    color: #333333;
}

.header ul.nav li {
    font-size: 1rem;
    margin: 1rem;
}

.header ul.nav .nav-link{
    padding:0.2rem 0.5rem;
}

.header ul.nav {
    margin-bottom: 5rem;
}

.header ul.nav li.nav-item-active a {
    background-color: #fabd25;
    color: #333333;
}

.header ul.nav li.nav-item {
    position: relative;
    z-index: 1;
    transition: color 400ms;
}

.header ul.nav li.nav-item a {
    color: #333333;
}


.header ul.nav li.nav-item a::after {
    content: "";
    left: 0;
    bottom:0;
    width: 100%;
    height: 100%;
    background-color: #fabd25;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms ease-in;
    z-index: -1;
}
  
.header ul.nav li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* Partial: Content */

.content h1, h2, h3, h4, h5, h6 {
    /* font-weight: 600; */
    color: #333333;
    /* margin-bottom: 1rem; */
    font-family: firasansbold;
}

.content .meta {
    font-weight: 400;
    font-size: 1rem;
    color: #738491;
    margin-bottom: 10px;
}

.content .meta a {
    text-decoration: none;
}

.content .middot:before {
    margin: 0 3px;
    content: "·";
}

.content .caption {
    text-align: center;
    margin-top: 10px;
    color: #586069;
    font-size: 0.9rem;
}

.content .markdown {
    font-weight: 400;
    font-size: 0.9rem;
    color: #333333;
    line-height: 1.25rem;
}

/* .content .markdown li {
    margin-top: 1rem;
    margin-bottom: 1rem;
} */

.content twitterwidget {
    margin: auto;
}

/* blog post typography */

.content .blog-post-title {
    font-size: 2rem;
    line-height: 2.625rem;
}

.content .blog-post-content {
    font-size: 1.0625rem;
    line-height: 2rem;
}

/* centered, boxed blog post images */

.content .figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.content .markdown code, .content .markdown pre {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: #fff;
}

.content .markdown code {
    /* enclosed by single backtick (`) */
    color: #333;
    padding: .2em .4em;
    margin: 0;
    font-size: 1rem;
    background-color: rgba(27, 31, 35, .05);
    border-radius: 6px;
}

.content .markdown pre {
    /* Hugo specific: consider using the 'highlight' shortcode */
    display: block;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    line-height: 20px;
    white-space: pre;
    word-break: break-all;
    word-wrap: break-word;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.content .markdown pre code, .content .markdown pre output {
    /* enclosed by 4 backticks (````) */
    padding: 0;
    font-size: 0.75rem;
    line-height: 20px;
    background-color: #fff;
    border-radius: 0;
}

.content .markdown blockquote {
    padding: 0.5rem 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #7a7a7a;
    border-left: 0.25rem solid #e5e5e5;
}

.content .markdown blockquote p:last-child {
    margin-bottom: 0;
}

.content .markdown figure {
    background: #fff;
}

.content .post-item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    margin-bottom: 1rem;
}

.content .meta-title {
    font-size: 1.5625rem;
    margin-bottom: 0.5rem;
}

.content .meta-title {
    font-size: 1.5625rem;
    font-weight: 600;
}

.content .meta-title a {
    text-decoration: none;
}

.content .meta-title a:hover {
    text-decoration: underline;
}

.content .meta-date {
    font-size: 1rem;
    color: #738491;
    margin-bottom: 2rem;
}

.content .navigation .icon {
    width: 16px;
    height: 16px;
}

/* Partial: Utterances Comments */

.comments {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 100%;
}

/* < medium screens */

.content .meta, .content .markdown h1, .content .markdown h2, .content .markdown h3, .content .markdown h4, .content .markdown h5, .content .markdown h6, .content .markdown p, .content .markdown ul, .content .markdown ol, .content .markdown dl, .content .markdown blockquote, div.alert, form, table, .gist-file, .content .ref {
    margin-left: 0;
    margin-right: 0;
}

@media (min-width:800px) {

    .content .meta, .content .markdown h1, .content .markdown h2, .content .markdown h3, .content .markdown h4, .content .markdown h5, .content .markdown h6, .content .markdown p, .content .markdown ul, .content .markdown ol, .content .markdown dl, .content .markdown blockquote, div.alert, form, table, .gist-file, .content .ref {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
    
    .left_part {
        margin: 3rem;
        background-image: linear-gradient(to bottom, #FFF 15%, #fabd25 15% 85%, #FFF 85% 100%);
        width:460px; 
        max-height:500px;
        position:fixed;
    }

    .right_part {
        float:right;
        max-width: calc(100% - 460px - 3rem);
        min-width: 200px;
        position:relative;
        margin-top:2rem;
    }

    .column {
        float: left;
        width: 50%;
        margin-bottom:1rem;
    }

    .ref:after {
        content: "";
        display: table;
        clear: both;
    }
}

.left_part .img{
    position:relative;
    left:5%;
    width:90%;
}

.left_part img {
    border-radius: 3px;
    border: 3px solid #333333;
    padding: 10px;
    width:100%;
}

.left_part {
    background-image: linear-gradient(to bottom, #FFF 15%, #fabd25 15% 85%, #FFF 85% 100%);
    height: 100%;
}

.printimg {
    /* border: 5px solid #333333; */
    fill:#fabd25;
    width:1.5rem;
}

@media (max-width:800px) {
    .column {
        float: left;
        width: 100%;
        margin-bottom:1rem;
    }

    /* Clear floats after the columns */
    .ref:after {
        content: "";
        display: table;
        clear: both;
    }
}