@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,slnt,wdth,wght@12..36,-6..0,75..150,300..900&display=swap');

/* Debugging */
/* * {
  outline: 1px solid red;
} */

:root  {
    --mckl-background: #0a0f17;
    --mckl-background-secondary: #0d1320;
    --mckl-background-alt: #0b1220;
    --mckl-highlight: #FDDA0D;
    --mckl-font-color: #e6edf3;
    --mckl-font-color-dark: #565656;
    --mckl-muted: #9da7b2;
    --bs-border-color: #0b1f00; /* Overrides Bootstrap variable (used in v4) */
    --transition: 0.60s;
}

/* Let flex items shrink so inner scrollers can work */
main.d-flex > *,
.container.d-flex > * {
  min-width: 0;
}

::selection {
    background: var(--mckl-highlight);
    color: var(--mckl-background);
}

::-webkit-scrollbar {
    background: var(--mckl-background);
    height: 8px;
    width: 8px
}

::-webkit-scrollbar-thumb {
    background: var(--mckl-highlight);
    border-radius: 2px
}

*,::after,::before {
    box-sizing: border-box;
}

html:not(.homepage-wrapper), body
{
    background-color: var(--mckl-background);
}

html, body 
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: var(--mckl-font-color);

    font-family: "TikTok Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100;
}

footer
{
    margin-top: 50px;
}

/* Homepage */
html.homepage-wrapper, 
html.homepage-wrapper body
{
    height: 100%;
    margin: 0;
    padding: 0;
}

html.homepage-wrapper body
{
    display: flex;
    flex-direction: column;
}

html.homepage-wrapper main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blog */
html.blog-wrapper article.post {
    width: 50vw; /* full screen width */
    max-width: none; /* override any max-widths */
    padding: 1.5rem 2rem;
    margin: 0;
    transition: color 0.5s
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
    background-color: var(--mckl-background);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: .75rem;
    margin-bottom: 1.5rem;
    font-size: 24px;
}

html.blog-wrapper article.post:hover {
    background-color: var(--mckl-background-alt);
    transition: color 0.5s
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

html.blog-wrapper article.post.post a.post-link {
    color: var(--mckl-font-color);
    transition: color 0.5s
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
    text-decoration: none;
    margin: 0;
    padding: 0
}

html.post-wrapper article.single-post section.single-post-body a,
html.project-wrapper section.project-information a
{
    color: var(--mckl-highlight); /* coloring is reversed */
    transition: color 0.5s
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
    text-decoration: none;
    margin: 0;
    padding: 0
}

html.post-wrapper article.single-post section.single-post-body a:hover,
html.project-wrapper section.project-information a:hover
{
    color: var(--mckl-font-color); /* coloring is reversed */
    transition: color 0.5s
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

/* Standard screens */
html.blog-wrapper article.post dd.mckl-justify-content 
{
    justify-content: flex-end !important;
}

/* It looks silly as 50vw on a small screen, so force it up to 90vw */
@media (max-width: 992px) { 
    /* Target mobile + tablets (Bootstrap's lg breakpoint) */
    /* sm=576, md=768, lg=992, xl=1200, xxl=1400 */
    html.blog-wrapper article.post 
    {
        width: 90vw;
        font-size: 16px;
    }

    html.blog-wrapper article.post dd.mckl-justify-content
    {
        justify-content: flex-start !important;
    }
}

html.blog-wrapper article.post time {
    white-space: nowrap
}

html.blog-wrapper a.post-link dl {
    display: flex;         /* Makes the <dl> a flex container */
    align-items: stretch;  /* Ensures all children stretch vertically */
    margin: 0;             /* Reset margin */
}

html.blog-wrapper a.post-link dt,
html.blog-wrapper a.post-link dd {
    display: flex;         /* Make them flex so children can align inside */
    align-items: center;   /* vertically center the text inside */
    margin: 0;             /* Prevent weird default spacing */
    padding: 0;            /* Remove Bootstrap gutter */
}

html.blog-wrapper article.post .row {
    margin: 0
}

html.blog-wrapper article.post a.post-link time {
    color: var(--mckl-muted);
}

html.post-wrapper article.single-post section.single-post-body
{
    margin-top: 15px;
    min-width: 0;                /* critical for flex overflow issues */
    overflow-x: visible;         /* let the inner figure handle scrolling */
}

html.post-wrapper article.single-post span.ref {
    font-size: 0.5rem;
}

/* Projects */
html.projects-wrapper article.single-project {
    background-color: var(--mckl-background); 
    border: 1px solid rgba(255,255,255,0.08);
}

html.projects-wrapper a.project-link,
html.projects-wrapper a.project-link > article.single-project
{
    text-decoration: none;
    transition: color 0.5s
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

html.projects-wrapper a.project-link:hover > article.single-project
{
    text-decoration: none;
    background-color: var(--mckl-background-alt);
    transition: color 0.5s
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

/* Helpers */
h1.page-title,
html.post-wrapper section.single-post-header
{
    border-bottom: 4px solid var(--mckl-highlight);
    border-radius: .25rem;
    margin-bottom: 1rem;
}

.mckl-muted {
    color: var(--mckl-muted) !important;
}

div.mckl-spacer 
{
    margin-bottom: 10px;
}

span.mckl-separator-dot::before {
    content: "•";
    margin: 0 .25rem;
    color: var(--mckl-muted);
}

a.mckl-external-link-highlight {
    color: var(--mckl-font-color);
    text-decoration: none;
    transition: color 0.5s 
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

a.mckl-external-link-highlight:hover {
    color: var(--mckl-highlight);
    text-decoration: none;
    transition: color 0.5s 
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

nav .mckl-brand,
nav .mckl-nav-link,
h1,h2,h3,h4,h5
{
    font-variation-settings: 
        "slnt" -6,
        "wdth" 150;
    
    font-weight: bold;
}

html.blog-wrapper article.post span.post-title,
html.post-wrapper h1.single-post-title,
html.post-wrapper section.single-post-body h2,
html.post-wrapper section.single-post-body h3,
html.post-wrapper section.single-post-body h4,
html.post-wrapper section.single-post-body h5
{
    font-variation-settings: 
        "wdth" 130;

    font-weight: normal;
}

nav.navbar {
    background-color: transparent;
    border-bottom: none;
}

nav .navbar-brand,
html.blog-wrapper a.posts-year-link,
html.post-wrapper a.single-post-category
{
    color: var(--mckl-font-color);
    text-decoration: none;
    transition: color 0.5s  
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

nav .navbar-brand:hover,
html.blog-wrapper a.posts-year-link:hover,
html.post-wrapper a.single-post-category:hover {
    color: var(--mckl-highlight) !important;
    transition: color 0.5s  
                ease-in-out, background-color 0.5s  
                ease-in-out, border-color 0.5s  
                ease-in-out;
}

nav .nav-link:hover {
    color: var(--mckl-highlight);
    transition: color 0.5s  
                ease-in-out, background-color 0.5s 
                ease-in-out, border-color 0.5s  
                ease-in-out;
}


a[class|='mckl-external-link'] i[class|='fa']
{
    font-size: 42px;
}

a.btn.mckl-btn-ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--mckl-font-color);
}

a.btn.mckl-btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    color: var(--mckl-font-color);
}

.w-responsive
{
    width: 100%;
}

.alert-blockquote > p
{
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {
  /* sm=576, md=768, lg=992, xl=1200, xxl=1400 */
  .w-responsive {
    width: 100%;
  }
}
@media (min-width: 992px) {
  /* sm=576, md=768, lg=992, xl=1200, xxl=1400 */
  .w-responsive {
    width:65%;
  }
}

/* === Tables === */
.mckl-table {
    --bs-table-bg: var(--mckl-background-alt); /* override Bootstrap variable */
    --bs-table-color: var(--mckl-font-color);
    --bs-table-border-color: rgba(255,255,255,0.08);
    border-radius: .35rem !important;
    overflow: hidden;
}

.mckl-table-alt 
{
    --bs-table-bg: var(--mckl-background); /* override Bootstrap variable */
    --bs-table-color: var(--mckl-font-color);
    --bs-table-border-color: rgba(255,255,255,0.08);
    border-radius: .35rem !important;
    overflow: hidden;
}

.mckl-table thead {
    background-color: var(--mckl-background-alt);
    color: var(--mckl-highlight);
    font-size: 0.9rem;
    letter-spacing: .05em;
}

.mckl-table th,
.mckl-table td {
    border-color: var(--bs-border-color);
    vertical-align: middle;
}

.mckl-table tbody tr:nth-child(even) {
    background-color: var(--mckl-background);
}

.mckl-table tbody tr:hover {
    background-color: var(--mckl-background-alt);
}

.mckl-panel
{
    background-color: var(--mckl-background-alt);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: .75rem;
}

.mckl-muted
{
    color: #9da7b2;
}

.border-override 
{
    border: 1px solid rgba(255,255,255,0.08) !important;
}