:root {
   --color-light: #ecf0f1;
   --color-dark: #050620;
}

body {
   height: 100%;
   font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background: #ecf0f1;
   color: #050620;
   box-sizing: border-box;
}

::-moz-selection {
  background-color: rgba(5,6,32,1);
	color: #ecf0f1;
}
::selection {
	background-color: rgba(5,6,32,1);
	color: #ecf0f1;
}

body.snippets {
	height: auto;
	background: #050620;
	background: -webkit-radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  background:    -moz-radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  background:         radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  color: #ecf0f1;
  font-size: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  padding-bottom: 40px;
}

/* TODO: Suitable snippet setup ? Flexbox centered, ... ? */

body.snippet {
  background: #050620;
  background: -webkit-radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  background:    -moz-radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  background:         radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  color: #ecf0f1;
  border-bottom: none;
  transition: all 0.3s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}
body.snippet--light {
  background: #ecf0f1;
  color: #050620;
}
.snippet p, li, a {
  font-size: 18px;
  text-decoration: none;
}




*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1 {
  text-align: center;
  font-size: 2.5em;
  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
}
h2 {
  font-size: 1.8em;
  padding-top: 40px;
  padding-bottom: 40px;
}
h3 {
  font-size: 1.3em;
  padding-top: 20px;
  padding-bottom: 20px;
}

.snippets h2 {
	margin-top: 80px;
}

p {
	margin-bottom: 1em;
}

ul {
  list-style: none;
}

.snippets main {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5em;
  margin-bottom: 50vh;
}

.snippets ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.snippets li {
	margin: 10px 0;
}

.snippets a {
	margin: 0.5em 0;
	color: #ecf0f1;
	text-decoration: none;
	transition: all 0.3s ease-out;
}
li a:hover {
	color: #77AF69;
}

.detail {
	display: inline;
	font-size: 0.6em;
	color: gray;
}