/* Always use border box sixing. */
*,
::before,
::after {
    box-sizing: border-box;
}

/* Variables. */
:root {
    font-size: clamp(1rem, 0.5svw + 0.8em, 1.225rem);

    /* @media (prefers-color-scheme: light) { */
	--background-color:		#faf9f5;
	--foreground-color:		#000000;
	--foreground-lighter-1:	        #4d4d4d;
	--foreground-lighter-2:	        #7d7d7d;
    /* } */
    
    /* @media (prefers-color-scheme: dark) { */
    /* 	--background-color:		#0a0905; */
    /* 	--foreground-color:		#faf9f5; */
    /* 	--foreground-lighter:	        #7d7d7d; */
    /* } */
    
    --column-width: clamp(550px, 35em, 700px);
}

/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,19,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* :root { */
/*   --step--2: clamp(0.76rem, 0.7899rem + -0.0386vw, 0.7813rem); */
/*   --step--1: clamp(0.9375rem, 0.9324rem + 0.0227vw, 0.95rem); */
/*   --step-0: clamp(1.185rem, 1.0994rem + 0.1136vw, 1.1875rem); */
/*   --step-1: clamp(1.35rem, 1.295rem + 0.2443vw, 1.4844rem); */
/*   --step-2: clamp(1.62rem, 1.5237rem + 0.4281vw, 1.8555rem); */
/*   --step-3: clamp(1.944rem, 1.7905rem + 0.6824vw, 2.3193rem); */
/*   --step-4: clamp(2.3328rem, 2.1011rem + 1.0298vw, 2.8992rem); */
/*   --step-5: clamp(2.7994rem, 2.462rem + 1.4993vw, 3.624rem); */
/* } */

/* Top margin only if not the first child. */
.stack > * + * {
    margin-block-start: 1.5em;
}

/* Setting global settings (by removing user-agent defaults). */
body {
    margin: unset;
    font-family: P052, serif;
    line-height: 1.3;
    color: var(--foreground-color);
    background-color: var(--background-color);
}

/*



Vague cut-off.



*/

/* Contains all content. */
.main-container {
    display: flex;
    flex-direction: column;
    min-block-size: 100svh;
    padding: 0 0.3em;
}

/* Page header. */
header {
    div {
	max-inline-size: var(--column-width);
	margin-inline: auto;
	padding: 1em 0rem 0;
	@media (pointer: fine) {
	    padding: 1em 0.5rem;
	}
	/* @media (min-width: 560px) { */
	/*     padding-bottom: 2em; */
	/* } */
	/* background-color: purple; */
    }
    nav {
	/* background-color: blue; */
    }
    ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: unset;
	margin: unset;
	list-style: none;
	/* background-color: green; */
	li {
	    flex: 1;
	    text-align: center;
	    /* background-color: orange; */
	    padding: 0.1em;
	    .nav-clickable {
		background-color: yellow;
		padding: 0 3em;
	    }
	    a {
		display: block;
		@media (pointer: fine) {
		    display: table;
		    margin-inline: auto;
		}
		padding: 0.5em 1em;
		text-decoration: unset;
		text-transform: lowercase;
		color: var(--foreground-lighter-2);
		/* background-color: red; */

		&.current {
		    color: var(--foreground-color);
		}

		&:hover {
		    text-decoration: underline;
		}
	    }
	}
    }
}

/* The container that includes the content besides the page header, i.e. the main content and the footer. */
.container {
    flex: 1;
    max-inline-size: var(--column-width);
    margin-inline: auto;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
}

/* Section specific settings. */
main {
    /* font-size: var(--step-0); */
    padding: 0em 1rem 1em;
    flex: 1;
}

.main-body {
    /* padding: 0 0.15rem; */
}
 
footer {
    text-align: center;
    flex: 0 0 0em;
    color: var(--foreground-lighter-2);
    padding-bottom: 0.7em;
    a {
	text-decoration: underline;
	color: inherit;
	&:hover {
	    color: var(--background-color);
	    background-color: var(--foreground-lighter-2);
	    text-decoration: unset;
	}
    }
}

/*



Second vague cut-off.



*/

/* Element specific settings. */
h1 {
    /* font-size: var(--step-4); */
    margin-top: 0.8em;
    font-size: 1.9rem;
    &:not(.post) {
        text-align: center;
    }
}

h1.post {
    margin-bottom: 0.5rem;
}

.post-date {
    margin-top: 0;
    margin-bottom: 2.2em;
    color: var(--foreground-lighter-1);
    font-size: 0.95rem;
}


h2 {
    /* font-size: var(--step-2); */
    font-size: 1.3rem;
}

h3 {
    /* font-size: var(--step-0); */
    margin: 0;
}

footer p {
    margin: 0;
}

.small {
    font-size: 0.875rem;
}

.posts-list {
    padding: unset;
    margin: unset;
    list-style: none;
    line-height: 1.6;
    time {
	padding-right: 1em;
    }
    li {
	display: flex;
    }
}

ul {
    padding-left: 1.3em;
}

hr {
  border: none;
  border-top: 3px double #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
    background: var(--background-color);
    content: "//";
    padding: 0 4px;
    position: relative;
    top: -12px;
}

.final-line {
    /* margin-top: 4em; */
    padding-bottom: 2em;
}

.post-tags {
    margin-bottom: 0;
    color: var(--foreground-lighter-1);
}

.main-bottom {
    margin-top: 4em;
}

.adjacent {
    color: var(--foreground-lighter-1);
}

.pgp-key {
    max-height: 20em;
    overflow: auto;
}


/* @media (min-width: 560px) { */
/*     h1 { */
/* 	font-size: 2.25rem; */
/*     } */
/* } */














.tags {
    list-style: none;
    padding-left: 0;
    display: inline-block;
    li {
	display: inline-block;
    }
}

.keyword, .tags {
    text-decoration: unset;
    color: var(--foreground-lighter-1);
    font-size: 0.75rem;

    &:hover {
	color:blue;
    }
}


/* .copyright-notice { */
/*     color: var(--foreground-lighter); */
    
/*     :link, :visited { */
/* 	color: unset; */
/*     } */
    
/*     :hover { */
/* 	color: orange; */
/* 	text-decoration: unset; */
/*     } */
/* } */