/* Gruvbox colors from https://github.com/YV31/gruvbox-css/ */
/* No light mode (yet) as it does not look good */
:root {
	--bg-primary:     #282828;
	--bg-secondary:   #3C3836;
	--text-primary:   #FBF1C7;
	--text-secondary: #EBDBB2;
	--highlight:      #B8BB26;

	--red:    #FB4934;
	--green:  #B8BB26;
	--yellow: #FABD2F;
	--blue:   #83A598;
	--purple: #D3869B;
	--aqua:   #8EC07C;
	--gray:   #928374;
	--orange: #FE8019;

	--red-dim:    #CC2412;
	--green-dim:  #98971A;
	--yellow-dim: #D79921;
	--blue-dim:   #458588;
	--purple-dim: #B16286;
	--aqua-dim:   #689D6A;
	--gray-dim:   #A89984;
	--orange-dim: #D65D0E;

	--ff-mono: "PixelCode", monospace;

	--corner-radius: 6px; /* will be used everywhere for consistency */
}

@font-face {
  font-family: 'PixelCode';
  src: url('/fonts/PixelCode/PixelCode.mini.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PixelCode';
  src: url('/fonts/PixelCode/PixelCode-Bold.mini.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'PixelCode';
  src: url('/fonts/PixelCode/PixelCode-Italic.mini.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'PixelCode';
  src: url('/fonts/PixelCode/PixelCode-Bold-Italic.mini.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

/* Markup for links that still looks like a link but fits the Gruvbox theme */
a {
	color: var(--blue);
}
a:hover {
	color: var(--blue-dim);
}


/* Layout of the main body */
body {
	max-width: 1000px;
	margin: 0 auto; /* Center it horizontally */
	padding: 1em 3em; /* Some padding for smaller windows */
	color: var(--text-primary);
	background-color: var(--bg-primary);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header nav {
	background-color: var(--bg-secondary);
	border-radius: var(--corner-radius);
	padding: 0.5em 0.8em;
	font-size: large;
}

h1 {
	color: var(--green);
	padding: 0 3em 0 0;
}
h2 {
	color: var(--yellow);
	padding: 1em 0 0 0;
}


code {
	background: var(--bg-secondary);
	border-radius: var(--corner-radius);
	padding: 0.2em 0.4em;
}
pre {
    background: var(--bg-secondary);
	border-radius: var(--corner-radius);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
	font-family: var(--ff-mono);
}

/* For booklist */
.title {
	display: flex;
	align-items: center;
}

.title h2 {
	margin: 0;
	padding: 0;
}

.title a {
	color: var(--yellow);
	text-decoration: none;
}

.title a:hover {
	color: var(--yellow-dim);
}

.title .share-button {
	margin-left: auto;
	background: var(--bg-secondary);
	border-radius: var(--corner-radius);
	border: none;
	padding: 0.4em;
	cursor: pointer;
	height: 1.8rem;
	width: 1.8rem;
	display: flex;
	align-items: center;
}

.share-button:hover svg {
	fill: var(--blue-dim);
}

.share-button svg {
	height: 100%;
	fill: var(--blue);
}

.booklist {
	list-style-type: "";
	padding: 1em;
}

.booklist li {
	border-left: 6px solid var(--bg-secondary);
	border-radius: var(--corner-radius);
	padding: 0.5em 0 0.5em 1em;
	margin: 1.5em 0;
}

.description {
	font-style: italic;
}

.details {
	color: var(--text-secondary);
	font-style: italic;
	font-size: 80%;
}

.details a {
	color: var(--text-secondary);
}

details {
	margin-bottom: 1em;
}

details p {
	padding-left: 1em;
	margin-top: 0em;
}

.recommend {
	margin-bottom: 0;
}

.concern {
	background-color: rgb(from var(--red) r g b / 0.15);
	padding: 0.2em 1em;
	border-radius: var(--corner-radius);
}

a .concern {
	padding: 0.1em 0.3em;
}


/* Classes for code snippets */
.red    { color: #FB4934; }
.green  { color: #B8BB26; }
.yellow { color: #FABD2F; }
.blue   { color: #83A598; }
.purple { color: #D3869B; }
.aqua   { color: #8EC07C; }
.gray   { color: #928374; }
.orange { color: #FE8019; }

.red-dim    { color: #CC2412; }
.green-dim  { color: #98971A; }
.yellow-dim { color: #D79921; }
.blue-dim   { color: #458588; }
.purple-dim { color: #B16286; }
.aqua-dim   { color: #689D6A; }
.gray-dim   { color: #A89984; }
.orange-dim { color: #D65D0E; }

.bold { font-weight: bold; }

/* Small fixes for mobile */
@media (max-width: 600px) {
	body {
		padding: 1em;
	}

	.header {
		flex-direction: column;
		align-items: flex-start;
	}
}