@import url(fonts.css);

:root{
    --primary-color: #ffbb0b;
    --secondary-color: #006080;
    --tertiray-color: #c77000;

    --section-uni-quote: var(--section-light-text-color);


    /* Dark section - background color */
    --section-dark-bg-color: #c77000;
    /* Dark section - text color */
    --section-dark-text-color: var(--section-light-bg-color);

    /* Light&Dark section `code` a bit darker than 'Light section - background color' */
    --section-uni-code-bg-color: #e0ded7;
    /* Light section - text color */
    --section-light-text-color: #006080;

    /* === Cover / Landing area === */
    --cover-text-color: #ffbb0b;
    /* Used for Landing screen menu buttons, but potentially usable for highlighting other things */
    --highlight: #c77000;
    --highlight-contrast: #ffebb6;
    /*iverse colors used for :hover */
    --highlight-inverse: var(--cover-text-color);
    --highlight-inverse-contrast: #006080;

    /* visual guard around title and description, when the feature is enabled */
    --cover-title-and-description-guard-bg-color: #ffebb6;
    --cover-title-text-shadow: #fff8e7 0px 0px 7px;

    /* === sticky top/left navigation menus === */
    --sticky-menu-text-color: #ffbb0b;


    /* === Footer === */
    --footer-color-background: #006080;
    --footer-color: #ffebb6;


}

/* ==========================================================================
      Custom styles for specific elements
   ========================================================================== */

/* custom css keeps getting overwritten unless very specific selector used */

#site-head .blog-title, #site-head.withCenteredImage .blog-title {
    font-size: 7rem;
}

#site-head .blog-description, #site-head.withCenteredImage .blog-description {
    font-family: "Montserrat", sans-serif;
    font-size: 3.8rem;
}



#site-head a.btn, #site-head.withCenteredImage a.btn {
    font-family: "Montserrat", sans-serif;
}

/* specific selectors disable responsiveness in font size */
@media only screen and (max-width: 1130px) {
    #site-head .blog-title, #site-head.withCenteredImage .blog-title {
        font-size: 5rem;
        letter-spacing: -1px;
    }

    #site-head .blog-description, #site-head.withCenteredImage .blog-description {
        font-family: "Montserrat", sans-serif;
        font-size: 2.8rem;
        line-height: 1.5em;
    }
}

body {
    font-family: "Montserrat", sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Handlee Regular", sans-serif;
}

.blog-description {
    font-family: "Montserrat", sans-serif;
    font-size: 3.8rem;
    margin-top: -20px;
}

.blog-title {
    font-family: "Handlee Regular", sans-serif;
    font-size: 7rem;
}


a.btn {
    font-family: "Montserrat", sans-serif;}


.fixed-nav {
    font-family: "Montserrat", sans-serif;
}

.site-footer {
    font-family: "Montserrat", sans-serif;
}

blockquote {
    font-family: "Handlee Regular", sans-serif;
}

blockquote + p{
    text-align: right;
    margin-top: -20px;
}

#single-post-title-logo {
    background-image: url("../images/kleiner_header.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 10px;
    height: 120px;
    border-radius: 25px;
    margin-bottom: 30px;
}

#single-post-title-logo a{
    margin-top: 30px;
    text-align: center;
    color: var(--cover-text-color);
    font-size: 3.5rem;
    font-family: "Handlee Regular", sans-serif;
}

/* Every post, on every page, gets this style on its <article> tag
  Not inside the post holder as this also applies for single pages
*/
.post {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: 0rem auto;
    padding-bottom: 4rem;
    padding-top: 4rem;
    height: 70%;
    word-break: unset;
    hyphens: none;
}