/* Stornur 2018.7: The style of Firebog, by WaLLy3K */

/* http://necolas.github.io/normalize.css ======> */
html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline-width: 0; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }
/* Normalize.css <=============================== */

html {
  font-size: 62.5%;
}

body {
  background: rgb(220,220,220) repeat fixed;
  background-image: linear-gradient(to top, transparent, rgba(0,0,0,0.05)), url("bg.svg");
  background-attachment: fixed;
  color: rgb(32,32,32);
  font: 1.6rem "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5rem;
  height: 100%;
}

a {
  background-image: linear-gradient(to right, rgba(0,64,180,0.15) 100%, transparent);
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  color: rgb(0,64,180);
  text-decoration: none;
}

a:hover {
  background-image: linear-gradient(to right, rgba(0,64,180,0.9) 100%, transparent);
}

b {
  font-weight: 600;
}

blockquote {
  border-left: 4px solid rgba(0,0,0,0.5) !important;
  border-radius: 4px;
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-style: italic;
  margin: 1rem 2rem;
  padding: 1rem 1.5rem;
}

blockquote cite {
  display: block;
  font-size: 1.4rem;
  margin-top: 0.4rem;
  opacity: 0.9;
}

blockquote cite:before {
  content: "\2014\00a0";
}

code {
  border-radius: 2px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 1.5rem;
  padding: 0 2px;
  white-space: nowrap;
}

h1, h2, h3, h4 {
  font-weight: 600;
}

h1, h2 {
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  line-height: 120%;
}

h1 {
  font-size: 3.2rem;
  text-align: center;
}

h2 {
  font-size: 2.2rem;
}

h3 {
  font-size: 1.9rem;
}

ul {
  overflow: auto;
  padding-left: 0;
  word-wrap: break-word !important;
}

ul li:before {
  content: "\00a0";
  background-position: center !important;
  background-repeat: no-repeat !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%23202020'%3E%3Cpath d='M6,4L3,7H1.5L4,4L1.5,1H3L6,4z'/%3E%3C/svg%3E");
  display: inline-block;
  margin-right: 4px;
  position: relative;
  width: 8px;
}

ul ul li {
  margin-left: 12px;
  list-style-type: none;
}

ul ul li:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle fill='%23000' cx='4' cy='4' r='2'/%3E%3Ccircle fill='%23fff' cx='4' cy='4' r='1.2'/%3E%3C/svg%3E");
}

/* Multiple Use Stylings =======================> */
header, main, button, input, label, select, blockquote, code { border: 1px solid rgba(0,0,0,0.2); }
header, main { box-shadow: 0 0 2px 1px rgba(0,0,0,0.05); }
button, input, label, select, blockquote { box-shadow: 0 1px 0 0 rgba(0,0,0,0.05); }
blockquote, code { background: rgba(0,0,0,0.02); }

h1 { background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 80%, transparent); }
h2 { background-image: linear-gradient(to right, rgba(0,0,0,0.1) 50%, transparent 80%); }

button, input, label, select {
  background-color: #FFF;
  border-radius: 4px;
}

button, input, label, select,
select:disabled:hover, button:disabled:hover, label:disabled:hover {
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.05));
}

button:hover, label:hover {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.1));
}

button:active, label:active {
  background-image: linear-gradient(to top, rgba(0,0,0,0.02), rgba(0,0,0,0.1));
}

input:disabled, select:disabled, button:disabled, label:disabled { 
  background-color: rgba(0,0,0,0.08) !important;
  color: rgba(68,68,68,0.5);
  cursor: not-allowed !important;
}

:disabled::-webkit-input-placeholder { color: rgba(68,68,68,0.5); }

[type=file], [type=number], [type=password], [type=text] {
  background-image: linear-gradient(to top, transparent, rgba(0,0,0,0.05));
}

select {
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.05)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6.2'%3E%3Cpath opacity='.4' d='M 0,1.3 4.9,6.2 10,1.3 8.5,0 4.9,3.7 1.2,0 0,1.3 Z'/%3E%3C/svg%3E");
}

#bpBack              { background-color: rgba(0,220,0,0.4); }
#bpInfo, #bdSources  { background-color: rgba(0,128,220,0.4); }
#bpWhitelist         { background-color: rgba(220,0,0,0.4); }
/* MUS <========================================= */

/* Margin and Padding ============================> */
div, p, pre, ul, h1, h2, h3, h4 { margin: 0; }
main > * { margin-bottom: 1rem; }
main > *:first-child { margin-top: 0; }
main > *:last-child { margin-bottom: 0; }

h1 { margin-bottom: 1.2rem; }
h2, h3 { margin: 1.6rem 0 0.4rem 0; }
h4 { margin: 0.8rem 0 0 0; }
ul li:not(:last-child) > ul li:last-child { margin-bottom: 1.2rem;}

main div > *:not(a):not(b):not(i):not(u):not(span),
main h2 ~ *:not(h2):not(h3):not(h4):not(.buttons),
main h3 ~ *:not(h2):not(h3):not(h4):not(.buttons),
main h4 ~ *:not(h2):not(h3):not(h4):not(.buttons) {
  margin-right: 0.4rem;
  margin-left: 0.4rem;
}

/*
main > * { background: rgba(0,0,255,0.4); }
h1, h2, h3 { background: rgba(255,0,0,0.4); }
h4 { background: rgba(0,255,0,0.5); }
ul li:not(:last-child) > ul li:last-child { background: rgba(255,255,0,0.4); }
ul { background-color: red; }
*/
/* M&P <========================================== */

header {
  -webkit-mask-image: -webkit-radial-gradient(circle, white, white); /* Safari Bug */
  background: rgba(240,240,240,0.97) linear-gradient(to top, rgba(0,0,0,0.05), transparent);
  border-radius: 0 0 8px 8px;
  border-top-color: rgba(255,255,255,0.8);
  display: table;
  font: bold 1.2rem "Trebuchet MS", sans-serif;
  left: 0;
  margin: 0 auto;
  position: fixed;
  right: 0;
  text-shadow: 0 1px rgba(255,255,255,0.8);
  top: 0;
  width: 85%;
  z-index: 1;
}

header div {
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}

header .title {
  background: url("fire.svg") 4px -1px no-repeat;
  font-size: 2.2rem;
  padding: 8px 4px;
  text-indent: 40px;
}

header .title a, header .title a:hover {
  background: none;
  color: inherit !important;
}

header .alt {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  line-height: 1.4rem;
  padding-right: 4px;
  text-align: right;
  width: 170px;
}

main {
  background-color: rgba(255,255,255,0.9);
  border-radius: 8px;
  box-sizing: border-box;
  line-height: 2.2rem;
  margin: 0 auto;
  margin-top: 54px;
  overflow: hidden;
  padding: 4px;
  width: 80%;
}

footer {
  color: rgb(64,64,64);
  font: 1.2rem Menlo, Monaco, Consolas, "Courier New", monospace;
  margin: 4px auto;
  text-align: center;
  width: 86%;
}

[type=checkbox][id$="Toggle"] { display: none; }

button, input:not([type="checkbox"]), label, select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-position: right center;
  background-repeat: no-repeat;
  block-size: 20px;
  border: 1px solid inherit;
  box-sizing: content-box;
  color: inherit;
  display: inline-block;
  font: inherit;
  margin-right: 4px;
  min-height: 20px;
  padding: 2px 6px;
  position: relative;
  vertical-align: middle;
  width: auto;
}

label {
  -moz-user-select: none; 
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

button:hover, select, label:hover { cursor: pointer; }

.buttons {
  border-spacing: 4px 0;
  display: table;
  width: 100%;
}

.buttons label, .buttons button {
  display: table-cell;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* Home Page */
#home {
  background-color: rgb(35,20,5);
  background-image: none;
  color: rgba(255,255,255,0.6);
}

#home:after {
  opacity: 0.05;
}

#home a {
  color: #FFF;
  background-image: linear-gradient(to right, rgba(255,255,255,0.15) 100%, transparent);
}

#home a:hover {
  background-image: linear-gradient(to right, rgba(255,255,255,0.9) 100%, transparent);
}

#home .text {
  text-align: center;
  padding: 1rem;
}

#home .logo {
  display: block;
  height: 512px;
  margin: 0 auto;
  padding: 1.5rem;
}

#home footer {
  color: inherit;
}

/* Alt Header Links */
.alt a {
  display: inline-block;
  height: 22px;
  width: 22px;
  border: 4px solid transparent;
  border-radius: 4px;
}

.alt a:hover {
  background-color: rgba(0,0,0,0.1) !important;
}

#githubAHL {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath style='fill:black' d='M22,0.8C9.9,0.7,0,10.4,0,22.3c-0.1,9.4,6,17.8,15,20.8c1.1,0.2,1.5-0.5,1.5-1c0-0.5,0-1.9,0-3.7c-6.1,1.3-7.4-2.9-7.4-2.9c-1-2.5-2.4-3.1-2.4-3.1c-2-1.4,0.1-1.3,0.1-1.3c2.2,0.1,3.4,2.3,3.4,2.3c2,3.4,5.2,2.4,6.4,1.8c0.1-1.1,0.6-2.1,1.4-2.9c-4.9-0.5-10-2.4-10-10.7c0-2.2,0.8-4.2,2.3-5.8c-0.7-1.8-0.6-4,0.2-5.7c0,0,1.9-0.6,6,2.3c3.6-1,7.4-1,11,0c4.2-2.8,6-2.3,6-2.3c0.8,1.8,0.9,3.9,0.2,5.7c1.5,1.6,2.3,3.7,2.3,5.8c0,8.3-5.2,10.2-10,10.7c0.8,0.7,1.5,2,1.5,4c0,2.9,0,5.3,0,5.9c0,0.5,0.4,1.2,1.5,1c11.5-3.8,17.7-16,13.9-27.4C39.9,6.7,31.4,0.7,22,0.8z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
}

#aboutAHL {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath style='fill:black' d='M34,44c-4.9,0-19.1,0-24,0s-6-4.9-6-9c0-4.1,2.9-13.9,8-13.9c0.6,0,1.2,0,1.8,0C16,22.9,18.9,24,22,24s6-1.1,8.2-2.9c0.6,0,1.3,0,1.8,0c5.1,0,8,9.9,8,13.9C40,39.1,38.9,44,34,44zM22,22c-6.1,0-11-4.9-11-11S15.9,0,22,0s11,4.9,11,11S28.1,22,22,22z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
}

#donateAHL {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath style='fill:black' d='M14.6,22c0.3-0.9,1-1.8,1.9-1.8h7.3c4.6,0,8.3-4.5,8.3-10.1C32.1,4.5,28.4,0,23.8,0c-1.7,0-11.9,0-11.9,0L4.5,34.9h7.3C11.9,34.9,14.4,22.9,14.6,22z M33.8,9.6c0.1,0.7,0.2,1.5,0.2,2.3c0,5.6-3.7,10.1-8.3,10.1h-7.3c-0.9,0-1.7,0.9-1.9,1.8C16.2,24.8,11.9,44,11.9,44h7.3c0,0,2.5-11.9,2.7-12.9c0.2-0.9,1-1.8,1.9-1.8h7.3c4.6,0,8.3-4.5,8.3-10.1C39.5,14.7,37.1,11,33.8,9.6z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
}

/* About Page */
.bio:before {
  content: "";
  background: url("dp.jpg") no-repeat;
  background-size: 66px 66px;
  border-radius: 8px;
  display: block;
  float: left;
  height: 66px;
  margin: 0 1rem;
  position: relative;
  width: 66px;
}

/* Responsive Grid */
.grid:before, .grid:after { content: ""; display: table; }
.grid:after { clear: both; }
.grid div { display: table; float: left; margin: 0; width: 16.666%; }
.grid div a { background: none; display: table-cell; }
.sites div a { color: inherit; font-size: 0.8em; text-align: center; }

.sites div a:before {
  background: rgba(140,140,140,0.4);
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 80% !important;
  border-radius: 14px;
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
  content: "";
  display: block;
  height: 64px;
  margin: 0 auto;
  position: relative;
  width: 64px;
  z-index: 0;
}

/* LP: Grid Icons */
.sites div a span { display: none; }

.pihole:before {
  background: rgba(200,0,25,0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath fill-rule='evenodd' d='M23,60.2c5.3,5.1,13.8,5,18.9-0.3l18.3-19c5.1-5.3,5-13.8-0.3-18.9L41,3.8c-5.3-5.1-13.8-5-18.9,0.3L3.8,23c-5.1,5.3-5,13.8,0.3,18.9L23,60.2z M3.8,23c0,0,9-9.2,18.5,0c7,6.8-0.4,17.4-0.4,17.4s-6.5,8.3-1.6,17.1l2.8,2.7c0,0-9.2-9,0-18.5c6.8-7,17.4,0.4,17.4,0.4s8.3,6.5,17.1,1.6l2.7-2.8c0,0-9,9.2-18.5,0c-7-6.8,0.4-17.4,0.4-17.4s6.5-8.3,1.6-17.1L41,3.8c0,0,9.2,9,0,18.5c-6.8,7-17.4-0.4-17.4-0.4s-8.3-6.5-17.1-1.6L3.8,23z'/%3E%3C/svg%3E") !important;
}

/* Places */
.grid.places div { width: 16.666%; }

.mastodon:before {
  background-color: rgba(84,85,255,0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath fill='%23FFF' d='M64.1,27.3v28.2H52.9V28.2c0-5.8-2.4-8.7-7.3-8.7c-5.4,0-8.1,3.5-8.1,10.3v15H26.5v-15c0-6.9-2.7-10.3-8.1-10.3 c-4.9,0-7.3,2.9-7.3,8.7v27.4H0V27.3C0,21.6,1.5,17,4.4,13.6c3-3.4,7-5.1,12-5.1c5.7,0,10,2.2,12.9,6.6l2.8,4.7l2.8-4.7 c2.9-4.4,7.2-6.6,12.9-6.6c4.9,0,8.9,1.7,12,5.1C62.6,17,64.1,21.6,64.1,27.3'%3E%3C/path%3E%3C/svg%3E") !important;
}

.reddit:before {
  background-color: rgba(250,70,30,0.8) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath fill='%23FFF' d='M59.8,38.9c0.1,0.7,0.2,1.4,0.2,2.1c0,10.8-12.5,19.5-28,19.5S4,51.8,4,41c0-0.7,0.1-1.4,0.2-2.1c-3.5-1.6-5.1-5.7-3.6-9.2s5.7-5.1,9.2-3.6c0.8,0.3,1.5,0.8,2.1,1.4c5.6-3.8,12.2-5.9,18.9-5.9c0.4-2,3.7-16.5,3.7-16.5c0.2-1.1,0.7-1,2-0.8l10.9,2.2c1.1-2.5,4.1-3.6,6.6-2.5s3.6,4.1,2.5,6.6c-1.1,2.5-4.1,3.6-6.6,2.5c-1.7-0.8-2.9-2.5-2.9-4.4L36.5,6.5l-3.2,15c6.7,0.1,13.3,2.2,18.8,5.9c2.8-2.7,7.2-2.6,9.9,0.2s2.6,7.2-0.2,9.9C61.3,38.1,60.6,38.6,59.8,38.9z M21,32.5c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S23.8,32.5,21,32.5z M32,51.8c-6.9,0-9.6-3-9.7-3.1c-0.4-0.5-1.2-0.6-1.8-0.2c0,0,0,0,0,0l0,0c-0.5,0.5-0.6,1.3-0.1,1.9c0.1,0.2,3.4,4,11.6,4c8.2,0,11.8-3.8,11.9-4l0,0c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.3-0.5-1.8,0c0,0,0,0,0,0C42,48.7,38.9,51.8,32,51.8z M43,32.5c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S45.8,32.5,43,32.5z'/%3E%3C/svg%3E") !important;
}

.twitter:before {
  background-color: rgba(30,160,240,0.8) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath fill='%23FFF'  d='M19.9,6.4c-7.2,0-14.1,2-20,5.9c1-0.1,2.1-0.2,3.1-0.2c5.9,0,11.6,1.9,16.3,5.6C13.7,17.8,8.7,21.4,7,26.8c1.9-0.4,4-0.3,5.9,0.2C6.8,28.3,2.4,33.7,2.4,39.9c0,0.1,0,0.1,0,0.2c1.8-1,3.8-1.5,5.9-1.6C2.5,42.3,0.7,50,4.2,56c6.7-8.2,16.5-13.2,27.1-13.7c-1.1,4.5,0.4,9.3,3.8,12.5c5.3,4.9,13.6,4.7,18.6-0.6c2.9,0.6,5.7,1.7,8.3,3.2c-1-3-3-5.6-5.7-7.3c2.6,0.3,5.1,1,7.5,2.1c-1.7-2.6-3.9-4.9-6.5-6.8c0-0.6,0-1.1,0-1.7C57.3,26.4,44.1,6.4,19.9,6.4'%3E%3C/path%3E%3C/svg%3E") !important;
}

.steam:before {
  background-color: rgba(32,32,32,0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath fill='%23FFF' d='M55.4,18c-4.7,0-8.6,3.8-8.6,8.5c0,0,0,0.1,0,0.1l-5.6,7.9c-0.9,0-1.8,0.1-2.7,0.5c-0.4,0.2-0.7,0.3-1.1,0.6l-25-10.2c-0.4-2-1.8-3.7-3.7-4.4c-3.2-1.3-6.9,0.2-8.2,3.3c-1.3,3.2,0.2,6.8,3.3,8.1c0,0,0,0,0.1,0c1.5,0.6,3.3,0.6,4.8,0c0.4-0.1,0.7-0.3,1-0.5l25.1,10.2c0.5,2,1.8,3.6,3.7,4.4c3.2,1.3,6.9-0.2,8.2-3.3c0.3-0.8,0.5-1.7,0.5-2.5l8-5.6c0.1,0,0.1,0,0.2,0c4.7,0.2,8.6-3.5,8.8-8.2c0.2-4.7-3.5-8.6-8.2-8.8C55.8,18,55.6,18,55.4,18zM7.8,23.5c-1.8-0.7-3.9,0.1-4.7,1.9C2.4,27.2,3.2,29.2,5,30c0,0,0,0,0,0L8,31.2c-1.1,0.4-2.4,0.4-3.5-0.1c-1.8-0.7-3-2.5-3-4.4c0-0.6,0.1-1.3,0.4-1.8c1.1-2.4,3.9-3.6,6.4-2.6c1.1,0.5,2,1.3,2.5,2.4L7.8,23.5zM45.4,42.6c-1.1,2.5-3.9,3.6-6.4,2.6c-1.1-0.4-2-1.3-2.5-2.3l2.8,1.1c1.8,0.7,3.9-0.1,4.7-1.9c0.7-1.8-0.1-3.8-1.9-4.6c0,0,0,0,0,0l-2.9-1.2c1.2-0.4,2.4-0.4,3.6,0.1c1.20.5,2.1,1.4,2.6,2.6C45.9,40.1,45.9,41.5,45.4,42.6L45.4,42.6zM55.4,32.2c-3.1,0-5.6-2.6-5.6-5.7s2.6-5.6,5.7-5.6c3.1,0,5.6,2.6,5.6,5.7C61.1,29.7,58.5,32.2,55.4,32.2L55.4,32.2zM55.4,22.3c-2.4,0-4.2,2-4.2,4.3c0,2.4,2,4.2,4.3,4.2c2.3,0,4.2-1.9,4.2-4.3C59.7,24.1,57.8,22.2,55.4,22.3C55.4,22.3,55.4,22.3,55.4,22.3z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.github:before {
  background-color: rgba(0,0,0,0.02) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32,1C14.5,0.9,0.1,15,0,32.5c-0.1,13.8,8.7,26.1,21.9,30.4c1.6,0.3,2.2-0.7,2.2-1.5c0-0.8,0-2.8,0-5.4c-8.9,1.9-10.8-4.3-10.8-4.3c-1.5-3.7-3.5-4.6-3.5-4.6c-2.9-2,0.2-1.9,0.2-1.9c3.2,0.2,4.9,3.3,4.9,3.3c2.9,4.9,7.5,3.5,9.3,2.6c0.1-1.6,0.9-3.1,2-4.2c-7.1-0.8-14.6-3.5-14.6-15.7c0-3.2,1.1-6.2,3.3-8.5c-1-2.7-0.9-5.8,0.3-8.4c0,0,2.7-0.9,8.8,3.3c5.2-1.4,10.8-1.4,16,0c6.1-4.1,8.8-3.3,8.8-3.3c1.2,2.7,1.3,5.7,0.3,8.4c2.2,2.3,3.3,5.4,3.3,8.5c0,12.2-7.5,14.9-14.6,15.7c1.1,1,2.2,2.9,2.2,5.9c0,4.2,0,7.7,0,8.7c0,0.8,0.6,1.8,2.2,1.5c16.7-5.5,25.8-23.4,20.3-40.1C58.1,9.7,45.8,0.9,32,1z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.discord:before {
  background-color: rgba(115,135,220,0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath fill='%23FFF' d='M56 15c0 0-12.5-8.5-16-5 4 0 13.5 7 13.5 7 -13.5-7.5-29.6-7.4-43 0 0 0 9.5-7 13.5-7 -3.5-3.5-16 5-16 5C3 25 0 36 0 47c4 5 10 8 16.5 8 0 0 3.5-4.3 3.5-4.5s-4-0.8-9.7-6.5c0 0 9.5 6.5 21.5 6.5s21.5-6.5 21.5-6.5c-5.5 5.5-9.5 6.5-9.7 6.5s3.5 4.5 3.5 4.5c6.5 0 13-3 17-8C64 36 61 25 56 15zM21.8,41.7c-3.3-0-6-3-6-6c-0-3.5,2.5-6,6-6l0,0c3.5,0,6,3,6,6C27.5,39,25,41.5,22,41.7zM42,41.7c-3.5-0-6-3-6-6c-0-3.5,2.5-6,6-6.1l0,0c3.5,0,6,3,6,6C47.5,39,45,41.5,42,41.7z'%3E%3C/path%3E%3C/svg%3E") !important;
}
/* Places <========================================== */

/* Projects */
.grid.projects div { width: 33.333%; }

.blocklist:before {
  background-color: rgba(230,230,230,0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' %3E%3Cpath fill='%23202020' d='M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z M9,38V26h46v12H9z'/%3E%3C/svg%3E") !important;
}

.blockpage:before {
  background-color: rgba(230,230,230,0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23202020'%3E %3Cpath d='M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z M32,58C17.6,58,6,46.4,6,32S17.6,6,32,6s26,11.6,26,26S46.4,58,32,58z'/%3E%3Crect x='5.5' y='29' transform='matrix(0.707 0.707 -0.707 0.707 32 -13.25)' width='53' height='6'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Blocklist Collection */
.bdTick:before, .bdCross:before { opacity: 1; }

.bdTick:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23444' d='M2.454,6.4A20.47,20.47,0,0,1,6.145.539,1.355,1.355,0,0,1,7.2.072c0.939-.173.84,0,0.748,0.131a20.77,20.77,0,0,0-4.8,7.461C3,7.974,2.885,7.969,2.388,8c-0.831,0-.554.03-1.5-1.222C0.151,5.8-.386,5.694.353,5.164,1.1,4.577,1.893,5.435,2.454,6.4Z'/%3E%3C/svg%3E");
}

.bdCross:before { 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23444' d='M2.355,7.546A21.9,21.9,0,0,1,6.546.965C7.033,0.5,6.365-.244,5.7.347A27.831,27.831,0,0,0,1.409,7.038,0.538,0.538,0,1,0,2.355,7.546ZM2.4,0.959C2.615,1.6,4.038,5.586,4.916,6.689c0.326,0.444,1.19.323,0.58-.63A47.466,47.466,0,0,1,3.213.677C2.886-.225,2.184.314,2.4,0.959Z'/%3E%3C/svg%3E");
}

.bdCross a {
  text-decoration: line-through;
}

#bdToggle:checked ~ .bdUrlList li > a:first-child { display: inline; }

.bdUrlList { white-space: nowrap; -webkit-overflow-scrolling: touch; }
.bdUrlList li > a:first-child { display: none; margin-right: 4px; }
.bdUrlList a[href^="http:"]:not(:first-child) { color: rgb(220,20,60); }

.bdUrlList .bdTick a {
  color: #008000;
}

.bdUrlList .bdTick a:hover {
  background-image: linear-gradient(to right, rgba(0,128,0,0.9) 100%, transparent);
}

.bdUrlList a[href^="http:"]:not(:first-child):before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12'%3E%3Cg fill='%23a02828'%3E%3Cpath fill-rule='evenodd' d='M8,3.5a3.5,3.5,0,0,0-7,0V5H8V3.5Zm-2,0a1.5,1.5,0,0,0-3,0V5H6V3.5Z'/%3E%3Crect y='5' width='9' height='7' rx='1' ry='1'/%3E%3C/g%3E%3C/svg%3E");
  content: ""; 
  display: inline-block;
  height: 12px;
  margin-bottom: -1px;
  margin-right: 2px;
  width: 9px;
}

.tls {
  white-space: nowrap;
}

.bdUrlList a[href^="http:"]:not(:first-child):hover {
  background-image: linear-gradient(to right, rgba(160,40,40,0.9) 100%, transparent);
}

.bdDesc {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 90%;
}

header .alt span:before { content: "Screen: "; }
header .alt span:after { content: "Desktop"; }
#blacklist h1:before, #blacklist h1:after { content: "⛔"; }

@media only screen and (min-width: 1600px) {
  header .alt span:after { content: "XL Desktop"; }
  header { max-width: 1360px; }
  main { width: 1270px; }
}

@media only screen and (max-width: 1024px) {
  header .alt span:after { content: "M Desktop"; }
  header {
    border-radius: 0;
    border-width: 1px 0;
    width: 100%;
  }
  main { width: 95%; }
}

@media only screen and (max-width: 600px) {
  header .alt span:after { content: "S Desktop"; }
  #blacklist h1:before, #blacklist h1:after { content: ""; }
  main {
    border-radius: 0;
    border-width: 0 0 1px 0;
    margin: 42px 0 4px 0;
    width: 100%;
  }
  
  #home .logo { height: 256px; }
  
  /* Turn icon grid into icon list */
  .sites div a:before { background-size: 78% !important; }
  
  .grid {
    border: 0 solid rgba(0,0,0,0.2);
    border-width: 1px 0;
  }
  
  .grid div {
    background: linear-gradient(to right, rgba(0,0,0,0.2) 100%, #FFF) no-repeat;
    background-position: 48px 0;
    background-size: 100% 1px;
    margin: 0;
    width: 100% !important;
  }
  
  .grid div:first-child { background: none; }
  
  .grid div a:before {
    background-size: 22px;
    border-radius: 6px;
    height: 28px;
    margin: -4px 0 0 8px;
    position: absolute;
    width: 28px;
  }
  
  .grid div a {
    color: #000;
    font-size: 1em;
    padding: 12px 0;
    text-align: left;
    text-indent: 48px;
    vertical-align: middle;
  }
  
  .grid div a span { display: inline; }
  
  .grid div a:after {
    content: "";
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='13'><path style='fill:rgba(0,0,0,0.22)' d='M2,0L8,6.76,2,13,1,11.96l5-5.2L1,1.04Z'/></svg>") no-repeat center right;
    float: right;
    height: 20px;
    margin-right: 8px;
    width: 8px;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
  header .alt span:after { content: "Mobile"; }
  header, main { min-width: unset; }
  .bdUrlList, #bpQueryOutput {
    border: 0 dashed rgba(0,0,0,0.2);
    border-width: 0 1px 0 0;
    box-shadow: 1px 0 0 rgba(0,0,0,0.04);
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) { 
  header .alt span:after { content: "L Mobile"; }
  #home .logo { height: 256px; }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  header .alt span:after { content: "Tablet"; }
  #home .logo { height: 256px; }
}