:root {

  /* Modern Font Stacks */
  --mfs-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --mfs-monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --mfs-monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;

  /* Fonts */
  /* --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; */
  --font-body: var(--mfs-humanist);
  /* --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; */
  --font-mono: var(--mfs-monospace-code);

 
  /* Light scheme */
  --bg: #FBF8F4;
  --surface: #F2EBE3;
  --text: #26232E;
  --text-muted: #5E5A68;
  --accent: #1F6FB5;
  --highlight: #F7C9C4;
  --accent-2: #6B4F3A;
  --border: #26232E;
  --accent-hover: #17598F;
  --accent-tint:  #E6EFF8;

  color-scheme: light dark;




/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

/* @link https://utopia.fyi/type/calculator?c=360,12,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */  --step--2: clamp(0.5208rem, 0.4394rem + 0.3621vw, 0.72rem);
  --step--2: clamp(0.6076rem, 0.5617rem + 0.2043vw, 0.72rem);
  --step--1: clamp(0.7292rem, 0.6593rem + 0.3106vw, 0.9rem);
  --step-0: clamp(0.875rem, 0.7727rem + 0.4545vw, 1.125rem);
  --step-1: clamp(1.05rem, 0.9043rem + 0.6477vw, 1.4063rem);
  --step-2: clamp(1.26rem, 1.0563rem + 0.9051vw, 1.7578rem);
  --step-3: clamp(1.512rem, 1.2317rem + 1.2459vw, 2.1973rem);
  --step-4: clamp(1.8144rem, 1.4331rem + 1.6949vw, 2.7466rem);
  --step-5: clamp(2.1773rem, 1.6635rem + 2.2835vw, 3.4332rem);
}

/* Dark scheme: follows the OS unless a manual theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181F;
    --surface: #1F232D;
    --text: #ECE8E1;
    --text-muted: #A9A6B2;
    --accent: #6DB6F0;
    --highlight: #F2A7A0;
    --accent-2: #C9A27E;
    --border: #3A4050;
    --accent-hover: #96CCF5;
    --accent-tint:  #1E2B3D;
  }
}

/* Manual override for a theme toggle */
:root[data-theme="dark"] {
  --bg: #16181F;
  --surface: #1F232D;
  --text: #ECE8E1;
  --text-muted: #A9A6B2;
  --accent: #6DB6F0;
  --highlight: #F2A7A0;
  --accent-2: #C9A27E;
  --border: #3A4050;
  --accent-hover: #96CCF5;
  --accent-tint:  #1E2B3D;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-weight: normal;
    font-size: var(--step-0);
    color: var(--text);
    background-color: var(--bg);
    margin: 0;
    padding: 0;
}

a, a .icon {
    color: var(--accent);

    &:hover {
        color: var(--accent-hover);
        text-decoration-color: currentColor;
    }
}

code {
    color: var(--accent-2);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 2px;
    background-color: var(--surface);
    border-radius: 0.2rem;
}

h1 {
    font-size: var(--step-3);
}

h2 {
    font-size: var(--step-2);
}

h3 {
    font-size: var(--step-1);
}

h4 {
    font-size: var(--step-0);
}


.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-grow: 1;
  max-inline-size: 1000px;
  min-block-size: 100vh;
  margin-inline: auto;
  margin-block: 0;
  padding-inline:var(--space-s-m);

  main {
    flex-grow: 1;
  }
}

img {
    max-inline-size: 100%;
    display: block;
}



/* Based on anyblades ninja - https://blades.dev/css/ninja/ */
sub[style] {
  display: block;
  bottom: 0;
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-muted);
  font-family: var(--font-body);
}
sub[style]:where(h1 > *) {
    font-size: 50%;
  }


header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding-block: 10px;
    border-block-end: 1px solid var(--accent-tint);
}

header img {
    height: 3rem;
    clip-path: circle();
    border-radius: 100%;
    border: 4px solid;
}

.primary-navigation ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  min-height: 24px;

  li:has(button.theme-switcher){
    position: relative;
  }

  button.theme-switcher {
    border: 0;
    background: transparent;
    color: var(--accent);
    svg { 
        stroke-width: 1.5px; 
    }
  }
}

theme-switcher {
  position: absolute;
  top: 100%;
  --theme-switcher-border-color: var(--border);
  --theme-switcher-hover-color: var(--surface);/* contrast-color(var(--accent-2));*/
  --theme-switcher-hover-text-color: var(--accent-2);
  --theme-switcher-background-color: var(--bg);
  form {
    position: absolute;
    top: 11px;
    right: 0;
    padding: var(--space-3xs);
    font-size: var(--step--1);
    border: 1px solid var(--accent-tint);
    border-top: 0;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px
  }
}


a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

/* .icon {
    max-height: 1.5rem;
} */

.profile {
    display: grid;
    gap: 20px;
    padding-block: 3rem;
    text-align: center;

    .image {
        align-self: center;
        justify-self: center;
        img {
            max-height: 175px; 
        }
    }

    /* .bio {
        text-align: start;
    } */

    @media (width > 720px) {
        grid-template-columns: 1fr 3fr;
        text-align: start;
        .image img {
            max-height: 250px;
        }
    }
}

/* .profile  */
.social-icons {
    display: flex;
    align-items: center;

    @media (width <= 720px) {
        justify-content: center;
    }
    /* justify-content: space-between; */
    gap: var(--space-s);
    a {
        /* display: inline-block;
        margin-inline-end: 0.5rem; */
        transition: transform .2s; /* Animation */
        &:hover {
            text-decoration: none;

            .icon {
                transform: scale(1.3);
                fill: var(--accent-hover);
            }

                .icon:is(.no-fill) {
        fill: none;
    }
        }
    }

    .icon {
        fill: var(--accent);
    }

    .icon:is(.no-fill) {
        fill: none;
    }
}

.profile .icon {
    height: var(--step-2);
}

alert {
    display: flex;
    background-color: var(--surface);
    padding: 0.5rem;
    gap: 0.5rem;
    border-radius: 0.5rem;

    .icon {
        display: block;
        width: 3rem;
    }
}

article {
    h1 { 
        margin-block-end: var(--space-3xs);
    }
    .article-info {
        color: var(--text-muted);
        margin-block-end: var(--space-l);
    }
}



.ellipsis-loading {
    span {
        opacity: 0;
        /* animation: dotty steps(1,end) 10s infinite; */
        display: inline-block;
        color: var(--text);

        &:nth-child(1){
            animation: ellipsis-1 8s step-end infinite;
        }
        &:nth-child(2){
            animation: ellipsis-2 8s step-end infinite;
        }
        &:nth-child(3){
            animation: ellipsis-3 8s step-end infinite;
        }
    }
    animation: fadeout 8s ease-out infinite;
}

@keyframes ellipsis-1 {
    0%   { opacity: 0;}
    25%  { opacity: 1;}
    100% { opacity: 1;} 
}

@keyframes ellipsis-2 {
    0%   { opacity: 0;}
    50%  { opacity: 1;}
    100% { opacity: 1;} 
}

@keyframes ellipsis-3 {
    0%   { opacity: 0;}
    75%  { opacity: 1;}
    100% { opacity: 1;} 
}

@keyframes fadeout {
    0% { opacity: 1;}
    90% { opacity: 1;}
    100% { opacity: 0;}
}

footer {
  font-size: var(--step--1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: 3rem;
  color: var(--text-muted);
  /* text-align: center; */
  .icon {
        height: var(--step-0);
  }
  .social-icons{ 
    gap: var(--space-2xs);

  }
}