*,::after,::before{box-sizing:border-box}ol[class],ul[class]{padding:0}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,li,ol[class],p,ul[class]{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ol[class],ul[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}

:root {
    --white: #ffffff;
    --black: #04061C;
    --grey-dark: #6E6F7F;
    --grey-medium: #D1D3E6;
    --grey-light: #f7f8fd;
    --blue: #4659FF;
    --red: #FF4646;
    --green: #3fc31e;
    --gold: #FB9F33;
    --purple: #8C46FF;
    --pink: #ff6ff3;
} 

/* -- Dark Mode -- */
@media (prefers-color-scheme: dark) {
    :root {
        --white: #04061C;
        --black: #ffffff;
        --grey-dark: #a9aaae;
        --grey-medium: #454551;
        --grey-light: #2c2d40;
        --blue: #F0D471;
    }
}

html { 
    background-color: var(--white); 
    color: var(--grey-dark);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: min(max(1rem, 4vw), 18px);
  	font-weight: 300;
    height: 100%; 
    min-height: 100%; 
    text-underline-offset: 2px;
    width: 100%; 
}

body { line-height: 1.8; margin: 0; padding: 0; }
.page { margin: 4rem auto; max-width: 44rem; padding: 2rem; }

/* -- Links -- */
a { color: var(--blue); font-weight: 400; }
a:hover { color: var(--black); text-decoration: none; }
.button, button { background-color: var(--black); border: 0;  color: var(--white); cursor: pointer; display: inline-block; margin: 0 0; outline: none; padding: 0.4rem 1.8rem; text-decoration: none; }
.button:hover, button:hover { background-color: var(--blue); color: var(--white); }

/* -- Typography -- */
h1, h2, h3, h4, h5, h6 { color: var(--black); font-weight: 500; }
h1 { font-size: 2rem; line-height: 1; margin: 0 0 2.4rem 0; }
h2 { font-size: 1.4rem; line-height: 1; margin: 2.8rem 0 1.6rem 0; }
h3 { font-size: 1.2rem; line-height: 1; margin: 2.8rem 0 1.6rem 0; }
h4 { font-size: 1rem; line-height: 1; margin: 2.8rem 0 1.6rem 0; }
h5 { font-size: 1rem; line-height: 1; margin: 2.8rem 0 1.6rem 0; }
h6 { font-size: 1rem; line-height: 1; margin: 2.8rem 0 1.6rem 0; }

p { margin: 0 0 1.6rem 0; }
p:last-child { margin-bottom: 0; }
p.lede { color: var(--black); font-size: 1rem; font-weight: 400; }

strong { color: var(--black); font-weight: 400; }

ul, ol { margin: 0 0 1.6rem 0; }
li { margin: 0 0 0.4rem 0; }
li::marker { color: var(--black); font-weight: 400; }
li ul { margin-top: 0.4rem; }

hr { border: 0; border-top: 1px solid var(--grey-medium); display: block; height: 1px; margin: 1.6rem 0; }

blockquote { border: 1px solid var(--grey-medium); background-color: var(--grey-light); color: var(--black); font-style: italic; margin: 0 0 1.6rem 0; padding: 1.6rem; }

code { color: var(--black); font-family: monospace; font-weight: 400; }
pre { border: 1px solid var(--grey-medium); background-color: var(--grey-light); color: var(--black); display: block; font-size: 0.8rem; margin: 1.6rem 0; overflow: scroll; padding: 1.6rem; }
pre code { color: var(--black); }

table { border-collapse: collapse; border-spacing: 0; font-size: 0.8rem; line-height: 1.2; margin: 0 0 1.6rem 0; min-width: 100%; }
th { background-color: var(--grey-light); border: 1px solid var(--grey-medium); color: var(--black); font-weight: 500; padding: 0.8rem; text-align: left; }
td { border: 1px solid var(--grey-medium); padding: 0.8rem; }

/* -- Header, Footer & Nav -- */
.site-header { margin: 0 0 4rem 0; }
.site-header span { color: var(--grey-dark); display: block; }
.site-title { color: var(--black); font-weight: 600; text-decoration: none; }
.main-nav { display: block; margin: 1rem 0 0 0; }
nav a { color: var(--black); text-decoration: none; }
nav a:hover { color: var(--blue); text-decoration: underline; }
nav a.current { color: var(--grey-dark); }
nav a::after { color: var(--grey-medium); content: '\2022'; display: inline-block; margin: 0 0.4rem; }
nav a:last-child::after { content: none; }
nav a.active { color: var(--grey-medium); }
.site-footer { font-size: 0.8rem; margin: 4rem 0; }
.sub-nav { margin: 0 0 1rem 0; }

/* -- Content -- */
article { margin: 0 0 8rem 0; }
.rss, .callout, .link, .newsletter { border: 1px solid var(--grey-medium); background-color: var(--grey-light); margin: 3.2rem 0; padding: 1.6rem; }
.callout { margin-top: 0; }
.rss h2, .callout h2, .link h2, .callout h3, .newsletter h2 { margin-top: 0; }
.newsletter label { color: var(--black); font-weight: 400; }
.newsletter input { border: 1px solid var(--grey-medium); display: block; margin: 0 0 1rem 0; width: 100%; padding: 0.4rem; }
.newsletter input:focus { border-color: var(--blue); outline: none; }
.link h2::before { content: "Link: "; }
.link { margin: 0 0 8rem 0; }
.post-title { margin: 0 0 0 0; }
.meta { color: var(--black); display: block; font-weight: 400; margin: 1rem 0; }
.blogroll { display: grid; grid-template-columns: 1fr 1fr; }
.page_number { display: block; font-size: 0.8rem; margin: 1rem 0 0 0; }
.permalink { border-top: 1px solid var(--grey-medium); margin-top: 3.2rem; padding-top: 3.2rem; }
figcaption { background-color: var(--grey-light); color: var(--black); font-size: 0.6rem; font-weight: 400; margin: 0 0 1.6rem 0; padding: 0.4rem; text-align: center; }

/* Progress */
.progress { font-size: 0.6rem; text-align: center; }
.progress th { text-align: center; }
.progress strong { display: block; }
.progress td { height: 66px; vertical-align: top; }
.progress .blank { background-color: var(--grey-light); }
.weight { display: block; height: 40px; overflow: hidden; }
.weight-entry { display: inline-block; border-top: 2px solid var(--blue); margin: 0 0 0 0; width: 6px; }

.weights { color: var(--blue); font-weight: 900; }
.run { color: var(--purple); font-weight: 900; }
.yoga { color: var(--green); font-weight: 900; }
.planks { color: var(--gold); font-weight: 900; }
.other { color: var(--pink); font-weight: 900; }
.none { color: var(--red); font-weight: 900; }

@media screen and (max-width: 64rem) {
    .page { margin: 0 0 0 0; }
    nav { column-count: 2; }
    nav a { display: block; }
    nav a::after { content: none; }
    .blogroll { display: block; }
    .progress th, .progress .blank { display: none; }
    .progress td { display: block; }
}