:root {

    --catppuccin-macchiato-rosewater: #f4dbd6;
	--catppuccin-macchiato-flamingo: #f0c6c6;
	--catppuccin-macchiato-pink: #f5bde6;
	--catppuccin-macchiato-mauve: #c6a0f6;
	--catppuccin-macchiato-red: #ed8796;
	--catppuccin-macchiato-maroon: #ee99a0;
	--catppuccin-macchiato-peach: #f5a97f;
	--catppuccin-macchiato-yellow: #eed49f;
	--catppuccin-macchiato-green: #a6da95;
	--catppuccin-macchiato-teal: #8bd5ca;
	--catppuccin-macchiato-sky: #91d7e3;
	--catppuccin-macchiato-sapphire: #7dc4e4;
	--catppuccin-macchiato-blue: #8aadf4;
	--catppuccin-macchiato-lavender: #b7bdf8;
	--catppuccin-macchiato-text: #cad3f5;
	--catppuccin-macchiato-subtext1: #b8c0e0;
	--catppuccin-macchiato-subtext0: #a5adcb;
	--catppuccin-macchiato-overlay2: #939ab7;
	--catppuccin-macchiato-overlay1: #8087a2;
	--catppuccin-macchiato-overlay0: #6e738d;
	--catppuccin-macchiato-surface2: #5b6078;
	--catppuccin-macchiato-surface1: #494d64;
	--catppuccin-macchiato-surface0: #363a4f;
	--catppuccin-macchiato-base: #24273a;
	--catppuccin-macchiato-mantle: #1e2030;
	--catppuccin-macchiato-crust: #181926;



	--everforest-darkmed-bg-dim: #232A2E;
    --everforest-darkmed-bg0: #2D353B;
    --everforest-darkmed-bg1: #343F44;
    --everforest-darkmed-bg2: #3D484D;
    --everforest-darkmed-bg3: #475258;
    --everforest-darkmed-bg4: #4F585E;
    --everforest-darkmed-bg5: #56635f;
    --everforest-darkmed-bg-visual: #543A48;
    --everforest-darkmed-bg-red: #514045;
    --everforest-darkmed-bg-yellow: #4D4C43;
    --everforest-darkmed-bg-green: #425047;
    --everforest-darkmed-bg-blue: #3A515D;
    --everforest-darkmed-bg-purple: #4A444E;
    --everforest-darkmed-fg: #D3C6AA;
    --everforest-darkmed-red: #E67E80;
    --everforest-darkmed-orange: #E69875;
    --everforest-darkmed-yellow: #DBBC7F;
    --everforest-darkmed-green: #A7C080;
    --everforest-darkmed-aqua: #83C092;
    --everforest-darkmed-blue: #7FBBB3;
    --everforest-darkmed-purple: #D699B6;
    --everforest-darkmed-grey0: #7A8478;
    --everforest-darkmed-grey1: #859289;
    --everforest-darkmed-grey2: #9DA9A0;
    --everforest-darkmed-statusline1: #A7C080;
    --everforest-darkmed-statusline2: #D3C6AA;
    --everforest-darkmed-statusline3: #E67E80;



	--everforest-lightmed-bg-dim: #EFEBD4;
    --everforest-lightmed-bg0: #FDF6E3;
    --everforest-lightmed-bg1: #F4F0D9;
    --everforest-lightmed-bg2: #EFEBD4;
    --everforest-lightmed-bg3: #E6E2CC;
    --everforest-lightmed-bg4: #E0DCC7;
    --everforest-lightmed-bg5: #BDC3AF;
    --everforest-lightmed-bg-visual: #EAEDC8;
    --everforest-lightmed-bg-red: #FDE3DA;
    --everforest-lightmed-bg-yellow: #FAEDCD;
    --everforest-lightmed-bg-green: #F0F1D2;
    --everforest-lightmed-bg-blue: #E9F0E9;
    --everforest-lightmed-bg-purple: #FAE8E2;
    --everforest-lightmed-fg: #5C6A72;
    --everforest-lightmed-red: #F85552;
    --everforest-lightmed-orange: #F57D26;
    --everforest-lightmed-yellow: #DFA000;
    --everforest-lightmed-green: #8DA101;
    --everforest-lightmed-aqua: #35A77C;
    --everforest-lightmed-blue: #3A94C5;
    --everforest-lightmed-purple: #DF69BA;
    --everforest-lightmed-grey0: #A6B0A0;
    --everforest-lightmed-grey1: #939F91;
    --everforest-lightmed-grey2: #829181;
    --everforest-lightmed-statusline1: #93B259;
    --everforest-lightmed-statusline2: #708089;
    --everforest-lightmed-statusline3: #E66868;



    --rosepine-moon-base: #232136;
    --rosepine-moon-surface: #2a273f;
    --rosepine-moon-overlay: #393552;
    --rosepine-moon-muted: #6e6a86;
    --rosepine-moon-subtle: #908caa;
    --rosepine-moon-text: #e0def4;
    --rosepine-moon-love: #eb6f92;
    --rosepine-moon-gold: #f6c177;
    --rosepine-moon-rose: #ea9a97;
    --rosepine-moon-pine: #3e8fb0;
    --rosepine-moon-foam: #9ccfd8;
    --rosepine-moon-iris: #c4a7e7;
    --rosepine-moon-highlight-low: #2a283e;
    --rosepine-moon-highlight-med: #44415a;
    --rosepine-moon-highlight-high: #56526e;



    --rosepine-dawn-base: #faf4ed;
    --rosepine-dawn-surface: #fffaf3;
    --rosepine-dawn-overlay: #f2e9e1;
    --rosepine-dawn-muted: #9893a5;
    --rosepine-dawn-subtle: #797593;
    --rosepine-dawn-text: #575279;
    --rosepine-dawn-love: #b4637a;
    --rosepine-dawn-gold: #ea9d34;
    --rosepine-dawn-rose: #d7827e;
    --rosepine-dawn-pine: #286983;
    --rosepine-dawn-foam: #56949f;
    --rosepine-dawn-iris: #907aa9;
    --rosepine-dawn-highlight-low: #f4ede8;
    --rosepine-dawn-highlight-med: #dfdad9;
    --rosepine-dawn-highlight-high: #cecacd;


    /*fallback in case the browser doesn't support has*/
    --mycss-custom-main-color: var(--catppuccin-macchiato-maroon);
	--mycss-custom-border: var(--mycss-custom-main-color);
	--mycss-custom-text: var(--catppuccin-macchiato-text);
	--mycss-custom-text-light: var(--catppuccin-macchiato-lavender);
	--mycss-custom-bg: var(--catppuccin-macchiato-base);
	--mycss-custom-accent-bg: var(--catppuccin-macchiato-surface0);
	--mycss-custom-accent: var(--catppuccin-macchiato-rosewater);
	--mycss-custom-code: var(--catppuccin-macchiato-flamingo);
	--mycss-custom-code-bg: var(--catppuccin-macchiato-surface1);
	--mycss-custom-disabled: var(--catppuccin-macchiato-yellow);


}


body:has([value=catppuccin-macchiato]:checked) {
    --mycss-custom-main-color: var(--catppuccin-macchiato-maroon);
	--mycss-custom-border: var(--mycss-custom-main-color);
	--mycss-custom-text: var(--catppuccin-macchiato-text);
	--mycss-custom-text-light: var(--catppuccin-macchiato-lavender);
	--mycss-custom-bg: var(--catppuccin-macchiato-base);
	--mycss-custom-accent-bg: var(--catppuccin-macchiato-surface0);
	--mycss-custom-accent: var(--catppuccin-macchiato-rosewater);
	--mycss-custom-code: var(--catppuccin-macchiato-flamingo);
	--mycss-custom-code-bg: var(--catppuccin-macchiato-surface1);
	--mycss-custom-disabled: var(--catppuccin-macchiato-yellow);
	/* --mycss-custom-marked: var(--catppuccin-macchiato-maroon);
	--mycss-custom-preformated: var(--catppuccin-macchiato-maroon); */
}

body:has([value=everforest-dark-med]:checked) {
    --mycss-custom-main-color: var(--everforest-darkmed-orange);
	--mycss-custom-border: var(--mycss-custom-main-color);
	--mycss-custom-text: var(--everforest-darkmed-fg);
	--mycss-custom-text-light: var(--everforest-darkmed-blue);
	--mycss-custom-bg: var(--everforest-darkmed-bg0);
	--mycss-custom-accent-bg: var(--everforest-darkmed-bg1);
	--mycss-custom-accent: var(--everforest-darkmed-purple);
	--mycss-custom-code: var(--everforest-darkmed-green);
	--mycss-custom-code-bg: var(--everforest-darkmed-bg-purple);
	--mycss-custom-disabled: var(--everforest-darkmed-grey2);
	/* --mycss-custom-marked: var(--everforest-darkmed-yellow);
	--mycss-custom-preformated: var(--everforest-darkmed-aqua); */
}

body:has([value=everforest-light-med]:checked) {
   	--mycss-custom-main-color: var(--everforest-lightmed-orange);
	--mycss-custom-border: var(--mycss-custom-main-color);
	--mycss-custom-text: var(--everforest-lightmed-fg);
	--mycss-custom-text-light: var(--everforest-lightmed-blue);
	--mycss-custom-bg: var(--everforest-lightmed-bg0);
	--mycss-custom-accent-bg: var(--everforest-lightmed-bg1);
	--mycss-custom-accent: var(--everforest-lightmed-purple);
	--mycss-custom-code: var(--everforest-lightmed-green);
	--mycss-custom-code-bg: var(--everforest-lightmed-bg5);
	--mycss-custom-disabled: var(--everforest-lightmed-grey2);
	/* --mycss-custom-marked: var(--everforest-lightmed-yellow);
	--mycss-custom-preformated: var(--everforest-lightmed-aqua); */
}

body:has([value=rosepine-moon]:checked) {
   	--mycss-custom-main-color: var(--rosepine-moon-rose);
	--mycss-custom-border: var(--mycss-custom-main-color);
	--mycss-custom-text: var(--rosepine-moon-text);
	--mycss-custom-text-light: var(--rosepine-moon-subtle);
	--mycss-custom-bg: var(--rosepine-moon-base);
	--mycss-custom-accent-bg: var(--rosepine-moon-surface);
	--mycss-custom-accent: var(--rosepine-moon-love);
	--mycss-custom-code: var(--rosepine-moon-iris);
	--mycss-custom-code-bg: var(--rosepine-moon-overlay);
	--mycss-custom-disabled: var(--rosepine-moon-muted);
	/* --mycss-custom-marked: var(--rosepine-moon-rose);
	--mycss-custom-preformated: var(--rosepine-moon-rose); */
}

body:has([value=rosepine-dawn]:checked) {
   	--mycss-custom-main-color: var(--rosepine-dawn-rose);
	--mycss-custom-border: var(--mycss-custom-main-color);
	--mycss-custom-text: var(--rosepine-dawn-text);
	--mycss-custom-text-light: var(--rosepine-dawn-gold);
	--mycss-custom-bg: var(--rosepine-dawn-base);
	--mycss-custom-accent-bg: var(--rosepine-dawn-surface);
	--mycss-custom-accent: var(--rosepine-dawn-love);
	--mycss-custom-code: var(--rosepine-dawn-iris);
	--mycss-custom-code-bg: var(--rosepine-dawn-overlay);
	--mycss-custom-disabled: var(--rosepine-dawn-muted);
	/* --mycss-custom-marked: var(--rosepine-dawn-rose);
	--mycss-custom-preformated: var(--rosepine-dawn-rose); */
}



@font-face {
	font-family: "Anka/Coder";
	src: url(../fonts/AnkaCoder-r.woff2) format("woff2"),
		url(../fonts/AnkaCoder-r.woff) format("woff"),
		url(../fonts/AnkaCoder-r.ttf) format("truetype");
	font-style: normal;
}
@font-face {
	font-family: "Anka/Coder";
	src: url(../fonts/AnkaCoder-b.woff2) format("woff2"),
		url(../fonts/AnkaCoder-b.woff) format("woff"),
		url(../fonts/AnkaCoder-b.ttf) format("truetype");
	font-style: normal;
	font-weight: bold;
}

@font-face {
	font-family: "Anka/Coder";
	src: url(../fonts/AnkaCoder-i.woff2) format("woff2"),
		url(../fonts/AnkaCoder-i.woff) format("woff"),
		url(../fonts/AnkaCoder-i.ttf) format("truetype");
	font-style: italic;
}


@font-face {
	font-family: "Anka/Coder";
	src: url(../fonts/AnkaCoder-i.woff2) format("woff2"),
		url(../fonts/AnkaCoder-i.woff) format("woff"),
		url(../fonts/AnkaCoder-i.ttf) format("truetype");
	font-style: italic;
	font-weight: bold;
}



body{
  	color:var(--mycss-custom-text);
  	background-color:var(--mycss-custom-bg);
	font-family: "Anka/Coder";
	font-size: 1.125em;
	line-height: 1.25;
	& > header{
        & > nav{
            max-inline-size: 50em;
            margin-inline: auto auto;
            color: var(--mycss-custom-border);
            border: solid var(--mycss-custom-border);
            border-radius: 12px;
            height: 45px;
            & > ul{
                display: flex;
                list-style-type: none;
                text-align: center;
                padding: 0;
                margin-top: 0.6em;
                    & > li{

                        flex: 100%;
                            &> a{
                                color: var(--mycss-custom-border);
                                text-decoration: underline;
                                &:hover{
                                    color: var(--mycss-custom-accent);
                                }
                    }
                }
                @media(max-width: 768px){
                       flex-direction: column;
                       line-height: 3.5;
                       margin-top: 1em;
                }
            }
            @media(max-width: 768px){
                   min-height: min-content;
            }
        }
	}
	& > footer{
        /*text-align: center;*/
	}
	@media(max-width: 768px){
        max-width: 100vw;
    }
}


a{
    color:var(--mycss-custom-accent);
    text-decoration: none;
    &:hover{
        color:var(--mycss-custom-border);
        transition: 0.25ms;
    }
}


.container {
    max-width: 50em;
    margin: auto;
    @media(max-width: 768px){
        max-width: 100vw;
    }
}


pre {
    background-color: var(--mycss-custom-code-bg) !important;
    margin: auto;
    /*color: var(--mycss-custom-code);*/
    border-style: solid;
	border-radius: 12px;
	border-color: var(--mycss-custom-code-bg);
    counter-reset: line;
    & > code >span > span{
        white-space: pre-line;
        color: var(--mycss-custom-code);
        word-wrap: break-word;
        max-width: 100%;
        counter-increment: line;
        &::before{
            white-space: pre-line;
            color: var(--mycss-custom-text-light);
            max-width: 100%;
            content: counter(line) ": ";
        }
    }
}

/*table {
	border-collapse: collapse;
}*/


/*td,
th {
	border: 1px solid var(--mycss-custom-border);
	text-align: left;
}*/


/*th {
	background-color: var(--mycss-custom-accent-bg);
}*/

/*table.imgsrc,
table.imgsrc>tbody>*,
table.imgsrc>tbody>*>* {
	border: none;
	margin: auto;
	text-align: center;
	vertical-align: middle;
}*/