::-moz-selection { /* Firefox */
	/* color: #acf; */
	/* background: #0b1c1faa; */
	color: #777;
	background: #dfcfbf;
}
::selection {
	/* color: #acf; */
	/* background: #0b1c1faa; */
	color: #777;
	background: #dfcfbf;
}

html {
	background-image: linear-gradient(to top, #123 20%, #012 100%);
	font-size: 14px;
	transition: 1s cubic-bezier(.27,.97,.35,1.12);
}

/*?html, body {
	height: 100%;
	margin: 0;
} */

body {
	display: flex;
  height: 100vh;
  /*-padding: 1rem; */
	padding: 0;
	margin: 0;
	
  flex-direction: column;
	align-items: center;
	background-image: url(images/aerius-render-1500.png);
	background-size: cover;
	background-attachment: fixed;
	background-position: center bottom;
	background-color: #012;
	/*-background-blend-mode: luminosity; */
	background-blend-mode: multiply;
	background-repeat: no-repeat;
	font-family: "Abel", "Arial Narrow", Arial, sans-serif;
	color: #ddd;
	/* -webkit-font-smoothing: antialiased;
	/* -moz-osx-font-smoothing: grayscale; */
	/* background-color: #222; */
	/* overflow-x: hidden;
	overflow-y: scroll; */
	overflow: hidden;
	scrollbar-width: none;
	transition: background-color 6s, transform .6s ease, opacity .9s ease;
	transition-delay: 1.6s, 0s, 0s;
}

body::-webkit-scrollbar,
.scene::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
	/*-body {
		padding: 2rem;
	} */
}

h1, h2, h3, h4, p, b, i, span, pre {
	font-family: "Abel", "Arial Narrow", Arial, sans-serif;
	color: white;
	margin: revert;
}

h1 {
	/* border: 1px dotted greenyellow; */
	/* display: inline; */
	width: min-content;
	height: min-content;
	margin: 1rem 0;
	background-color: white;
	color: black;
}

/* Heading Typewriter Effect - JDH * /
h1{
  width: 6em;
  font-family: "Space Mono", monospace;
  white-space: nowrap;
  overflow: hidden;
  animation: typewriter 1s steps(10) 1s 1 normal both;
}
h1::after { /* Caret * /
  position: relative;
  right: 6px;
  content: '';
  opacity: .4;
  border-right: 2px solid currentColor;
  animation: caret 1s steps(1) infinite;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 6em;}
}
*/

h3 {
	display: inline; /*??*/
	margin: 40px 0 0;
	font-size: 200%;
	font-weight: lighter;
	color: #579;
}

h4 {
  font-size: 24px;
  margin: 0 0 15px 0;
  color: beige;
}

i {
	color: inherit;
}

a, b, h2 {
	color: #79c;
	transition: color .2s;
}

a:hover {
	color: ivory;
}

a[download]::after {
	/* Arrow down icon */
	/* content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cline x1='11.71' x2='11.71' y2='22' stroke='%2379c' stroke-width='4'/%3E%3Cpolyline points='0.71 11 11.71 22 22.71 11' fill='none' stroke='%2379c' stroke-width='4'/%3E%3C/svg%3E"); */
	/* Download icon: */
	content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8V20' stroke='%2379c' stroke-width='3' stroke-miterlimit='10'/%3E%3Cpath d='M8 14L14 20L20 14' stroke='%2379c' stroke-width='3' stroke-miterlimit='10'/%3E%3Ccircle cx='14' cy='14' r='13' stroke='%2379c' stroke-width='3'/%3E%3C/svg%3E");
	margin-left: 6px;
}

svg[id*="icon"] {
	margin: 2px 4px -2px 0;
}

button {
	cursor: pointer;
}

/* Element fade-in - JDH */
h1, h2, h3, h4, h5, h6, p, strong, b, em, i, small, a, button, span, td, th, .gallery > div, canvas, img, swiper-slide img {
	/*-white-space: pre-wrap; */
	transition: transform .6s ease, opacity .9s ease;
}
/* swiper-slide img {

	transition: transform .6s ease, opacity .9s ease !important;
} */
.fade {
	opacity: 0;
	transform: translateY(30%);
}

p.note {
	margin-top: -15px;
}

small {
	display: block;
	font-size: 16px;
	line-height: 24px;
}

/* ^ Testing ^ */

.btn, button, button:focus, button:active, button::-moz-focus-inner {
	background-color: unset;
	border: 0;
	outline: 0;
	cursor: pointer;
}

.btn {
	width: 80px;
	max-width: 80px;
	/* height: 80px; */
	/* margin: 0 calc(2% - 2px); */
	flex: 1;
	align-content: center;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1;
	background-color: unset;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid transparent;
	border-radius: 21%;
	text-align: left;
	cursor: pointer;
	transition: max-width 2s, border-top 0s, border-right 0.3s, border-bottom 0.6s, border-left 0.9s, box-shadow 0.6s;
}

.btn:hover {
	/* transform: rotate(405deg); */
	/* transition: .6s; */
	/* border: 10px solid transparent; */
	border: 1px solid #7298fe;
	box-shadow: 0 0 7px 0px #7298fe inset;
	/* border: 1px solid #fc0;
  /* box-shadow: 0 0 3px #f1d98d inset; */
	filter: contrast(1.2);
}

.pressed .btn {
	max-width: 64px;
}

.pressed .btn .tooltip {
	top: 50px !important;
	/* left: -33px; */
}

button.b {
	display: inline-flex;
	width: 64px;
	height: 64px;
	margin: 1.5%;
	background-color: unset;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 21%;
	border: 1px solid transparent;
	align-content: center;
	justify-content: center;
	align-items: center;
	transition: .3s;
}

/*-button.b:hover {
	transform: scale(1.1);
} */

.centre:hover button.b:not(:hover) {
	filter: brightness(0.8) saturate(0.8);
}

/*?.container {
  width: 82%;
  max-width: 1000px;
  margin: 2% auto;
  padding: 20px;
} */
.container {
	width: 100%;
	max-width: 80vh;
	margin: 0 auto;
	padding: 20px 0;
}

.folioweb:hover + b,
.folioarchi:hover + b,
.foliomc:hover + b {
	color: #FFF !important;
}

.folioweb:hover~.folioweb-title {
	color: #FFF !important;
}

.folioarchi:hover~.folioarchi-title {
	color: #FFF !important;
}

.foliomc:hover~.foliomc-title {
	color: #FFF !important;
}

b.nav {
	margin: 1%;
}

.front-menu {
  position: relative;
	display: flex;
  width: 100%;
	max-width: 600px;
	margin: auto;
	/*-padding: 1rem; */
	padding: 2rem 2rem 1rem;
	/*-padding-top: 20%; */
	padding-top: calc(50vh - 2rem - 56px);
	justify-content: space-between;
	gap: .66rem;
	/* margin: 2% 0; */
	transition: 1s, padding 2.2s;
	z-index: 1;
}

.front-menu.pressed {
	/*-padding-top: 1rem; */
	padding-top: 2rem;
}

/* .centre {
display: flex;
margin: auto;
align-content: center;
justify-content: center;
align-items: center;
} */

#content, #content-top, #main-flex {
	display: none;
	color: white;
	clear: both;
	overflow: hidden;
	border: 1px solid #357;
	border-radius: 10pt;
	background: rgba(240, 240, 255, 0.05);
	box-shadow: 0 0 25px #0a1b2c inset;
	max-height: 0;
	width: 82%;
	max-width: 1000px;
	padding: 20px;
	margin: 2% auto; /* transition-delay: 2s; */
	transition: padding 4s, max-height 1.5s ease-in, background-color 1.6s;
}

#main-flex {
	border: none;
	background: none;
	box-shadow: none;
	display: block;
	max-height: 1000px;
	float: left;
	width: 100% !important;
}

.content-right {
	float: right;
	display: flex;
	border: 1px solid lime;
}

.hi {
	background: #555;
}

/*--OLD:
.gallery {
	/* border: 1px solid #924; * /
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 200px));
	grid-auto-rows: minmax(180px, 200px);
	grid-gap: 40px;
	padding: 4%;
	transition: 2s;
}

.gallery::before {
	content: '';
	width: 0;
	padding-bottom: 100%;
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}

.gallery>*:first-child {
	grid-row: 1 / 1;
	grid-column: 1 / 1;
} */

.gallery {
  --columns: 1;
	--row-size: calc(1fr / var(--columns));
	
  display: grid;
	margin-top: 2rem;
  padding: 1px;
  grid-auto-rows: var(--row-size);
  grid-template-columns: repeat(var(--columns), 1fr);
	grid-gap: 30px;
	transition: 2s;

	--columns: 1 !important; /* Override for July 2024 updates */
}

@media (min-width: 450px) {
  .gallery {
    --columns: 2;
  }
}

@media (min-width: 750px) {
  .gallery {
    --columns: 3;
  }
}

@media (min-width: 1200px) {
  .gallery {
    --columns: 4;
  }
}

.gallery > * {
	border-radius: 7px;
	aspect-ratio: 1; /* Ensure children of the gallery remain square - JDH */
	/*#0a1b2c; */
	/* box-shadow: 0 0 25px #ff0080 inset; */
	overflow: hidden;
	text-align: center;
	cursor: zoom-in;
	transition-delay: .42s;
}

/* Testing fly through folder effect: * /
.gallery {
  perspective: 1895px;
  transform-style: preserve-3d;
}
.gallery > * {
	/*! aspect-ratio: 1; * /
	/*! overflow: hidden; * /
}
.gallery > * + * {
  transform: rotateX(-45deg) translateZ(-188px);
  aspect-ratio: 2;
}
*/

/*-.gallery div:hover>.item-info {
	opacity: 1;
} */

.gallery img {
	/* margin-top: calc(50% - 20px); */
	display: none;
	width: 100%;
	height: 100%;
  object-fit: cover;
  object-position: left;
	filter: saturate(0) contrast() brightness(0.66);
	transition: 0.9s cubic-bezier(.41,.33,.36,.98);
  will-change: filter;
}
.gallery img:hover {
	filter: saturate(1) contrast(1.12) brightness(0.9);
}

.gallery loader {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	background: url(images/loading-pixel.gif) center/32px no-repeat;
  border-radius: 7px;
	box-shadow: inset 0 0 2px #fff3;
}

.gallery .tooltipitem {
	width: 100%;
	height: 100%;
}

.gallery .tooltip {
	position: absolute;
	display: grid;
	left: 15px;
	top: unset;
	bottom: 15px;
	opacity: 1;
	text-shadow: 0 0 15px #0004;
	letter-spacing: 0.05rem;
	transition: .9s linear;
	transition-delay: .4s;
	z-index: 1;
}

.gallery .tooltip::after {
	content: unset;
}
.gallery .tooltip small {
  max-height: 0;
  padding-top: 3px;
  font-weight: 600;
  color: #79c;
  transition: .6s;
  transition-delay: 0.66s;
}
.gallery .tooltipitem:hover .tooltip > * {
  max-height: 20px;
}

/* for shadow over 
.gallery div::after {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
       box-shadow: 0 0 25px #ff0080 inset;
}
*/

/*-.item-info {
	position: absolute;
	padding: 2px 7px;
	background-color: rgba(240, 240, 240, 0.1);
	opacity: 0;
	color: white;
	transition: opacity 0.4s;
} */

.zoombox {
	position: fixed;
	display: none;
	width: 100%;
	height: 80vh;
	top: 10%;
	left: 0;
	background-color: rgba(40, 40, 40, 0.5);
	background-image: url("images/loading-pixel.gif");
	background-size: contain; /*-80vh; */
	background-position: center;
	background-repeat: no-repeat; /* border-top: 40px solid rgba(10, 10, 10, 0.6); */
	/* border-bottom: 40px solid rgba(10, 10, 10, 0.6); */
	box-shadow: 0 0 100px 8px #000;
	z-index: 1;
}

.zoombox img {
	margin: auto;
	width: 50%;
}

.zoombox aside {
	display: block;
	position: fixed;
	bottom: 0;
	height: 25vh;
	width: 100%; /* 27%--need to fix for mobile */
	background-color: rgba(10, 10, 10, 0.6);
	overflow: scroll;
	scrollbar-width: none;
	/*-padding: 0px calc(50vw - 40vh + 8px); */
}
.zoombox aside::-webkit-scrollbar {
	display: none;
}

.zoombox span {
	display: block;
	height: 100%;
	width: 80vh;
	margin: auto;
	/*-cursor: pointer; */
	text-align: right;
	color: rgba(10, 10, 10, 0.2);
}

/* .zoombox span::after { content: 'jdh.herokuapp.com'; } /* For img watermarks */

.gallerybutton {
	width: 10vw;
	min-width: 4rem;
	height: 100%;
	background-color: transparent;
	background-image: url('images/arrow.png');
	background-size: 0.86rem;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	opacity: 0.5;
	filter: contrast(.2) brightness(1.5);
	transition: .3s;
}

.gallerybutton:hover {
	/* background-color: rgba(10, 10, 10, 0.1); */
	opacity: 1;
	filter: contrast(.2) brightness(2.5);
}

.gallery-prev {
	float: left;
	transform: rotate(180deg);
}

.gallery-next {
	float: right;
}

.gallery-close {
	position: fixed;
	width: 100vw;
	height: 100%;
	top: 0;
	right: 0;
	background-image: url('images/cross.png');
	background-size: 1.2rem;
	background-position: right calc(5vh - 0.6rem) top calc(5vh - 0.6rem);
	/* background-position: right calc(5vw - 0.6rem) bottom 50%; */
	z-index: -1;
}

.tooltipitem {
	position: relative;
	display: inline-block;
}

/* .tooltip {
	/* .tooltipitem  * /
	visibility: hidden;
	width: 0;
	color: #FFF;
	/* padding: 8px 2px; * /
	/* opacity: 0.5; * /
	/* background: #222; * /
	font-size: 12pt;
	text-align: left;
	position: absolute;
	/* z-index: 1; * /
	top: 88px;
	left: 0px;
	transition: width .3s, visibility .3s;
	transition-delay: .5s;
	overflow: hidden;
	white-space: nowrap;
	border-top: 2px solid #357;
	/* border-radius: 10px; * /
} */

@media (hover: hover) {
	.tooltipitem:hover .tooltip {
		visibility: visible;
		width: inherit;
	}
}

.loading {
	/* background-image: url(images/loading-pixel.gif) no-repeat center !important; */
	background-image: none !important;
	background-color: ivory !important;
}

.loadingbar {
	border: 1px solid #FFF;
	background: #888;
	box-shadow: 0 0 25px #0a1b2c inset;
	width: inherit;
	height: 10px;
	max-width: 1000px;
	border-radius: 5pt;
	margin: auto;
	margin-bottom: 4%;
}

.loadingbar div {
	background: linear-gradient(#8ac, #bdf);
	width: 0;
	height: inherit;
	border-radius: 5pt;
	transition: width 3s ease-in-out;
}

.socialbox {
	/* width: 200px; */
	float: right;
}

.social, .tabprofile {
	width: 100%; /* padding: 8px; */
	/* background: #222; */
	/* border: 1px solid #111; */
	/* border-radius: 4px; */
	/* clear: both; */
}

.social>a {
	color: #EEE;
	text-decoration: none;
	transition: text-decoration 2s;
}

.social>a:hover {
	color: #CCC;
	text-decoration: underline;
}

a[alt="Discord"] {
	cursor: text;
	user-select: all;
	text-decoration: none !important;
}

a[href="#"] {
	filter: saturate(0);
  cursor: default;
}

a::selection {
	color: #222;
	background: rgba(241, 241, 241, 0.99);
}

table.tabprofile {
	/* margin: 0 0 20px 20px; */
	width: 50%; /* calc(50% - 30px) !important; */
	/*-display: flex; */
	/*-float: left; clear: none; */
	padding: 2px;
  table-layout: fixed;
	text-align: left;
	color: beige;
}
@media (max-width: 818px) {
	table {
		width: 100% !important;
	}
}
.tabprofile th, .tabprofile td {
	padding: 4px 0px;
	min-width: 120px; /* border-right: 1px solid white; */
	/* width: 25%; */
}

table.extend tr, table.extend td {
	display: inherit;
}

/* td {
  text-indent: 16px;
} */

.fa, .fas, .fab {
  width: 26px;
  margin-right: 10px;
  padding: 5px;
  background: #203040;
  border-radius: 3px;
  text-align: center;
  transition: .2s;
}
@media (hover: hover) {
	.fa:hover, .fas:hover, .fab:hover {
		color: #888;
		filter: invert();
	}
}

.fas.fa-star {
  padding: 5px 6px 5px 4px;
  opacity: .85;
}
.stars {
  margin-bottom: 10px;
}

.pale {
	color: rgba(241, 241, 241, 0.5);
}

textarea {
	background: rgba(240, 240, 240, 0.1);
	padding: 8px;
	font: 100% "Helvetica Neue";
	color: white;
	border: none;
	display: flex;
	align-items: center;
	width: 100%;
	resize: none;
}

canvas {
	position: relative; /*??*/
	max-width: 100%;
	background: url(images/cave-background.png);
	border: 1px solid #357; /* background-color: #3d2f1a; */
}

.main {
	text-align: center;
	/* border: 1px solid #542; */
}

#canvasbox {
	/* display: flex; */
	width: 642px;
	max-width: 100%;
	margin: 2rem auto 0;
	/* align-content: center;
	justify-content: center;
	align-items: center; 
	border: 1px solid #0F0; */
	box-shadow: 0 0 99px #012;
}

.open {
	padding: 20px;
	width: 50% !important;
}

.walk:hover {
	content: url('images/james-down-0.png');
}

footer {
	height: 1.5rem;
	background-color: rgba(10, 10, 10, 0.6); /* position: fixed; */
	margin-top: calc(50% - 1.5rem);
	color: #222;
	bottom: 0;
	/*! width: -moz-available; */
	padding: 6px;
}

footer p {
	margin: 0;
}














/* Todos and chat.html CSS Styling */








table#chat-box {
	/* border: 2px solid #1e1e1e; */
	background: none;
}
table#chat-box tr {
	background: none;
}

/* table.chat tr> :first-child::after { For dash after user author and before their message
	content: ' -';
	color: #333;
} */

/*
@media only screen and (max-width: 768px) {
        input[type='text']{
        width: 98%;
        }
}
*/
td.username {
	width: 120px;

	font: 10pt Tahoma, Helvetica, sans-serif;
	text-align: right;
}
td.chatmessage {
	font: 10pt Tahoma, Helvetica, sans-serif;
	color: #CCC;
}
td.datetime {
	width: 120px;
	
	font: 9pt sans-serif;
	color: #555;

}

tr > :first-child {
	/* width: 2vw; */
	/* width: 40px; DISABLED--webserver*/
	vertical-align: top;
	padding: 0.8%;
}

.delete, .detail, .add, #colourpicker {
	/* margin: 2px 10px; */
	margin: 2px 2px 2px 10px;
}

.tooltipbtn {
	/* position: absolute; */
	float: right;
}

.save {
	/* margin: 2px; */
	margin: 2px 4px;
}

#\31 590218086673>td:nth-child(2)>span:nth-child(3) {
	font-size: 11pt;
	color: tan;
}

tr> :last-child {
	vertical-align: top;
	padding: 0.8%;
}

.window {
	position: fixed;
	top: calc(10% - 8px);
	width: 40%;
	/* height: 80vh; */
	margin: 0 30%;
	padding: 30px;
	background: rgba(40, 40, 40);
	border: 2px solid #555;
	border-radius: 18px;
	box-shadow: 0 0 50px 8px rgba(10, 10, 10, 0.6);
}

.window input {
	/* width: auto !important; */
	font: 16pt "Abel" !important;
}

#windowbox {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
}

div#colourselect {
	display: none;
	position: absolute;
	background: rgba(40, 40, 40);
	border: 2px solid #555;
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 0 50px 8px rgba(10, 10, 10, 0.6);
	left: 680px;
	top: 80px;
}

#colourselect span {
	width: 1vw;
	height: 1vw;
	padding: 5px;
	margin: 0.25vw;
	margin-right: 10px;
	cursor: pointer;
}

#colourselect input {
	width: 5rem;
	background: none;
	border: none;
	font: 14pt "Abel";
	color: #ccc;
	vertical-align: middle;
	/* text-overflow: ellipsis; */
	/* transition: background 0.5s; */
}

.round-btn {
	display: inline-block;
	margin: 8px 0;
	padding: 2px 12px;
	background: #555;
	border: 2px solid #777;
	border-radius: 6px;
	font: 16pt 'Abel';
	color: #FFF;
	cursor: pointer;
	transition: .9s;
}

.right-align {
	float: right;
}

.tooltipitem {
	display: inline-block;
	position: relative;
}

.tooltipbtn {
	display: none;
	/* font: 12pt 'Arial Narrow'; */
	/* width: 42px; */
	position: absolute;
	padding: 0 6px;
	left: 1380px;
	background: #594;
	border: 1px solid #594;
	border-radius: 4px;
	font-size: 12pt;
	color: #FFF;
	text-align: center;
	transition: .9s;
	overflow: hidden;
	white-space: nowrap;
}

.tooltip {
  position: relative;
  display: inline-block;
  width: 0;
  top: 60px;
  left: 0;
  padding: 0;
  visibility: hidden;
  overflow: hidden;
	/*-background: #222; */
	/*-border-bottom: 2px solid #357; */
  opacity: .4;
  text-align: left;
  font-size: 1rem;
  font-family: 'Arial Narrow', sans-serif;
  color: #FFF;
  white-space: nowrap;
  transition: .3s linear;
  transition-delay: 1s;
}

.tooltip::after {
  position: relative;
  content: '';
  display: inline;
  top: 1px;
  opacity: .4;
  background: red;
  border-right: 2px solid currentColor;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

@media (hover: hover) { 
	.tooltiphover:hover>.tooltip {
		display: inline;
		/* visibility: visible; */
		width: 100px;
	}
}

div#container {
	width: 60%;
	margin: 5% auto;
	/* border: 1px solid chartreuse; */
}

.showhide {
	cursor: pointer;
}

.showhide span, .showhide + span {
	display: inline-block;
	background: url("./showhide-arrow.png") no-repeat;
	background-position: center;
	background-size: 10px;
	width: 1vw;
	height: 1vw;
	margin: 0 8px;
}

.centre {
	/* display: flex; */
	/* margin: auto; */
	align-content: center;
	justify-content: center;
	align-items: center;
	text-align: center;
}

input.todo, input.subtodo {
	display: inline-block;
	background: none;
	border: none;
	width: 90%;
	margin: 2px;
	vertical-align: middle;
	font: 14pt "Abel";
	color: #ccc;
	text-overflow: ellipsis;
	transition: background 0.5s;
}

input.todo:focus, input.subtodo:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.02);
}

/* input.todo:focus ~ button.save {
display: inline-block;
} */

input.subtodo {
	margin: 5px 10px;
}

p.subtodo {
	/* Subtodo paragraph element (with tick ✔) */
	font: 11pt "Abel";
	color: #888;
	margin: 2px 4px 4px 2px;
}

p.subtodo label:hover {
	color: #CCC;
	/* text-decoration: line-through; */
}

.checkbox {
	display: none;
}

.checkboxlabel {
	display: flex;
	background: url("./checkbox-unchecked.png") no-repeat;
	background-position: center;
	background-size: 16px;
	width: 1.2vw;
	height: 1.2vw;
	margin: 2px auto;
}

.checkboxlabel:hover {
	background-image: url("./checkbox-hover.png");
}

.checkbox:checked+.checkboxlabel {
	background-image: url("./checkbox-checked.png");
}

.subtodo-cb {
	background: #555;
}

.delete, .detail, .add, #colourpicker {
	display: inline-block;
	border: none;
	float: right;
	background: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;
	width: 1.2vw;
	height: 1.2vw;
	min-width: 16px;
	min-height: 16px;
	margin: 2px 10px;
	cursor: pointer;
}

.delete {
	background-image: url("./delete.png");
}

.delete:hover {
	background-image: url("./delete-hover.png");
}

.detail {
	background-image: url("./detail.png");
}

.detail:hover {
	filter: brightness(1.5);
}

.add {
	background-image: url("./add.png");
}

.add:hover {
	filter: brightness(1.5);
}

.save {
	margin: 2px;
	cursor: pointer;
}

#colourpicker {
	margin: 6px 4px 3px auto;
	background-color: #357;
}

.changed {
	background-color: #594;
	border-color: #594;
	color: #fff;
}

.checked {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #1a1a1a 50%);
	background-position: -100% 0;
	transition: background-position 4s;
	/* background-color: #1a1a1a; */
}

.checked input, .checked input:hover, .checked p, .checked p:hover {
	color: #333 !important;
}

.deletion {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #211 50%);
	background-position: -100% 0;
	transition: background-position 4s;
	/* background-color: #1f1010;  */
}

.deletion input, .deletion input:hover, .deletion p, .deletion p:hover {
	color: #522 !important;
}

.todo-detailed {
	height: 4vw;
}

::placeholder {
	opacity: 0.4;
}

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

fieldset {
	display: flex;
	margin: 8px 0;
	padding: 0 10px 10px 10px;
	border-color: #555;
}

legend {
	padding: 0 6px;
}

table#knowledge {
	display: flex;
  width: 100%;
  gap: 20px;
}

table#knowledge > tbody {
	background: #203040BB;
	border-radius: 9px;
	padding: 16px;
	/*-box-shadow: 0 0 1px currentColor; */
	border: 1px solid #3574;
	width: calc(100% / 3);
}
@media (max-width: 818px) {
	table#knowledge {
		flex-wrap: wrap;
	}
	table#knowledge > tbody {
		flex: 100%;
	}
}
th:first-child:last-child, td:first-child:last-child {
  display: block;
}

table.todotable {
	/* border: 2px solid #1e1e1e; */
}

table.todotable, table.todotable tr {
	/* outlines border: 1px solid #aaa; */
	border-collapse: collapse;
	width: 100%;
	height: 2.4vw;
	margin: 1rem auto;
	background-color: #222;
	background-size: 200% 100%;
	/* For left to right swipe background (deletion and completion) */
	transition: background-color 0.2s;
}

table.todotable tr> :first-child {
	width: 2vw;
}

table.todotable tr td {
	/* border: 1px solid lightcoral; */
	vertical-align: top;
	padding: 8px 0;
}

table.todotable tr:hover {
	background-color: #242424;
}

table.todotable p, table.todotable b, table.todotable textarea {
	font: 14pt "Abel";
}

input[type="date"] {
	width: auto;
}

ul {
	list-style-type: none;
	padding: 0;
}

li {
	display: inline-block;
	margin: 0 10px;
}

label {
	cursor: pointer;
}
/* 
a {
	color: #42b983;
} */

.linkedin-badge {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: -7px 0;
	background: url('/images/linkedin-skill-assessment-badge.svg') no-repeat center / 16px;
	opacity: .8;
	position: relative;
	/*-background-color: #203040; */
	border-radius: 3px;
	text-align: center;
	transition: .2s;
}

.linkedin-badge::after {
	content: 'Passed LinkedIn Skill Assessment';
	position: absolute;
	max-width: 0;
	top: 4px;
	left: 26px;
	opacity: 0;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	transition: opacity .5s;
	transition-delay: .9s;
}

.linkedin-badge:hover {
	cursor: pointer;
}

.linkedin-badge:hover::after {
	max-width: 200px;
	opacity: 1;
}

.services {
	margin: 5px -4px;
	font-size: 0;
}

.services>* {
	display: inline-block;
	padding: 5px 10px;
	margin: 4px;
	background: #203040AA;
	border: 1px solid #3573;
	border-top-color: #3575;
	border-right-color: #3575;
	border-radius: 4px;
	font-size: 14px;
	letter-spacing: .2px;
	transition: .3s;
	cursor: pointer;
}

.services>span:hover {
	border-color: #5794;
	border-top-color: #5797;
	border-right-color: #5797;
}

.services span.selected {
	background: #468b;
}

.services>a {
	text-decoration: none;
}

.services>a:not([href="#"]) {
	background-color: #eee;
	/*-border-color: white; */
  border-color: #ddd;
	/*-color: #357; */
	color: #123;
	animation: shine 1.5s cubic-bezier(.23, .99, .58, 1);
	transition: background 1.4s ease;
	transition-delay: .2s;
}

@keyframes shine {
	from {
		background-position: 99%;
	}
	to {
		background-position: 1%;
	}
}

.services>a:not([href="#"]):hover {
	/*-background: #468b; */
	/*-color: white; */
	background: #bdfb;
  border-color: #aceb;
  transition-delay: 0s;
}

.services>a::after {
	content: ' ›';
	position: relative;
	display: inline-flex;
	width: 0;
	top: -1px;
	right: 0;
	overflow: hidden;
	transition: .2s ease-out;
}

.services>a:not([href="#"])::after {
	width: 4px;
	right: -3px;
}

.services>a {
	/*-background: linear-gradient(60deg,#fff 34%,#9bd5 46%,#5795 57%,#3575 65%); */
	background: linear-gradient(60deg, #fff8 35%, #fff8 50%, #fff0 60%);
	background-size: 301%;
	transition: .9s ease;
	background-position: 99%;
}

.scene {
	--cube-width: 600px;
	--cube-offset: calc(-0.5 * var(--cube-width));

	/* width: 40vw;
	height: 40vh; */
	/* border: 1px solid #CCC; */
  width: 100%;
  height: 80vh;
  max-width: var(--cube-width);
	margin: 0 auto;
  padding: 0 calc(2rem + 1px);
  flex: 1;
  overflow: hidden;
  overflow-y: scroll;
  perspective: 1200px;
}

@media (min-width: 768px) {
	.scene {
		--cube-width: 900px;

		margin: 0 auto 2rem;
		padding: 0 calc(2rem + 1px);
		/* overflow: visible; */
		/* overflow-y: visible; */
		/* overflow-y: scroll; */
    scrollbar-width: none;
	}

	::-webkit-scrollbar {
		display: none;
	}
}

.cube {
	/* position: relative;
	width: 40vw;
	height: 40vh; */
	width: 100%;
	transform-style: preserve-3d;
	transform: translateZ(calc(-1 * var(--cube-offset))) rotateX(0deg) rotateY(0deg);
	transition: transform 1.2s cubic-bezier(.25, .73, .44, 1.1) !important;
}

.cubeface {
	position: absolute;
	width: 100%;
	/* width: 40vw;
	height: 40vh; */
	padding-bottom: 2rem;
	background: #fff0 !important;
	/* border: 1px solid #ccc; */
	/* line-height: 200px; */
	/* font-size: 40px; */
	/* font-weight: bold; */
	/* color: white; */
	/* text-align: center; */
	/* line-height: 8px;
	/* font-size: 6px;
	/* padding: 10px;
	/* transition: .18s ease;
	/* border-radius: 32px; */
}

.cubeface > .fade {
	height: 0;
	overflow: hidden;
}

/*-.cubeface:hover {
	background: #bdf4;
} */

/*-.cubeface * {
	user-select: none;
} */

th,
td,
table,
tr {
	font: inherit;
	color: inherit;
	text-align: left;
}

table,
tr {
	width: 100%;
}

label {
	margin-right: 10px;
}

/* .cube:hover {
	transform: translateZ(-100px) rotateY(-90deg);
} */
.front {
	transform: rotateY(0deg) translateZ(calc(-1 * var(--cube-offset)));
}

.back {
	transform: rotateY(180deg) translateZ(calc(-1 * var(--cube-offset)));
}

.left {
	transform: rotateY(-89.9999deg) translateZ(calc(-1 * var(--cube-offset)));
}

.right {
	transform: rotateY(89.9999deg) translateZ(calc(-1 * var(--cube-offset)));
}

.top {
	transform: rotateX(89.9999deg) translateZ(calc(-1 * var(--cube-offset)));
}

.bottom {
	transform: rotateX(-89.9999deg) translateZ(calc(-1 * var(--cube-offset)));
}

.cubeface.top {
	background: #7538;
}

.cubeface.bottom {
	background: #5738;
}

.cubeface.front {
	background: #1358;
}

.cubeface.back {
	background: #3578;
}

.cubeface.left {
	background: #5798;
}

.cubeface.right {
	background: #9ac8;
}

.terrain {
	display: grid;
	grid-template-columns: repeat(10, 20px);
	grid-template-rows: repeat(10, 20px);
	perspective: 800px;
	transform: rotateX(30deg) rotateZ(45deg);
}

.pixel {
	width: 20px;
	height: 20px;
	position: relative;
	transform-style: preserve-3d;
}

.pixel::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: green;
	transform: translateZ(0px);
}

.pixel.elevated::before {
	background-color: #228B22;
	transform: translateZ(10px);
}

.pixel.higher::before {
	background-color: #006400;
	transform: translateZ(20px);
}

.pixel.highest::before {
	background-color: #2E8B57;
	transform: translateZ(30px);
}

/*-.services>* {
	padding: 1px 4px;
	margin: 1px;
} */

#knowledge {
	display: flex;
	font-size: 5px;
	font-weight: 600;
}

.scroll-indicator {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	color: #fff;
	padding: 5px;
	font-size: 12px;
	border-radius: 3px;
	opacity: 0.8;
}

.scene::before {
  content: '';
  position: sticky;
  display: block;
  height: 2px;
  top: 100%;
  background: transparent;
  box-shadow: 0 0 30px 1px #fff;
  opacity: 0;
	visibility: hidden;
	user-select: none;
	pointer-events: none;
  transition: .31s ease-out;
  z-index: 9999;
}

.scene.has-scroll::before {
  opacity: 1;
	visibility: visible;
}

.preloader {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}