@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap');
    
    :root {
		--bg: #FFD94D;
		--ink:#4E0000;
		--be-yellow:#FFD94D; /* primary highlight */
		--be-blue:#2E5CFF;   /* accent */
		--be-red:#E63946;    /* accent */
		--muted:#441818;
		--card:#FFFFcc;
		--radius:12px;
		--max-width:1100px;
		--serif: 'Caprasimo', Georgia, serif;
		--sans: 'Spline Sans Mono', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }

    html,body {
		height:100%
		
	}

    body {
   		background:var(--bg);
		color:var(--ink);

        margin: 1em auto;
        padding: 2em;
		max-width: 1000px;
		font-family:var(--sans);
		line-height:1.55;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		font-weight: 400;
		letter-spacing: -0.1px;
	}

	table {
		width: 100%;
		font-size: 1rem !important;
	}
	
	tr {
	}
	
	th {
		border-bottom: 2px solid var(--muted);
		font-family: var(--serif);
		font-size:1.25rem;
		font-weight: 400;
		margin: 0px 0px 2px 0px;
		display: table-cell;
	}
	
	td {
		padding: .75em 1.5em;
		border-bottom: 1px solid var(--ink);
		text-align: left;
		margin: 0px;
		display: table-cell;
	}
	    
    .container {
		max-width:var(--max-width);margin:36px auto;padding:0 20px;
	}

    .card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 6px 18px rgba(33,37,41,0.04);border:1px solid rgba(0,0,0,0.03)}

    /* features */
    .features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
    .feature h3{margin:0 0 8px 0;font-family:var(--serif);color:var(--be-red);font-size:18px}
    .feature p{margin:0;color:var(--muted);font-size:13px}
    .feature code{font-size: smaller;}

	h1, h2, h3 {
		font-family: var(--serif);
		font-weight: 500;
	}

    h2 { 
		margin: 2vh 0 .75vh !important; 
	}

    h3 { 
		font-weight: 400 !important;
		margin: 1.5vh 0 .5vh !important; 
	}
    
    code, pre {
		font-size: 1.4em;
		display: inline-block;
		background-color: khaki;
		padding: 1px 3px;
		border-radius: 5px;
    }
    
    pre {
		display: inline-flex;
		padding: 1em !important;
		font-size: 90%;
		width: inherit;
    }
    
    #topimg { width:100%; border: none; }
    #callout { font-size: 110%; font-weight: bold; font-style: italic; color: red; }
    #bettyCooperPic { float: right; padding: 0 0 1vh 1vh; display: inline-block;}
    
    nav {
		border-top: 2px solid var(--ink);
		border-bottom: 2px solid var(--ink);
		padding: .75em;
		text-align: right;
		font-size: 1rem;
    }
    
    footer {
		margin-top:40px;
		padding:28px 0;
		border-top:1px solid rgba(0,0,0,0.03);
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap:12px;
		font-size:14px
	}

	li { margin-bottom: .75em; }
	li > ol > li { margin-bottom: .5em; }

	td > code { font-size: 100%; }

	@media screen and (max-width: 1024px) {
		body {
			width: 800px !important;
			font-size: 2rem;
		}
	}

	@media screen and (max-width: 768px) {
		body {
			width: 700px !important;
			font-size: 2rem;
		}
	}

	@media screen and (max-width: 468px) {
		body {
			width: 430px !important;
			font-size: 2rem;
		}
	}

	@media screen and (max-width: 360px) {
		body {
			width: 300px !important;
			font-size: 2rem;
		}
	}