/* Add the Atkinson fonts.
Got help from https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website,
then generated the WebFont kit with Font Squirrel (https://www.fontsquirrel.com)
(I also used https://transfonter.org/)
and then read about the correct CSS here: https://stackoverflow.com/a/28571625
*/
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-bold-webfont.eot');
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bold-webfont.woff2') format('woff2'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bold-webfont.woff') format('woff'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bold-webfont.ttf') format('truetype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bold-webfont.svg#atkinson_hyperlegiblebold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-bolditalic-webfont.eot');
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bolditalic-webfont.woff2') format('woff2'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bolditalic-webfont.woff') format('woff'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bolditalic-webfont.ttf') format('truetype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-bolditalic-webfont.svg#atkinson_hyperlegibleBdIt') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-italic-webfont.eot');
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-italic-webfont.woff2') format('woff2'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-italic-webfont.woff') format('woff'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-italic-webfont.ttf') format('truetype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-italic-webfont.svg#atkinson_hyperlegibleitalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-regular-webfont.eot');
    src: url('/user/themes/myquark/fonts/atkinsonhyperlegible-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-regular-webfont.woff2') format('woff2'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-regular-webfont.woff') format('woff'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-regular-webfont.ttf') format('truetype'),
         url('/user/themes/myquark/fonts/atkinsonhyperlegible-regular-webfont.svg#atkinson_hyperlegibleregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'APL385 Unicode';
    src: url('/user/themes/myquark/fonts/APL385.eot');
    src: local('APL385 Unicode'), local('APL385'),
        url('/user/themes/myquark/fonts/APL385.eot?#iefix') format('embedded-opentype'),
        url('/user/themes/myquark/fonts/APL385.woff2') format('woff2'),
        url('/user/themes/myquark/fonts/APL385.woff') format('woff'),
        url('/user/themes/myquark/fonts/APL385.ttf') format('truetype'),
        url('/user/themes/myquark/fonts/APL385.svg#APL385') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FiraCode Nerd Font Mono';
    src: url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Bold.eot');
    src: local('Fira Code Bold Nerd Font Complete Mono'), local('FiraCode Nerd Font Mono'), local('FiraCodeNerdFontCompleteM-Bold'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Bold.eot?#iefix') format('embedded-opentype'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Bold.woff2') format('woff2'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Bold.woff') format('woff'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Bold.ttf') format('truetype'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Bold.svg#FiraCodeNerdFontCompleteM-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FiraCode Nerd Font Mono';
    src: url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Regular.eot');
    src: local('Fira Code Regular Nerd Font Complete Mono'), local('FiraCode Nerd Font Mono'), local('FiraCodeNerdFontCompleteM-Regular'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Regular.eot?#iefix') format('embedded-opentype'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Regular.woff2') format('woff2'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Regular.woff') format('woff'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Regular.ttf') format('truetype'),
        url('/user/themes/myquark/fonts/FiraCodeNerdFontCompleteM-Regular.svg#FiraCodeNerdFontCompleteM-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@media screen and (min-width: 980px) {
    .blog-3-col .bricklayer-column-sizer {
        width: 33.3%;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6 {
    font-family: "Chewy", cursive;
    color: #f8f8f2;
}

/* Headers in hero sections of modular pages marked with the `text-light` class. */
.hero.text-light h1,
.hero.text-light h2,
.hero.text-light h3,
.hero.text-light h4,
.hero.text-light h5,
.hero.text-light h6,
.hero.text-light i,
.hero.text-light p {
    color: #f8f8f2;
}

/* The small titles of features like the last ones in the workshop page. */
.modular-features .feature-icon h6 {
    scale: 1.2;
    color: #838c9f;
    background: #191919;
}

/* Little "featured" icons, like the ones in the blog. */
.modular-features.small .feature-icon i {
    color: #515763;
}

#sidebar,     /* Text on the sidebar of the blog. */
#breadcrumbs, /* Text inside the breadcrumbs. */
details,      /* `details` for the little dropdown with the tags in the blog. */
i,            /* `i` for the FontAwesome icons. */
time,         /* For the times at which blog posts were written. */
figcaption,   /* For the image captions. */
p,
li,
label {
    font-family: "Atkinson Hyperlegible", sans-serif;
    color: #f8f8f2;
}

/* Centre images in blog posts. */
.blog-listing img {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

/* Justify the text of paragraphs inside the body,
    exclude the ones in the footer section, in the hero sections,
    the "feature" texts under icons in the workshops page,
    and elements specifically aligned to the centre. */
body p:not(#footer p, .hero p, .feature-content p, .text-center) {
    text-align: justify;
}

.float-right {
    margin-left: 20px;
}

/* Colour of the navigation menu item's text. Use !important because so does the default theme.
 * Include a very specific CSS selector: when this is not included, this very same specific
 * selector in the theme CSS overrides this and makes the text too dark, so we override it again,
 * because we are more stubborn then the theme :P */
nav a, .header-dark #header:not(.scrolled) .dropmenu ul ul a {
    color: #f8f8f2 !important;
}
/* Fix the colouring of the same navigation menu when I hover over links. */
.header-dark #header:not(.scrolled) .dropmenu ul li a:hover {
    color: #fff !important;
}


#header, body,
.modular-features.offset-box .frame-box /* This is for the main box in the Workshops page that is "closer" to the screen. */
{
    background: #191919;
}

/* Set the background colour of the alternating modular pages. */
section.modular-text.bg-gray {
    background: #1e1f1f !important;
}

blockquote {
    border-left-color: #555555;
}

#sidebar input {
    background: #191919;
    border-color: #555555;
}

#sidebar input:focus {
    border-color: #478ce0;
}

/* Background colour for button classes like the "Random Article" button or the "Subscribe the newsletter". */
.button, .btn {
    background: #191919;
}
.btn:hover, .button:hover {
    background: #202a37;
}

/* Background colour for blog tags. */
.tags .label {
    background: #202a37;
}

/* Colour for the numbers in the Blog archive and for the text in the selected tag in the blog. */
.label.label-primary {
    color: #f8f8f2;
}

/* Borders for the pagination numbers at the top of the blog listings. */
.pagination li {
    border-color: #333333;
}

/* Set the colours for pieces of code. */
code, pre code {
    font-family: "FiraCode Nerd Font Mono";
    background: #282a36;
    color: #f8f8f2;
    font-variant-ligatures: none;
}
pre code { /* Repeat for multiline code. */
    font-family: "FiraCode Nerd Font Mono";
    background: #282a36;
    color: #f8f8f2;
    font-variant-ligatures: none;
}
/* Style APL code with the correct font. */
code.language-APL, code.language-apl, .apl code, .APL code {
    /* Multiline APL code blocks and inline code with a "APL" span. */
    font-family: "APL385 Unicode";
}

code.language-APL, code.language-apl {
    line-height: 1.25;
}

/* Set visited links to a darker shade of blue. */
a:visited {
    color: #3c72b2;
}

/* Background colour and shadow for the header menu. */
.dropmenu.animated ul li ul {
    background: #191919;
    box-shadow: 0 1px 4px #555555;
}

#footer {
    background: #1e1f1f !important; /* Use !important because the footer has the class bg-gray, that sets the colour with !important as well. */
}

/* Blog post cards with correct background and shadow. */
.blog-listing .card {
    background: #1a1919;
    box-shadow: 0 10px 45px -9px #333333;
}

.notices.blue {
    border-left-color: #1a6b83;
    background: #1d2022;
}
.notices.blue > * {
    color: #288aa6;
}
.notices.green {
    border-left-color: #327c32;
    background: #1c221c;
}
.notices.green > * {
    color: #5b9a5b;
}
.notices.yellow {
    border-left-color: #854f03;
    background: #221e1a;
}
.notices.yellow > * {
    color: #ac6808;
}
.notices.red {
    border-left-color: #d9534f;
    background: #231e1e;
}
.notices.red > * {
    color: #e27673;
}

/* https://stackoverflow.com/a/13184714/2828287 */
/* Compensates for the height of the website header. */
a.headeroffset {
    display: block;
    position: relative;
    top: -64px;
    visibility: hidden;
}

/* CSS to change the social icons in the footer. */
.social-icon-container {
    font-size: 28px;
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    position: relative;
}

.social-icon {
    color: #f8f8f2;
}

/* CSS to style "share this blog post" buttons that scroll
 * with the user.
 * Created by mimicking the code of the "Buy me a coffee" widget. */
/* If the screen is not wide enough, just hide the buttons. */
@media screen and (max-width:920px) {
    .custom-scrollable, .custom-scrollable > * {
        display: none;
    }
}
@media screen and (min-width:920px) {
    .custom-scrollable, .custom-scrollable > * {
        display: flex;
    }
}

.custom-scrollable {
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.7rem;
    border-radius: 2rem; 
    /* Custom computation of distance to left margin of the screen
     * to stay at a constant distance of the blog post content.
     * For the 488 = 976/2, we found out that 976 is the maximum
     * width that the blog content can take up (as per its CSS). */
    left: calc(50vw - 488px - 5rem);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    cursor: pointer;
    font-weight: 600;
    transition: all .2s ease;
}

/* CSS for the image-captions plugin. */
figure.image-caption {
    text-align: center;
    margin: 1rem;
}
figure.image-caption figcaption {
    opacity: 0.7;
    font-size: 90%;
}
figure.figure-right {
    float: right;
    margin-right: 0;
}
figure.figure-left {
    float: left;
    margin-left: 0;
}
figure.caption-left figcaption {
    text-align: left;
}
figure.caption-right figcaption {
    text-align: right;
}
/* End of the CSS for the image-captions plugin. */

/* Mimic the CSS rule that keeps paragraphs "tight" in the modular pages (cf. /education),
 * but use it for blockquotes as well.
 */
.modular-features .frame-box > blockquote { 
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Add some CSS to make sure the Gumroad button doesn't look weird
   because of interactions with the plugin that adds those icons to external links. */
a.gumroad-button, a.external-link.no-image.gumroad-button {
  background: none;
}

/* Styling the Revue embed form, based on code I had for the MailChimp form. */
#revue-embed form {text-align:center; padding:10px 0 10px 0;}
#revue-embed input.email {font-family:"Atkinson Hyperlegible", "Open Sans", "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#revue-embed .clear {display: inline-block;} /* positions button horizontally in line with input */
#revue-embed .button {font-size: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
@media (max-width: 768px) {
    #revue-embed input.email {width:100%; margin-bottom:5px;}
    #revue-embed .clear {display: block; width: 100% }
    #revue-embed .button {width: 100%; margin:0; }
}
#revue-embed {clear:left; width:100%;}
/* Have the links with the same colour as the text and in a smaller font. */
#revue-embed a {text-decoration: underline; color: #f8f8f2;}
div.revue-form-footer *{font-size: small;}

/* Customise tables. */
table {
    margin-bottom: 24px;  /* Separate from remainder of text. */
    margin-left: auto;  /* Centre the table in the page. */
    margin-right: auto;
    border-collapse: collapse;
    color: #f8f8f2;
}

thead {
    color: #ffb86c;
    border-bottom: thin solid #f8f8f2;  /* Horizontal line under the header. */
}

table th, table td {
    padding: 0 0.5em;  /* Prevent columns from getting crowded. */
}

tbody tr:nth-child(even) {
    background: #1e1f1f; /* Same colour as footer. */
}