/* === Custom Styling === */

/* Get borders on all elements for debugging */
/*
* {border: thin solid #f0f; }
*/

/*
Look up colors on eg.
https://www.w3schools.com/colors/colors_hex.asp
*/

:root{
        --back: darkkhaki;
        --text: mediumpurple;
        --link: darkviolet;
        --code: lime;
        --mute: green;
        --edge: transparent;
}

/* Change the side of sidebar */

:root {
  --siderbar-width: 200px;
}


body {
    font-family: sans-serif;
}

h1, h2, h3{
    font-family: sans-serif;
}

.description {
    font-style: italic;
}

/* Menu Styling with colored boxes */
/*
nav li a,
nav li a:visited {
	background: var(--link);
	color: var(--back);
	padding: 0.2rem 0.5rem;
}

nav li a:hover {
	text-decoration: none;
	background: var(--text);
}
*/

header nav ul li {
    margin: 0.5rem 0;
}


/* --- Gallery --- */

 /* Turn off grid, and show each image full width.*/
 main .projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1rem;
    margin-bottom: 2rem;
}

main .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 1rem;
    margin-bottom: 2rem;
}

html:has(main#diary_2026)  {
display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    grid-gap: 1rem;
    margin-bottom: 2rem;

 }

 html:has(main#collagework)  {
display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    grid-gap: 1rem;
    margin-bottom: 2rem;

 }

 html:has(main#waltzwithgrandfather)  {
display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    grid-gap: 1rem;
    margin-bottom: 2rem;

 }

main .gallery a img {
    object-fit: initial;
    aspect-ratio: initial;
}


html:has(main#imagined_family)  {
background-color: black;
color: darkkhaki;
 --link: khaki

 }

 html:has(main#waltzwithgrandfather)  {
background-color: darkkhaki;
color: mediumpurple;

 }

 html:has(main#collagework)  {
background-color: darkkhaki;
color: mediumpurple;

 }

 html:has(main#diary_2026)  {
background-color: darkkhaki;
color: mediumpurple;

 }

 main#push_start .gallery {

display: initial;

 }