:root {
    --f-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    --f-mono: "Source Code Pro", Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
    --f-serif: "Libre Baskerville", Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, serif; 

    --c-primary: oklch(55.111% 0.10368 230.82);
    --c-secondary: oklch(77.977% 0.15834 91.075);
    --c-accent: oklch(51.887% 0.20719 9.458);
    --c-text: oklch(16.33% 0.02806 74.757);
    --c-text-secondary: oklch(58.547% 0.01141 238.826);
    --c-background: oklch(90.67% 0.0001 271.152);
    --c-highlight: oklch(95.213% 0.00011 271.152);
    --c-white: oklch(100% 0.00011 271.152 / 0.7);
}
html{
    font-size: 12px;
    scroll-behavior: smooth;
}
body{
    font-family: var(--f-sans);
    background: var(--c-background);
    color: var(--c-text);
}

#container{
    max-width: 800px;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}



main{
    margin-bottom: 4rem;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 4fr 2fr;
    column-gap: 3rem;
}
    .block2{
        align-self: start;
        background: var(--c-highlight);
        padding: 2rem;
        margin: 0;
        box-shadow: 0 4px 10px -5px var(--c-text-secondary);
    }
section{
    background: var(--c-highlight);
    padding: 2rem;
    margin: 1rem;
    box-shadow: 0 4px 10px -5px var(--c-text-secondary);
}
footer{
    margin-top: 3rem;
    padding: 1rem;
    font-size: 0.9rem;
    font-family: var(--f-sans);
    color: var(--c-text-secondary);
}
@media only screen and (max-width: 600px) {
    html{
        font-size: 14px;
    }
    main{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .block2{
        margin-top: 2rem;
    }
}
/* ### TYPOGRAPHY ### */
h1{
    font-size: 2rem;
    font-family: var(--f-mono);
    font-weight: bold;
    color: var(--c-primary);
    letter-spacing: 1px;
    margin: 0 0 1rem;
}
h2{
    font-size: 1.5rem;
    color: var(--c-primary);
    margin: 0 0 1rem;
}
h3{
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: var(--f-mono);
    color: var(--c-text-secondary);
    background: var(--c-white);
    padding: 1ch 2ch;
    border-radius: 5px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto 2rem;
}
h4{
    font-size: 1rem;
    font-weight: bold;
}
p + h1,p + h2,p + h3,ul + h1,ul + h2,ul + h3{
    margin: 2rem 0 1rem;
}
p.hero{
    font-size: 2.6rem;
    line-height: 2.4rem;
    font-family: var(--f-serif);
    font-weight: bold;
}
    p.hero a{
        text-decoration: wavy underline;
        text-decoration-color: var(--c-accent);
        text-decoration-thickness: 2px;
        font-family: var(--f-mono);
        color: var(--c-primary);
        background: none;
    }
    p.hero a:hover{
        color: var(--c-accent);
    }
    p.hero + p{
        font-size: 0.9rem;
        font-family: var(--f-mono);
        font-style: italic;
        color: var(--c-text-secondary);
        margin-bottom: 3rem;
    }
p + p,p + img,p + figure,img + p,figure + p,p + ul,ul + p,p + ol,ol + p{
    margin-top: 1em;
}
p a{
    color: inherit;
    text-decoration-color: var(--c-accent);
    text-decoration-thickness: 2px;
    background: var(--c-highlight);
    padding: 0 0.2ch;
}
p a:hover,p a:active{
    text-decoration-color: var(--c-secondary);
    background: none;
}
h2 a{
    text-decoration: none;
}
    h2 a:hover{
        color: var(--c-secondary);
    }
a.button{
    display: inline-block;
    background: var(--c-text-secondary);
    color: var(--c-background);
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
}
    a.button:hover{
        background: var(--c-secondary);
    }
a.cta{
    display: inline-block;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: var(--f-sans);
    color: var(--c-text);
    background: var(--c-secondary);
    padding: 1ch 2ch;
    border-radius: 5px;
    text-align: center;
    max-width: 500px;
    margin: 1rem auto;
}
    a.cta:hover{
        background: var(--c-secondary);
        opacity: 0.8;
    }
strong{
    font-family: var(--f-mono);
}
em{
    font-family: var(--f-serif);
}
code{
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--f-mono);
    padding: 0 0.5ch;
}
pre{
    border-left: 2px solid var(--c-secondary);
    background: var(--c-highlight);
    padding: 1rem 0;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
svg{
    width: 100%;
    height: 100%;
    display: inline;
    color: inherit;
}
/* ### NAVIGATION ### */
header{
    margin: 2rem 0;
    padding: 0 1rem;
}
nav{
    display: inline-block;
    line-height: 3rem;
    font-family: var(--f-mono);
    text-transform: lowercase;
    font-size: 1.2rem;
}
nav ul{
    list-style: none;
    padding: 0;
    display: flex;
    gap: 2rem;
    color: var(--c-text);
}
nav ul li{
    margin-block-start: 0;
}
nav ul li.home{
    font-weight: bold;
}
nav ul li a:link,nav ul li a:visited{
    text-decoration: none;
    color: inherit;
}
nav ul li a.current{
    text-decoration: underline;
}

/* ### IMAGES ### */
.block2 figure{
    margin: 0;
}
.block2 img{
    max-height: 260px;
    border: 0;
    box-shadow: none;
    border-radius: 5px;
    margin: 0 auto;
}
.block2 figure + figure{
    margin-top: 2rem;
}
img{
    margin: 1rem 0;
    border: 5px solid var(--c-highlight);
    box-shadow: 0 4px 10px -5px var(--c-text-secondary);
    max-height: 80vh;
}
.avatar{
    float: right;
    margin: 0 0 1rem 2rem;
    max-width: 30%;
    border: 0;
    border-radius: 5px;
}
.material-symbols-outlined{
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: -1px 5px 0 0;
    font-weight: 100;
    color: inherit;
    font-variation-settings:
        'FILL' 1,
        'wght' 100,
        'GRAD' 200,
        'opsz' 20
}
h1 .material-symbols-outlined, h2 .material-symbols-outlined, h3 .material-symbols-outlined{
    color: var(--c-secondary);
}

/* ### BLOG ### */

ul.recentposts{
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}
    ul.recentposts li{
        margin: 1rem 0;
    }
    ul.recentposts li a:link,ul.recentposts li a:visited{
        text-decoration: underline;
        text-decoration-color: var(--c-secondary);
        color: var(--c-text-secondary);
    }
    ul.recentposts li a:hover,ul.recentposts li a:active{
        text-decoration-color: var(--c-accent);
    }
    ul.recentposts li a.date{
        display: inline-block;
        font-size: 0.9rem;
    }
    ul.recentposts .material-symbols-outlined{
        color: var(--c-secondary);
    }

.date{
    font-family: var(--f-mono);
    color: var(--c-highlight);
}
.tagcloud{
    list-style: none;
    display: flex;
    padding: 0;
    gap: 5px;
    margin: 2rem 0 0;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
    .tagcloud li a{
        text-decoration: none;
        background: var(--c-text-secondary);
        color: var(--c-background);
        padding: 2px 5px;
        border-radius: 4px;
        font-family: var(--f-mono);
        font-size: 0.9rem;
    }
    .tagcloud li a:hover{
        background: var(--c-secondary);
    }
    .tagcloud li a::before{
        content: '#';
        display: inline-block;
        margin-right: 1px;
    }
    .removefilterbutton{
        text-decoration: none;
        color: var(--c-accent);
    }
.tags{
    list-style: none;
    display: flex;
    padding: 0;
    gap: 1rem;
    margin: 2rem 0;
}
    .tags li{
        margin: 0;
    }
    .tags li a{
        border: 1px solid var(--c-primary);
        padding: 1ch 2ch;
        border-radius: 5px;
        color: var(--c-primary);
        text-decoration: none;
        font-family: var(--f-mono);
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    .tags li a:hover,.tags li a:active{
        background: var(--c-primary);
        color: var(--c-background);
    }
    .tags li a::before{
        content: '#';
        display: inline-block;
        margin-right: 0.5ch;
    }

/* ### POST STYLES ### */
.blog-note,.blog-post,.blog-image,.blog-book,.blog-journal{
    margin: 0 0 4rem 0;
}
.blog-note{
    background: var(--c-highlight);
    padding: 1rem;
}
.time{
    margin: 1rem 0 0 0;
    clear: both;
    color: var(--c-text-secondary);
    font-family: var(--f-mono);
    font-style: italic;
}
.time a{
    text-decoration: none;
    background: none;
    color: var(--c-text-secondary);
    font-family: var(--f-mono);
    font-style: italic;
}
.bookcover{
    max-width: 64px;
    border: 1px solid var(--c-highlight);
    border-radius: 5px;
    float: left;
    margin: 0 1rem 0 0;
}
.book-series{
    color: var(--c-text-secondary);
    font-family: var(--f-mono);
    font-style: italic;
}
    .blog-book .material-symbols-outlined{
        margin: 0 0 0 -5px;
        font-size: 20px;
        color: var(--c-secondary);
    }

/* ### PAGINATION ### */

.pagination{
    margin: 4rem auto 2rem;
    flex-basis: 100%;
    font-family: var(--f-mono);
}
.pagination ul{
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 60ch;
    margin: 0 auto;
}
    .pagination ul li:not(:has(a)){
        padding: 1ch 2ch;
        color: var(--c-text-secondary);
        border-radius: 5px;
    }
    .pagination ul li a:link,.pagination ul li a:visited{
        text-decoration: none;
        background: var(--c-highlight);
        padding: 1ch 2ch;
        color: var(--c-text);
        border-radius: 5px;
    }
    .pagination ul li a:hover,.pagination ul li a:active{
        background: var(--c-secondary);
        color: var(--c-text);
    }

/* ### ICONS ### */
.icon-container{
    display: flex;
    position: relative;
    justify-content: space-evenly;
    /* border: 2px solid var(--c-accent); */
    border-radius: 100px;
    margin: 0 auto 2rem;
    max-width: 600px;
}
/* .icon-container::before{
        content: 'A / S / L';
        background: var(--c-background);
        width: 120px;
        position: absolute;
        font-size: 0.9rem;
        top: -0.5em;
        text-align: center;
        left: calc(50% - 60px);
        font-family: var(--f-mono);
        letter-spacing: 1px;
        color: var(--c-accent);
        line-height: 0.9rem;
    } */
.icon-container *{
    margin-block-start: 0;
}
/* ### AGE ORBIT ### */

.age-container{
    position: relative;
    width: 100px;
    height: 100px;
}
.age-center{
    position: absolute;
    top: calc(50% - 1.1ch);
    left: calc(50% - 1.1ch);
    width: 2.2ch;
    height: 2.2ch;
    text-align: center;
    color: var(--c-highlight);
    font-weight: 900;
    background: var(--c-secondary);
    border-radius: 100%;
    font-size: 0.9rem;
}
.age-orbit{
    position: absolute;
    top: 21px;
    left: 20px;
    width: 60px;
    height: 60px;
    border: 1px dashed var(--c-text-secondary);
    border-radius: 100%;
    -webkit-animation: spin-right 65s linear infinite;
    animation: spin-right 65s linear infinite;
}
.age-orbit-circle{
    position: absolute;
    top: 14px;
    left: -2px;
    height: 0.5em;
    width: 0.5em;
    border-radius: 100%;
    background-color: var(--c-primary);
}
@keyframes spin-right{
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ### FAMILY ### */

.family-container{
    position: relative;
    width: 100px;
    height: 100px;
}
.man-m{
    position: absolute;
    top: 25px;
    left: 8px;
}
.man-m svg{
    height: 50px;
    width: 50px;
    color: var(--c-primary);
}
.man-d{
    position: absolute;
    top: 25px;
    left: 26px;
}
.man-d svg{
    height: 50px;
    width: 50px;
    color: var(--c-text);
}
.dog-z{
    position: absolute;
    top: 49px;
    left: 52px;
    color: var(--c-secondary)
}
.dog-z svg{
    height: 40px;
    width: 40px;
}

/* ### LOCATION ### */

.location-container{
    width: 100px;
    height: 100px;
    position: relative;
}
.location-country{
    position: absolute;
    top: 20px;
    left: 35px;
    color: var(--c-text);
}
.location-country svg{
    width: 60px;
    height: 60px;
}
.location-dot{
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    top: 60px;
    left: 33px;
    background: var(--c-secondary);
    box-shadow: 0 0 1px var(--c-background);
}
.location-dot::after{
    content: 'YVR';
    font-size: 9px;
    color: var(--c-primary);
    font-weight: bold;
    position: absolute; 
    top: -3px;
    left: -4.5ch;
    letter-spacing: 1px;
}

/* ### BOOKSHELF ### */
.bookshelf{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 2rem;
}
    .bookshelf h3{
        flex: 0 0 100%;
        max-width: 100%;
        margin: 2rem 0 0;
    }
    .bookshelf .book{
        flex-basis: 30%;
        flex-grow: 1;
        text-align: center;
        max-width: 35%;
        padding: 1rem;
        position: relative;
    }
    @media only screen and (max-width: 600px) {
        .bookshelf .book{
            flex-basis: 40%;
            max-width: 55%;
        }
    }
        .book figure{
            width: 100%;
            aspect-ratio: 1/1.5;
            margin: 0 0 1rem 0;
            border: 0;
            border-radius: 5px;
        }
            .book figure img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border: 0;
                border-radius: 5px;
            }
        .book-title{
            font-size: 1.1rem;
            font-weight: bold;
        }
        .book-author{
            color: var(--c-text);
            font-style: italic;
            margin: 0.5rem 0;
            font-family: var(--f-serif);
        }
        .book .book-series{
            font-size: 0.9rem;
            color: var(--c-text-secondary);
            margin: 0;
        }
        .book .book-rating .material-symbols-outlined{
            margin: 0 0 0 -5px;
            color: var(--c-secondary);
        }

/* ### BOOK GRAPH ### */
.bookstats-container{
    width: 100%;
    margin: 1rem auto 0;
    padding: 0;
    position: relative;
    text-align: center;
    color: var(--c-text-secondary);
}
.bookgraph{
    margin: 2em 0 0 0;
    display: flex;
    flex-direction: row-reverse;
    border-bottom: 1px solid var(--c-text);
    align-items: flex-end;
    gap: 1ch;
}
.bookgraph-year{
    width: 100%;
    background: var(--c-text-secondary);
    overflow: hidden;
    font-size: 0.8rem;
    text-align: center;
    color: var(--c-background);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.bookgraph-legend{
    margin: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 1ch;
}
    .bookgraph-legend div{
        width: 100%;
        font-size: 0.6rem;
        text-align: center;
        color: var(--c-text-secondary);
    }


/* ### HUD ### */
.hud{
    max-width: 100%;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
    align-items: start;
}
.healthbar{
    height: 2rem;
    display: flex;
    justify-content: center;
    color: var(--c-text-secondary);
    line-height: 1em;
    font-size: 12px;
    font-weight: bold;
    font-family: var(--f-mono);
}
    .healthbar .hp{
        margin-right: 0.7rem;
        font-size: 0.8rem;
    }
    .healthbar .material-symbols-outlined{
        font-size: 1.1rem;
    }
    .healthbar .material-symbols-outlined.outline{
    font-variation-settings:
        'FILL' 0,
        'wght' 600
    }
.xpbar{
    line-height: 0;
    height: 1rem;
    width: 100%;
    max-width: 280px;
    background: var(--c-text-secondary);
    border: 1px ridge var(--c-text-secondary);
    position: relative;
}
    .xpfill{
        background: var(--c-highlight);
        height: 100%;
    }
    .xpbar::after{
        content: 'EXP';
        position: absolute;
        top: 5px;
        left: calc(50% - 1.5ch);
        font-size: 0.7rem;
        font-family: var(--f-mono);
        height: 1rem;
        font-weight: normal;
        letter-spacing: 2px;
        color: var(--c-highlight);
    }
@media only screen and (max-width: 600px) {
    .hud{
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        gap: 0;
    }
    .healthbar{
        justify-content: start;
    }
}

/* ### SOCIAL LINKS ### */

ul.sociallinks{
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 2rem 0 0 0;
    align-content: center;
    justify-items: start;
    padding: 0;
}
ul.sociallinks li{
    margin: 0;
    height: 2rem;
}
    ul.sociallinks li h2{
        text-wrap: nowrap;
    }
ul.sociallinks a:link,ul.sociallinks a:visited{
    color: var(--c-secondary);
    transition: color 0.15s ease-in-out;
}
ul.sociallinks a:hover,ul.sociallinks a:active{
    color: var(--c-accent);
}

/* ### HEATMAP ### */

.heatmap{
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    justify-content: center;
}
.heatmap div{
    height: 1rem;
    width: 1rem;
    background: oklch(65.666% 0.00007 271.152 / 0.3);
    border-radius: 2px;
    font-family: var(--f-mono);
    font-size: 0.5rem;
    text-align: center;
    line-height: 1rem;
    color: oklch(100% 0.00011 271.152 / 0);
}
.heatmap .h0{
    background: oklch(73.866% 0.06805 150.139);
    color: oklch(100% 0.00011 271.152 / 0.588);
}
.heatmap .h1{
    background: oklch(84.573% 0.13812 108.127);
    color: oklch(100% 0.00011 271.152 / 0.588);
}
.heatmap .h2{
    background: oklch(83.325% 0.16435 91.171);
    color: oklch(100% 0.00011 271.152 / 0.588);
}
.heatmap .h3{
    background: oklch(77.382% 0.17214 64.583);
    color: oklch(100% 0.00011 271.152 / 0.588);
}