@font-face
{
	font-family: "Overpass";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/Open source – Overpass Light.otf") format("opentype");
}

@font-face
{
	font-family: "Overpass";
	font-style: italic;
	font-weight: 300;
	src: url("../fonts/Open source – Overpass Light Italic.otf") format("opentype");
}

@font-face
{
	font-family: "Overpass";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/Open source – Overpass Bold.otf") format("opentype");
}

@font-face
{
	font-family: "Overpass";
	font-style: italic;
	font-weight: 700;
	src: url("../fonts/Open source – Overpass Bold Italic.otf") format("opentype");
}

@font-face
{
	font-family: "Overpass";
	font-style: normal;
	font-weight: 800;
	src: url("../fonts/Open source – Overpass Extrabold.otf") format("opentype");
}

@font-face
{
	font-family: "Overpass";
	font-style: italic;
	font-weight: 800;
	src: url("../fonts/Open source – Overpass Extrabold Italic.otf") format("opentype");
}

@font-face
{
	font-family: "Overpass";
	font-style: normal;
	font-weight: 900;
	src: url("../fonts/Open source – Overpass Heavy.otf") format("opentype");
}

@font-face
{
	font-family: "Line Awesome";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/line-awesome.woff") format("woff");
}

:root
{
	/* Fonts */
	--line-awesome: 'Line Awesome';
	--overpass: Overpass, sans-serif;

	/* Gradient Colours */
	--90stechnotronic1: linear-gradient(180deg, #46A926 0%, #009A56 100%);
	--90stechnotronic2: linear-gradient(0deg, #037164 0%, #00AC98 100%);
	--90stechnotronic3: linear-gradient(180deg, #79DD00 0%, #6DDB0A 10%, #61D915 20%, #55D620 30%, #49D42B 40%, #3CD235 50%, #30CF40 60%, #24CD4B 70%, #18CA56 80%, #0CC861 90%, #00C66B 100%);
	--90stechnotronic4: linear-gradient(180deg, #00A7FD 0%, #9914DC 100%);
	--css-tricks: linear-gradient(180deg, #D0391F 0%, #FF005D 100%);
	--firefox: linear-gradient(180deg, #00CCDA 0%, #0083FF 14.29%, #007AF9 28.57%, #0060E8 42.86%, #005FE7 57.14%, #2639AD 71.43%, #401E84 85.71%, #4A1475 100%);
	--firefox-focus: linear-gradient(180deg, #D1313E 0%, #A9344F 50%, #6B3274 100%);
	--fitdance: linear-gradient(179.86deg, #1AD6AB 0.08%, #329DB6 100.2%);
	--haguichi: linear-gradient(180deg, #E6548B 0%, #F76363 100%);
	--kamera: linear-gradient(180deg, #16A085 0%, #663579 100%);
	--mavericks: linear-gradient(180deg, #00F260 0%, #0575E6 100%);
	--mint: linear-gradient(180deg, #A6D74F 0%, #76C22B 100%);
	--papirus: linear-gradient(#49535E, #2F3943);

	/* Solid Colours */
	--css-tricks-solid: #ff0056;
	--fitdance-solid: #b9f4ff;
	--papirus-dark: #5c616c;
	--papirus-light: #ececec;

	/* Colours Position */
	--css-tricks-right: linear-gradient(to right, #ff0056, #ff3146, #ff4c34, #ff6421, #ff7901);
	--css-tricks-top: linear-gradient(to top, #ff0056, #ff3146, #ff4c34, #ff6421, #ff7901);
	--fitdance-bottom: linear-gradient(to bottom, #1ad6ab, #00c9b7, #00bbbd, #00acbc, #329db6);

	/* Code colours */
	--fitdance-light-webkit: -webkit-gradient(linear,left top, right top, from(#b9ffee), to(#b9f4ff));
	--fitdance-light: linear-gradient(to right, #b9ffee, #b9f4ff);
}

* 
{
  box-sizing: border-box;
	-ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* null margins and padding to give good cross-browser baseline */
body, caption, details, div, fieldset, form, caption, h1, h2, h3, h4, h5, h6, hr, html, img, li, ol,  p, summary, svg, table, td, th, tr, ul
{
	margin: 0px;
	padding: 0px;
}

a
{
	background: var(--fitdance-bottom);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-weight: 800;
	text-decoration: none;
}

a:hover
{
	background-image: var(--css-tricks-top);
	font-weight: 800;
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

b 
{
	font-weight: 700;
}

code 
{
	-webkit-box-decoration-break: clone;
	background: -webkit-gradient(linear,left top, right top, from(#fce4ed), to(#ffe8cc));
	background: linear-gradient(to right, #fce4ed, #ffe8cc);
	border-radius: .2rem;
	box-decoration-break: clone;
	font-size: 90%;
	overflow-wrap: break-word;
	padding: .1rem .3rem .2rem;
	word-wrap: break-word;
}

pre > code
{
	background: none;
}

.code-alt 
{
	-webkit-box-decoration-break: clone;
	background: var(--papirus);
	border-radius: .2rem;
	box-decoration-break: clone;
	color: var(--papirus-light);
	font-size: 90%;
	overflow-wrap: break-word;
	padding: .1rem .3rem .2rem;
	word-wrap: break-word;
}

body 
{
	background: var(--papirus-light);
	color: var(--papirus-dark);
	font-family: var(--overpass);
	font-style: normal;
	font-weight: 300;
}

body, li, p, ul
{
	font-size: 16px !important;
}

details
{
	background: whitesmoke;
	border-bottom: 2px solid var(--papirus-dark);
	border-radius: 5px;
	max-width: 90%; 
	margin: 0px auto;
	padding: 6px 24px;
}

details summary
{
	background-image: var(--css-tricks-top);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	cursor: pointer;
	font-size: 28px !important;
	font-weight: 900;
	list-style: none;
}

details summary::-webkit-details-marker 
{
  display: none;
}

details summary:before
{
	background-image: var(--fitdance);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	content: '';
	font-family: var(--line-awesome);
	padding-right: 10px;
}

details[open] summary:before 
{
  content: '';
}

details > details
{
	border: none;
	max-width: 100%;
}

details > details summary
{
	background-image: var(--fitdance);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-size: 24px !important;
	font-weight: 900;
}

details > details summary:before
{
	background-image: var(--css-tricks-top);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	content: '' !important;
	padding-right: 10px;
}

details > details[open] summary:before 
{
  content: '' !important;
}

fieldset, img 
{
	border: none;
}

h1, h2, h3, h4, h5, h6, ul
{
	margin: 0px;
	padding: 16px 24px;
}

h1, h2, h3
{
	background-image: var(--css-tricks-top);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1
{
	font-size: 32px !important;
}

h2
{
	font-size: 28px !important;
}

h3
{
	font-size: 24px !important;
}

h4, .h4
{
	background-image: var(--fitdance-bottom);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-size: 20px !important;
}

h5
{
	font-size: 18px !important;
}

img 
{
	max-width: 100%;
	padding: 5px 0px;
	image-rendering: optimizequality;
}

li 
{
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  padding-left: 1em; 
  text-indent: -.7em;
	text-align: justify;
	word-wrap: break-word;
}

li:before 
{
	background: var(--fitdance-bottom);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content: "✱";
  margin-right: 4px;
}

li > ul
{
	padding: 0px;
}

li > ul li:before
{
	background: var(--css-tricks-top);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	content: "✱";
  margin-right: 4px;
}

p
{
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
	padding: 4px 24px;
	text-align: justify;
}

table 
{
  background: white;
  border-collapse: collapse;
  border-radius: 6px;
  border-spacing: 1;
  margin: 0 auto;
  max-width: 800px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

table * 
{
  position: relative;
}

table td, table th 
{
  padding-left: 8px;
}

table thead tr 
{
  background: var(--fitdance);
	color: var(--papirus-light);
  font-size: 16px;
  height: 60px;
}

table tbody tr 
{
  border-bottom: 1px solid #E3F1D5;
  height: 48px;
}

table tbody tr td:first-child 
{
	background-image: var(--css-tricks-top);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

table tbody tr:last-child 
{
  border: 0;
}

table td, table th 
{
  text-align: left;
}

table td.l, table th.l 
{
  text-align: right;
}

table td.c, table th.c 
{
  text-align: center;
}

table td.r, table th.r 
{
  text-align: center;
}

ul 
{
  list-style: none;
}

/* Blog */

.blog-top
{
  background: var(--css-tricks-top);
  height: 180px;
}

.blog-top-profile
{
  background-image: url(../images/cover.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.blog-wrapper
{
  position: relative;
  clear: both;
  margin: -20px auto 75px auto;
  width: 100%;
  overflow: hidden;
}

a.button
{
	border-radius: 10px;
	background: var(--papirus-light);
	border: none;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
	color: var(--papirus-dark);
	display: inline-block;
	cursor: pointer;
	font-weight: 300;
	/* height: 34px; */
	padding: 6px 16px;
	margin: 12px 0;
	outline: none;
	overflow: visible;
	vertical-align: middle;
	-webkit-text-fill-color: var(--papirus-dark);
}

a.button:hover
{
	background: var(--fitdance);
	color: var(--papirus-light);
	box-shadow: 0 1px 1px 0 rgba(10.2, 83.9%, 67.1%, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
	font-weight: 300;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	-webkit-text-fill-color: var(--papirus-light);
}

.card-first
{
  position: relative;
  background: #fff;
  padding: 50px;
  width: 800px;
  margin: -100px auto 20px auto;
  box-shadow: 0 2px 4px rgba(100,100,100,.1);
}

.card-first-profile
{
  position: relative;
  background-image: url(../images/gus.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	height: 190px;
  width: 190px;
  margin: -100px auto 20px auto;
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 #fff;
}

.card-next
{
  position: relative;
  background: #fff;
  padding: 50px;
  width: 800px;
  margin: 20px auto 0px auto;
  box-shadow: 0 2px 4px rgba(100,100,100,.1);
}

/* Centralise the grid of icons sets */

.center
{
	margin: 0 auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.colour
{
	border-radius: 100%;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  width: 25px;
}

.container-colours-sets
{
	background: var(--papirus-dark);
	border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
	margin-left: 24px;
	margin-right: 24px;
}

.date
{
	-webkit-box-decoration-break: clone;
	background: -webkit-gradient(linear,left top, right top, from(#fce4ed), to(#ffe8cc));
	background: linear-gradient(to right, #fce4ed, #ffe8cc);
	border-radius: .2rem;
	box-decoration-break: clone;
	font-size: 90%;
	margin-left: 24px;
	padding: 6px;
	width: auto;
}

.devices-icons
{
	border-radius: 24px;
	width: 512px;
}

.icons
{
	font-family: var(--line-awesome);
	font-size: 24px;
	padding-right: 8px;
	vertical-align: middle;
}

.file-managers
{
	width: 290px;
}

.mint-folders
{
	width: 600px;
}

.steam-games
{
	width: 216px;
}

/* Grid of icons sets */

.grid 
{
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

.grid li 
{
		background: -webkit-gradient(linear,left top, right top, from(#fce4ed), to(#ffe8cc));
		background: linear-gradient(to right, #fce4ed, #ffe8cc);
    border-radius: 4px;
    border: 0.5px solid rgba(36.1%, 38%, 42.4%, 0.3);
    box-shadow: 0 0 0 1px rgba(36.1%, 38%, 42.4%, 0.1);
    display: inline-block;
    height: calc(345px + 45px);
		list-style: none;
    margin: 12px;
    padding: 12px;
    text-decoration: none;
    text-align: center;
    width: 345px;
		text-indent: 0px;
    transition: all 100ms ease-out;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
}

.grid li:before
{
  content: none;
  margin-right: none;
}

.grid li:focus, .grid li:hover 
{
  box-shadow: 0 1px 2px 0 rgba(10.2%, 83.9%, 67.1%, 0.5), 0 0 1px 2px rgba(19.6%, 61.6%, 71.4%, 0.5);
	transition: all 100ms ease-out;
	-webkit-transition: all 100ms ease-out;
	-moz-transition: all 100ms ease-out;
	-ms-transition: all 100ms ease-out;
	-o-transition: all 100ms ease-out;
}

.grid li img 
{
    border-radius: 4px;
    margin-bottom: 12px;
}

.grid li span 
{
    display: inline-block;
    color: gray;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 32px;
    text-transform: uppercase;
    vertical-align: middle;
}

.long-list
{
	columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

.very-long-list
{
	columns: 4;
  -webkit-columns: 4;
  -moz-columns: 4;
}

.long-list li, .very-long-list li
{
	text-align: left;
}

/* Grid of colours sets */

.palette 
{
  border-radius: 5px;
  height: 40px;
  line-height: 40px;
  margin: 10px;
  text-align: center;
  width: 40px;
}

.paragraph
{
	font-size: 16px !important;
}

/*  TeX and LaTeX typesetting  */

.tex sub, .latex sub, .latex sup 
{
  text-transform: uppercase;
}

.tex sub, .latex sub 
{
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
}

.tex, .latex, .tex sub, .latex sub 
{
  font-size: 1em;
}

.latex sup 
{
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
}

.latex .revcap 
{
display: inline-block;
text-transform: uppercase;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.title
{
	background: var(--fitdance-bottom);
	font-style: normal;
	font-size: 150%/70%;
	font-weight: 900;
	text-align: left;
	padding: 0.5em;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.title_back
{
	background: var(--papirus);
}

/* Footer */

#footer 
{
	background: var(--papirus);
	border-top: 4px solid transparent;
  border-image: var(--css-tricks-right);
  border-image-slice: 1;
	color: var(--papirus-light);
	font-size: 12px;
	margin-top: 20px;
	padding: 1em;
	text-align: center;
}

#footer-menu
{
	list-style-type: none;
  margin: 0;
  padding: 0;
}

#footer-menu li
{
	display: inline;
}

/* Menu */

#menuShowHide 
{
	left: -999em;
	position: absolute;
}

#mainMenu 
{
	background: var(--papirus);
	border-bottom: 4px solid transparent;
  border-image:  var(--fitdance-bottom);
  border-image-slice: 1;
	list-style: none;
	margin-bottom: 1em;
	padding: 0.25em 0;
	text-align: center;
}

#mainMenu li 
{
	display: inline;
	text-align: center;
	padding: 0px;
}

#mainMenu li:before 
{
	background: none;
  content: none;
  margin-right: none;
}

#mainMenu a 
{
	color: var(--papirus-light);
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	padding: 0.25em 1em;
	text-decoration: none;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover 
{
	background-image: var(--css-tricks-top);
	background-clip: text;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#wrapper 
{
	margin: 0 auto;
}

@media (max-width: 848px) 
/* only screen and  */
{
 .grid 
 {
  text-align: center
 }
}

@media (max-width: 608px)
{
	details
	{
		border-radius: 0px;
		max-width: 100%;
	}

  .card-first
	{
		padding: 10px;
		margin: -140px auto 20px auto;
		width: 90%;
	}

	.card-next
	{
		padding: 10px;
		width: 90%;
	}

	.devices-icons
	{
		border-radius: 12px;
	}

  .devices-icons, .file-managers, .mint-folders, .steam-games
	{
		width: 100%;
	}

  .long-list, .very-long-list
	{
		columns: 1;
		-webkit-columns: 1;
		-moz-columns: 1;
	}

  .title
	{
		padding-right: 2em;
		text-align: left;
	}

	#mainMenu 
	{
		border-top: 4px solid transparent;
	  border-image: var(--css-tricks-top);
	  border-image-slice: 1;
		display: none;
		overflow: hidden; /* wrap floats and margins */
		padding: 0.25em;
	}

	#mainMenu li 
	{
		float: left;
		width: 50%;
		padding: 0px;
	}

	#mainMenu ul 
	{
	  list-style: none;
	}

	#mainMenu a 
	{
		display: block;
		margin: 0.25em;
		padding: 0.75em;
	}

	#menuShowHide+label 
	{
		background: var(--fitdance);
		color: var(--papirus-light);
		display: block;
		font-weight: 700;
		margin-bottom: 1em;
		padding: 1em;
		text-align: center;
	}

	#menuShowHide+label:active,
	#menuShowHide+label:focus,
	#menuShowHide+label:hover 
	{
		background: var(--css-tricks-top);
	}

	#menuShowHide+label:before 
	{
		content:"Show menu";
	}

	#menuShowHide:checked + label 
	{
		margin: 0;
	}

	#menuShowHide:checked + label:before 
	{
		content: "Hide Menu";
	}

	#menuShowHide:checked ~ #mainMenu 
	{
		display: block;
	}
}

@media (max-width: 568px)
 /* screen and  */
{
	.devices-icons
	{
		border-radius: 19px;
	}

  table 
	{
    display: block;
  }

  table > *, table tr, table td, table th 
	{
    display: block;
  }

  table thead 
	{
    display: none;
  }

  table tbody tr 
	{
    height: auto;
    padding: 8px 0;
  }

  table tbody tr td 
	{
    margin-bottom: 12px;
    padding-left: 45%;
  }

  table tbody tr td:last-child 
	{
    margin-bottom: 0;
  }

  table tbody tr td:before 
	{
    font-weight: 700;
    left: 10px;
    position: absolute;
    top: 0;
    width: 40%;
  }

  table tbody tr td:nth-child(1):before 
	{
    content: "Code";
  }

  table tbody tr td:nth-child(2):before
	{
    content: "Blur";
  }

  table tbody tr td.alternative-icons:nth-child(2):before
	{
    content: "Alt 1";
  }

  table tbody tr td:nth-child(3):before 
	{
    content: "Drop shadow";
  }

  table tbody tr td.alternative-icons:nth-child(3):before 
	{
    content: "Alt 2";
  }

  table tbody tr td:nth-child(4):before 
	{
    content: "Inner shadow";
  }

  table tbody tr td.alternative-icons:nth-child(4):before 
	{
    content: "Alt 3";
  }

  table tbody tr td:nth-child(5):before 
	{
    content: "Box Type";
  }

  table tbody tr td.alternative-icons:nth-child(5):before 
	{
    content: "Alt 4";
  }

  table tbody tr td.alternative-icons:nth-child(6):before 
	{
    content: "Alt 5";
  }
}

@media (max-width: 440px) 
{
  /* only screen and */

	.devices-icons
	{
		border-radius: 14px;
	}

 .grid 
 {
  text-align: center
 }

 .grid li 
 {
  background: transparent;
  border-radius: 0;
	border: none;
  box-shadow: none;
  height: 345px;
  margin: 12px 0;
  max-width: 345px;
  padding-left: 0;
  padding-right: 0;
  width: 100%
 }

 .grid li:after 
 {
  border: none;
  color: var(--papirus-dark);
  content:"◆";
  display: block;
  text-align: center;
  font-size: 18px;
  line-height: 64px;
  width: 100%;
 }

 .grid li:last-child:after 
 {
  content:""
 }

 .grid li:focus, ul.grid li:hover 
 {
  box-shadow: none;
  background: transparent
 }
}

@media (max-width: 288px) 
{
	#mainMenu li 
	{
		float: none;
		width: auto;
	}
}