@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

:root {
    --primary-color: #536390;
    --secondary-color: #2060d0;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
    --code-bgcolor: #F0F3F3;
}

[data-theme="dark"] {
    --primary-color: #B076B0;
    --secondary-color: #8bc0dd;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
    --code-bgcolor: #373C49;
}
.list .article-titles:hover * {
    color: gray;
}

body {
    font-family: 'Noto sans', sans-serif;
    background-color: var(--bg-color);
    color: var(--font-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
}

a {
    color: var(--secondary-color);
}

.site-navi a {
    color: var(--font-color);
}

pre, code {
    background-color: var(--code-bgcolor);
}

.site-footer-items {
    flex-grow: 1;
}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
  }

.theme-switch {
display: inline-block;
height: 24px;
position: relative;
width: 50px;
}
  
  .theme-switch input {
    display:none;
  }
  
  .slider {
    background-color: #373C49;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
  }
  
  .slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 6px;
    position: absolute;
    transition: .4s;
    width: 16px;
  }
  
  input:checked + .slider:before {
    transform: translateX(22px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .theme-switch-icons {
      display: flex;
      justify-content: space-between;
      margin: 4px 6px;
  }

div.main > article h2 {
    font-size: 1.17em;
}

/* Make the site title a bit smaller than default */
.site-title {
    font-size: 1.4em;
}

/* Add some padding to the RSS footer icon */
.taxonomies-item > a > svg {
    padding-right: 4px;
}

/* Add some padding around the footer links */
.site-footer-items > li > a {
    padding-left: 6px;
}

/* Add a border and style the table of contents */
.toc {
    padding: 0 0 0 12px;
    border: none;
    border-left: 1px solid lightgray;
    font-size: 0.9em;
}

.hide-on-mobile {
    display: unset;
}

.display-on-mobile {
    display: none;
}

@media only screen and (max-width: 600px) {
    /* Display the footer items in a 
       column on small screens */
    .site-footer {
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
    }

    .site-footer > * {
        margin: 5px 0;
    }

    .display-on-mobile {
        display: unset;
    }

    .hide-on-mobile {
        display: none;
    }
}

/* Add some padding between the navigation page numbers */
.pagination > .page-item {
    padding-left: 8px;
    padding-right: 8px;
}

/* Disable the move previous/next links when you can't perform
   those actions */
.page-item.disabled {
    pointer-events: none;
    opacity: 0.3;
}

/* Hide the navigation 'go to first' and 'go to last' links 
   as they don't disable when you are already on the 
   first/last page */
.page-item:first-child, .page-item:last-child {
    display: none;
}

/* Break long urls on small screens */
article a {
    word-wrap: break-word;
}

.article img {
    border: none;
}

/* Search page */
#search-query {
    width: 100%;
    padding: 10px 20px;
    border-radius: 20px;
    border: solid #cccccc 1px;
    font-size: medium;
    /* Take the elements padding into account so that the search
    textbox doesn't exceed the bounds of the parent */
    box-sizing: border-box;
    /* Hide the blue outline that chrome puts around input elements */
    outline: none;
}

#no-results {
    text-align: center;
}

#no-results.hidden {
    display: none;
}

#search-hint {
    margin: 1em;
    font-size: small;
}

#search-results .article-titles > h2 {
    margin-bottom: 2px;
}

#search-results i {
    margin-right: 4px;
}

.list .article-meta {
    margin-bottom: 0;
}

.list .article {
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.site-header-bottom {
    margin-bottom: 25px;
}

.copy-code-button {
    position: absolute;
    right: 0;
    background-color: transparent;
    border: transparent;
    color: #fff;
    cursor: pointer;
    margin-top: 2px;
    font-weight: bold;
}

/* Copy code buttons in code blocks without syntax highlighting */
:not(td) > .copy-code-button {
    color: var(--font-color);
}

/* Fix styles for code blocks without syntax highlighting */
pre:not(.chroma) {
    overflow-x: auto;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* This is to make the copy buttons be absolutely positioned to the article content */
.article {
    position: relative;
}

dt {
    font-weight: bold;
}

/* display amazon affiliated links to the right */
a[href*="https://www.amazon.co.uk/"] {
    display: flex;
    flex-direction: column;
    float: right;
    margin-left: 12px;
    align-items: center;
    font-size: small;
}

a[href*="https://www.amazon.co.uk/"]::after {
    content: "Buy On Amazon†";
}

/* Curb the gap between the article meta and the start of the 
article text for which the default is a bit excessive */
.main >.article > .article-meta {
    margin-bottom: 20px;
}

div.book-wrapper p {
    margin-top: 0;
}

a#bookmarkletbtn {
    display: inline-block;
    background-color: black;
    border-radius: 4px;
    padding: 8px;
    color: whitesmoke;
}

#profile-pic {
    display: block;
    background:url('/img/about/profile.jpg') center no-repeat ;
    background-size: contain;
    float: right;
    width: 225px;
    height: 250px;
    margin-left: 20px;
    margin-bottom: 10px;
}