@import url(highlight.css);

:root {
	/*
	x % 4 == 0 -> lightest
	x % 4 == 3 -> darkest
	4 to 7 and 12 to 15 are a bit lighter gradient
	 */
	--color-0: #f0f0f0; /* nav toggle label */
	--color-1: #bdbdbd;
	--color-2: #737373;
	--color-3: #000000; /* main bg */

	--color-4: #f7fcf5;
	--color-5: #ed7368;  /* a */
	--color-6: #ba0101; /* hr start, end */
	--color-7: #238b45;

	--color-8: #fde0dd;
	--color-9: #fa9fb5;
	--color-10: #131313; /* header bg, hr middle */
	--color-11: #7a0177;

	--color-12: #fff7fb; /* text */
	--color-13: #d0d1e6;
	--color-14: #B2182B; /* a:hover, code block border */
	--color-15: #02818a;

	--color-16: #020202; /* darker then color-0, bg for code blocks */
}

*, *::before, *::after {
	width: 96vw;
	box-sizing: border-box;
	max-width: 100vw;;
}

a {
	text-decoration: none;
	color: var(--color-5);
}

a:hover {
	color: var(--color-14);
}

body {
	grid-template-rows: 10% auto 15%;
	margin: 0 auto;
	background: var(--color-3);
	font-family: 'Overpass', sans-serif;
	text-align: center;
	word-wrap:break-word;
}

hr {
	margin-bottom: 2em;
	width: 70%;
	border: 0;
	height: 1px;
	background: #333;
	background-image: linear-gradient(to right, var(--color-3), var(--color-10), var(--color-3));
}

.highlight pre{
	font-family: 'Fira Mono', monospace;
	background-color: var(--color-16);
	border: 2px solid var(--color-14);
	padding: 1em;
	white-space: pre-wrap;
	word-wrap:break-word;
	text-align: left;
}

div.tags-group {
	font-family: 'Fira Mono', monospace;
	font-size: 1em;
	background-color: var(--color-16);
	border: 2px solid var(--color-14);
	padding: 1em;
	color: #d0d0d0;
	text-align: left;
}

div.tags-group div.tag {
	width: 100%;
}

div.row {
	margin-left: 2vw;
}

.content {
	color: var(--color-12);
	grid-row: 2;
	padding-top: 6em;
	padding-bottom: 3em;
	background-color: var(--color-3);
	display: grid;
	place-items: start center;
}

.content .row img {
	border: 2px solid var(--color-14);
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:100%;
}

/* post title */
.card-title {
	font-size: 2em;
}

.title-date {
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.title-date li.date {
	display:none;
}

.tags-date-list {
	display: none;
}

header {
	grid-row: 1;
	height: 2.5em;
	background: var(--color-10);
	position: fixed;
	z-index: 999;
	width: 100%;
	text-transform: lowercase;
}

.fas {
  color: var(--color-12);
}

.fas:hover {
	color: var(--color-14);
}

.nav-toggle {
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
	outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 1em;
	height: 100%;
	width: 3em;
	display: flex;
	align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
	display: block;
	background: var(--color-0);
	height: 1px;
	width: 2em;
	border-radius: 2px;
	position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
	content: '';
	position: absolute;
}

.nav-toggle-label span::before {
	bottom: 7px;
}

.nav-toggle-label span::after {
	top: 7px;
}

nav ul.buttons-desktop {
	display: none;
}

ul.buttons-mobile {
	width: 95%;
	display: flex;
	justify-content: flex-end;
}

ul.buttons-mobile i {
	width: 2em;
	display: flex;
	justify-content: flex-end;
}

nav {
	position: absolute;
	text-align: left;
	top: 100%;
	left: 0;
	width: 100%;
	transform: scale(1, 0);
	transform-origin: top;
	transition: transform 400ms ease-in-out;
	background: var(--color-10);
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	margin-bottom: 1em;
	margin-left: 1em;
}

nav a {
	color: var(--color-12);
	text-decoration: none;
	font-size: 1rem;
	opacity: 0;
	transition: opacity 150ms ease-in-out;
}

nav a:hover {
	color: var(--color-14);
}

.nav-toggle:checked ~ nav {
	transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
	opacity: 1;
	transition: opacity 250ms ease-in-out 250ms;
}

/* headroom */

.headroom--pinned {
	display: block;
}
.headroom--unpinned {
	display: none;
}

/* headroom animation */

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(-100%);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes slideDown {
  0% {
    -o-transform: translateY(-100%);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.animated.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown;
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-100%);
  }
}
@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0);
  }

  100% {
    -moz-transform: translateY(-100%);
  }
}
@-o-keyframes slideUp {
  0% {
    -o-transform: translateY(0);
  }

  100% {
    -o-transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.animated.slideUp {
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -o-animation-name: slideUp;
  animation-name: slideUp;
}

.animated {
  -webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
       -o-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
  will-change: transform, opacity;
}

/* desktop screen */
@media screen and (min-width: 800px) {

	*, *::before, *::after {
		width: unset;
	}

	.content .row {
		width:75%;
	}

	.nav-toggle-label {
		display: none;
	}

	header {
		height: 2.5em;
		/* grid-template-columns: 17% 40% auto 10% 10%; */
	}

	body {
		text-align: unset;
	}

	nav {
		all: unset;
		grid-template-columns: 9% auto 10% 12%;
		display: grid;
		list-style-type: none;
		align-items: center;
	}

	nav ul {
		all: unset;
		padding-top: 0.7em;
		text-align: left;
	}

	nav ul.links {
		grid-column: 2;
	}

	nav ul.buttons-desktop {
		display: unset;
		grid-column: 3;
		text-align: right;
		cursor: pointer;
	}

	nav li {
		all: unset;
		margin-left: 3em;
		margin-bottom: 0;
	}

	nav a {
		opacity: 1;
		position: relative;
	}

	ul.buttons-mobile {
		display: none;
	}

	div.row {
		margin-left: unset;
	}

	.tags-date-list {
		all: unset;
		display: flex;
		list-style-type: none;
		padding: 0;
		margin: 0;
		justify-content: flex-end;
	}

	.title-date li.date {
		display: unset;
	}
}