:root {
    --background-color:#f2fff8;
    --background: var(--background-color) url(https://kalechips.net/assets/backgrounds/rice-paper.png) fixed;
    --color:#1e2b25;
    
    --nav:#8c2314;
    --navhover:#cc3f24;
    
    --link:#8c2314;
    --linkhover:#cc3f24;
    
    --accent:#8c2314;
    --hr:#cc3f24;
    
    --headerfont: "Century Gothic", Futura, sans-serif;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --background-color:#24312e;
        --background: var(--background-color) url(https://kalechips.net/assets/backgrounds/otis-redding.png) fixed;
        --color:#d5e4dd;
        
        --nav:#9acb3d;
        --navhover:#c6f370;
        
        --link:#9acb3d;
        --linkhover:#c6f370;
        
        --accent:#c6f370;
        --hr:#8ed20c;
        
        --headerfont: "Century Gothic", Futura, sans-serif;
    }
}

* { margin:0; padding:0;  transition:color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; }
img { max-width:100%; height:auto; }

body {
    background:var(--background);
    color:var(--color);
    font:1.05rem Tahoma, Arial, sans-serif;
    line-height:1.5;
    letter-spacing:0.2px;
}

header {
    background:url(banner.webp) no-repeat center;
    background-size:100%;
    height:300px;
}

.pagetitle {
    position:relative;
    top:60%;
    right:-50%;
    display:inline-block;
}

#container {
    max-width:900px;
    width:calc(100% - 40px);
    margin:auto;
    display:flex;
    flex-wrap:wrap;
}

#sidebar {
    padding:15px;
    margin-top:10px;
    flex: 1 1 calc(20% - 30px);
}

.menu {
    position:sticky;
    top:10px;
}

.menu h2 {
    font: 1.5em var(--headerfont);
}

.menu li {
    list-style:none;
    display:block;
    font:1.4rem var(--headerfont);
}

.menu a {
    display:block;
    text-decoration:none;
    padding:10px;
    background:var(--nav);
    color:var(--background-color);
    margin-bottom:5px;
    border-radius:5px;
}

.menu a:hover {
    background:var(--navhover);
}

main {
    padding:15px;
    flex: 1 1 calc(80% - 30px);
}

main p, footer p {
    margin: .5em 0 .5em 0;
}

main a, footer a {
    color:var(--link);
}

main a:hover, footer a:hover {
    color:var(--linkhover);
}

p a img {
    border: 3px solid var(--link);
    transition:0.4s ease;
}

p a:hover img {
    border: 3px solid var(--linkhover);
    transition:0.4s ease;
}

main li {
    margin-left:30px;
}

main h1 {
    font: 2em var(--headerfont);
    font-weight:bold;
    border-bottom: 3px dotted var(--hr);
    margin-bottom:5px;
}

main h1::first-letter {
    font-size:1.1em;
    color:var(--accent);
}

main h2 {
    font: 1.8em var(--headerfont);
    margin-bottom:5px;
}

main h3 {
    font:1.5em var(--headerfont);
    margin-bottom:5px;
}

main summary {
    cursor:pointer;
    margin: 5px 0px 5px 0px;
}

main details {
    padding:10px;
    background:rgb(0,0,0,0.06);
    margin:5px 0 5px 0;
    border-radius:5px;
}


footer {
    text-align:center;
    font-size:.9em;
    flex: 1 1 calc(100% - 20px);
    padding:10px;
    border-top:2px dotted var(--hr);
}

.gridcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
    margin:auto;
}

.btn {
    margin:0.5em;
    display:inline-block;
    text-decoration:none;
    padding:10px;
    background:var(--nav);
    color:var(--background-color);
    border-radius:5px;
}

.btn:hover {
    background:var(--navhover);
    color:var(--background-color);
}

ul.nobullets {
    list-style-type:"";
}

ul.nobullets li {
    margin: 5px 0 5px 0;
}

ul.inline li {
    display:inline-block;
}

.icons {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
	grid-gap:10px;
}

.card {
	padding:10px;
	text-align:center;
	transition:0.5s ease;
}

.card img {
    border-radius:100%;
    transition: 0.5s ease;
    margin:5px;
}

.card a:hover img {
	box-shadow:5px 5px 0 var(--accent);
    transition:0.5s ease;
}

.card a {
	text-decoration:none;
	color:var(--link);
}

.card:hover a, .card a:focus {
    color:var(--linkhover);
}

.title {
	font:1.25em var(--headerfont);
}

.subject {
	font-size:0.9em;
	font-style:italic;
}

.tabwrap > section {
	display: none;
}

.tabwrap > section:target {
	display:block;
}

.visually-hidden {  
    position: absolute;
    clip: rect(0 0 0 0);
    visibility: hidden;
    opacity: 0;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--background);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@media screen and (max-width:799px) {
	header {
        height:200px;
        display:flex;
        justify-content:center;
        align-items:flex-end;
    }
    
    .pagetitle {
        width:60%;
        max-width:350px;
        top:35%;
        right:0;
        margin:auto;
    }
    
    #container {
        display:block;
    }
    
    #sidebar {
        text-align:center;
        margin:0;
        padding:10px;
    }
    
    .menu {
        position:relative;
    }
    
    .menu li, .menu a {
        display:inline-block;
        padding:5px;
        margin:0;
    }
    
    .flexcontainer {
        display:block;
    }
}