:root {
    color-scheme: light dark;
    --col-body: light-dark(#fafafa, #ddd);
    --col-primary: light-dark(#222a55, #1d2342);
    --col-highlight: light-dark(#98fdff, #46c4cf);
    --col-secondary: rgba(0,10,0,.2);
    --col-lowlight: #787e8b;
    --font-body: sans-serif;
    --font-hero: "Segoe UI", Tahoma, Arial, sans-serif;
}

@supports not (color: light-dark(blue, green)) {
    :root {
        --col-body: #fafafa;
        --col-primary: #222a55;
        --col-highlight: #98fdff;
    }
    
    @media only screen and (prefers-color-scheme: dark) {
        :root {
            --col-body: #ddd;
            --col-primary: #1d2342;
            --col-highlight: #46c4cf;
        }
    }
}

html {
    box-sizing: border-box
}

*,* :before,* :after {
    box-sizing: inherit
}

::before,::after {
    vertical-align: inherit
}

html,body {
    min-height: 100%
}

main,picture,iframe,img {
    display: block
}

.visually-hidden,[hidden] {
    display: none
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0
}

svg {
    fill: currentColor
}

svg:not(:root) {
    overflow: hidden
}

body {
    position: relative;
    margin: 0 auto;
    padding: .75rem;
    font: 100%/1.5 var(--font-body, sans-serif);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--col-body, #eee);
    background: var(--col-primary, #242a48);
    background-repeat: no-repeat;
    background-image: linear-gradient(162deg, var(--col-highlight), 10rem, var(--col-primary) 30rem);
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-color: var(--col-lowlight) var(--col-secondary);
    scrollbar-width: thin
}

@supports (padding: max(0px)) {
    body {
        padding: max(1.5rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    }
}

article > * {
    margin: 0 0 1.5rem
}

h1,h2,h3 {
    font-family: var(--font-hero, inherit);
    font-weight: 900    
}

h1,.h1 {
    font-size: 2.75rem;
    line-height: 1;
    overflow-wrap: break-word;
    hyphens: auto
}

h2,.h2 {
    font-size: 2rem;
    line-height: 1
}

h3,.h3 {
    font-size: 1.5rem;
    line-height: 1
}

article {
    font-size: 1.125rem;
    overflow-wrap: break-word;
    hanging-punctuation: first
}

ul, ol {
    padding-inline-start: 1.5em
}

ul {
    list-style-type: square
}

ol {
    list-style-type: upper-alpha
}

ul ul, 
#syndication ul {
    list-style-type: circle;
    margin-bottom: 0;
}

::marker {
    color: var(--col-highlight, currentColor)
}

a:link,a:visited {
    color: var(--col-highlight, currentColor);
    text-decoration: none;
    transition: color .1s linear 0;
    transition: color .1s linear 0,text-decoration-color .1s linear 0
}

a:hover,a:active,a:focus,.active,[aria-current] {
    color: var(--col-body, currentColor)!important;
    text-decoration: underline !important;
    text-decoration-skip-ink: auto;
}

a[rel] {
    text-decoration: none
}

article a[href*="//"]:not([href*="paulfosterdesign.co.uk/"]):after {
    content: " \2794";
    content: " \2794" / "(external)";
    font-size: initial;
    color: currentColor
}

@media (any-hover: none) {
    abbr[title]::after {
      content: "(" attr(title) ")";
    }
}

code,pre,kbd {
    padding: 0.0625rem .125rem;
    font-family: monospace, monospace;
    font-size: 1rem;
}

p>code,kbd {    
    border: 0.0625rem solid var(--col-lowlight)
}

pre {
    padding: .75rem;
    overflow: auto;
    word-wrap: normal;
    tab-size: 4;
    border-radius: .125rem;
    background-color: var(--col-secondary)
}

blockquote {
    padding-inline-start: 1.25rem;
    font-size: 1.5em;
    font-style: italic;
    border-inline-start: .25rem solid var(--col-highlight);
}

small {
    letter-spacing: .025em
}

dt {
    font-weight: 700;
    font-style: italic
}

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

::target-text {
    color: var(--col-primary);
    background-color: var(--col-highlight);
}

.invisible {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    overflow: clip;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.list--nostyles {
    padding: 0;
    list-style-type: none;
    list-style-type: ""
}

.list--navigation {
    font-size: 1.5em;
    line-height: 1.333;
}

.flex--row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: .5rem
}

.flex--spacebetween {
    justify-content: space-between
}

.flex--auto {
    flex: 1 auto
}

.flex--fifty {
    flex: 1 1 50%
}

.flex--justifycenter {
    text-align: center
}

.flex--gapped {
    gap: 1rem
}

.lowlight {
    display: block;
    font-size: .875rem;
    line-height: 1.715;
    letter-spacing: .025rem;
    color: var(--col-lowlight, #777)
}

.button {
    display: inline-block;
    padding: .5em;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--col-highlight);
    background-color: var(--col-secondary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border-radius: .125rem
}

.icon {
    width: 1.5em;
    height: 1.5em;
    margin: .5em;
}

.wrap-all {
    margin: auto;
    max-width: 43.75rem
}

.wrap-logo--link {
    display: block;
    margin: 0 25%
}

.wrap-banner--pfd {
    display: none
}

.wrap-preview, .codepen, #mentionable {
    margin-bottom: 1.5rem;
    padding: .75rem;
    border-radius: .125rem;
    background-color: var(--col-secondary);
}

.wrap-preview {
    margin-trim: block;  
}

.wrap-preview--title {
    margin: 0 0 .75rem;
    font-size: 2rem;
    line-height: 1
}

.codepen {
    font-family: monospace, monospace;
}

.cp_embed_wrapper,
.figure__featimg {
    display: block;
    max-width: 43.75rem;
    box-shadow: .75rem .75rem 0 rgba(0,0,0,.2)
}

@media only screen and (min-width: 600px) {
    .figure__featimg--portrait {
        max-width: 22.5rem;
        float: right;
        float: inline-end;
        margin-left: 1rem;
        margin-inline-start: 1rem;
    }
}

.figure--hover {
    margin: 0 0 1.5rem;
}

:is(h2, h3) + p:has(strong):has(+ ul) {
    margin: -1em 0 .75rem;
    color: var(--col-highlight);
}

:is(h2, h3) em {
    font-size: .875em;
    font-family: var(--font-body);
}

.list--cvskills {
    content-visibility: auto;
    contain-intrinsic-size: auto calc(100vw - 3rem) auto 5rem;
}

.list--cvskills li {
    display: inline-block;
    margin: .125rem 0;
    margin-block: .125rem;
    padding: .25rem;
    line-height: 1;
    color: var(--col-primary);
    background-color: var(--col-body);
}

.copyright {
    text-align: end;
}