hexstyle.css

*,
*:before,
*:after {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: monospace;
}

*::selection {
	color: #ccc;
	background-color: rgba(55, 12, 255, 2);
}

:root {
	--sitebg:#fff;
	--first: rgba(113, 214, 165, 1);
	--second: rgba(107, 186, 178, 1);
	--third: rgba(102, 158, 191, 1);
	--fourth: rgba(99, 131, 199, 1);
}
html,
body {
	margin: 0;
}
html {
	cursor: url("arrow.png") 0 2, auto;
	xbackground: #f1f2da url("gridbg.png") repeat;
	background:var(--sitebg);
}
.wrapper {
	max-width: 90vw;
	margin: 5vh auto;
	padding-bottom: 37px;
}
.bgshade {
	background: #ebebde;
	opacity: 0.5;
	min-width: 100vw;
	min-height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.heading {
	max-width: 80vw;
	margin: 12vh auto 0;
	z-index: 1100;
}
.heading a:link,
.heading a:visited {
	color: #274f9d;
	letter-spacing: -1px;
	text-decoration: none;
}
.heading h1 {
	text-transform: uppercase;
}
.heading a:link span {
	color: #504dc7;
}
.heading h2 a:link,
.heading h2 a:visited {
	color: #888;
	font-size: 10px;
	letter-spacing: 1px;
}
.platform {
	max-width: 80vw;
	margin: 12px auto;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.1);
	position: relative;
	background: #b9c7da;
}
.platform .tools {
	position: relative;
	xbackground: #f1f2da;
	background: var(--sitebg);
	border: 0;
	margin: 0 auto;
	padding: 12px;
	margin: 12px;
	display: block;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1);
}
button {
	padding: 12px;
	background: #ddd;
	background: rgb(211 211 199);
	border: 0;
	border-radius: 3px;
	margin: 5px;
	font-size: 10px;
	vertical-align: middle;
	transition: background 0.34s ease;
}
button:hover {
	background: rgba(0, 0, 0, 0.1);
	cursor: url("pointer.png") 5 2, auto;
	background: rgb(225 225 208);
}
.color-selection {
	vertical-align: middle;
	display: inline-block;
	position: absolute;
	top: 12px;
	right: 12px;
}
.color-selection label {
	vertical-align: 100%;
	margin-right: 4px;
}
.platform .tools input[type="color" i] {
	appearance: auto;
	width: 40px;
	height: 40px;
	color: #000;
	border: 1px solid #ddd;
	border-image: initial;
	padding: 1px 2px;
	margin-top: 3px;
	cursor: url("pointer.png") 0 2, auto;
	transition: background 0.34s ease;
	background: #dddddd;
	background: rgb(211 211 199);
}
.platform .tools input[type="color" i]:hover {
	background: rgba(0, 0, 0, 0.1);
	background: rgb(225 225 208);
}
hr {
	background: rgba(0, 0, 0, 0.1);
	border: 0;
	height: 1px;
}
.platform .boxes {
	font-size:10px;
	margin: 0 auto;
	padding: 12px;
	position: relative;
}
.platform .colorramp {
	height: 250px;
	text-align: center;
	color: #fff;
	line-height: 2;
	padding-top: 100px;
	overflow: hidden;
	position: relative;
}
.platform .colorramp:nth-of-type(1) {
	background: rgba(0, 0, 0, 0.8);
}
.platform .colorramp:nth-of-type(2) {
	background: rgba(0, 0, 0, 0.6);
}
.platform .colorramp:nth-of-type(3) {
	background: rgba(0, 0, 0, 0.4);
}
.platform .colorramp:nth-of-type(4) {
	background: rgba(0, 0, 0, 0.2);
}

/* attribution */
.itchlink {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	padding:10px;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1);
	background: #ccc;
}
.itchlink a:link{
	text-decoration: none;
	cursor: pointer;
	cursor: url("pointer.png") 5 3, auto;
}
#copy-message {
	position: fixed;
	top: 10px;
	right: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	padding: 10px;
	border-radius: 5px;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
#copy-message.show {
	opacity: 1;
}
input:active,
button:active,
a:active {
	cursor:pointer;
	cursor: url("pointerclick.png") 5 1, auto;
}
/*cursors*/
html,
body {
	cursor: url("arrow.png") 0 2, auto;
}
.color-selection:hover,
input:hover,
label:hover,
.platform .tools input[type="color" i],
input:hover,
button:hover,
a:hover {
	cursor:pointer;
	cursor: url("pointer.png") 5 3, auto;
}
button:active,
a:active {
	cursor:pointer;
	cursor: url("pointerclick.png") 5 1, auto;
}
.colorramp:hover {
	cursor: url("hand.png") 5 3, auto;
}
.colorramp:active {
	cursor: url("grab.png") 5 1, auto;
}
.itchlink a:hover,
.itchlink button:hover {
	cursor:pointer;
	cursor: url("crosshair.png") 5 3, auto;
}
.questionmark:hover {
	cursor: url("questionmark.png") 5 1, auto;
}

/* start examples */
/* start examples */
/* start examples */

.pl30{
	padding-left:5vw;
}
.examples {
}
::selection {
    color: blue;
    background-color: rgba(255,255,255,.2);
}
.examples *{
	transition:all .24s ease;
}
.examples .wordart {
	text-indent:5px;
	margin-bottom: 10%;
	line-height:40px;
	transform: rotate(-3deg);
	color: #fff;
	font-size: 48px;
	text-transform: uppercase;
	font-family: sans-serif;
	font-weight: 900;
	letter-spacing: -1px;
	text-shadow: -1px -1px var(--first), 0px 1px var(--first), 1px 2px var(--first),
		2px 3px var(--first), 3px 4px var(--second), 4px 5px var(--second),
		5px 6px var(--second), 6px 7px var(--second), 7px 8px var(--third),
		8px 9px var(--third), 9px 10px var(--third), 10px 11px var(--third),
		11px 12px var(--fourth), 12px 13px var(--fourth), 13px 14px var(--fourth),
		14px 15px var(--fourth);
}
.examples .firstblock {
	width: 60%;
	height: 3vh;
	background: var(--first);
	border-top-right-radius:8px;
}
.examples .secondblock {
	width: 70%;
	height: 3vh;
	background: var(--second);
	border-top-right-radius:8px;
}
.examples .thirdblock {
	width: 80%;
	height: 3vh;
	background: var(--third);
	border-top-right-radius:8px;
}
.examples .fourthblock {
	width: 90%;
	height: 3vh;
	background: var(--fourth);
	border-top-right-radius:8px;
	margin-bottom: 24px;
}
.examples .gradient1 {
	display: inline-block;
	transform: rotate(180deg);
	border-radius: 6px;
	height: 100px;
	width: 33%;
	background: rgb(2, 0, 36);
	background: linear-gradient(
		80deg,
		var(--first) 0%,
		var(--second) 25%,
		var(--third) 61%,
		var(--fourth) 100%
	);
	margin-right: 15px;
}
.examples .gradient2 {
	display: inline-block;
	border-radius: 6px;
	height: 100px;
	width: 100px;
	background: rgb(2, 0, 36);
	background: linear-gradient(
		45deg,
		var(--first) 0%,
		var(--second) 25%,
		var(--third) 61%,
		var(--fourth) 100%
	);
}
.examples .details {
	font-family: monospace;
	margin-top: 24px;
	max-width: 210px;
	color: var(--fourth);
	cursor: pointer;
}
.examples .details details {
	margin-bottom: 14px;
	background: var(--first);
	padding-left: 4px;
}
.examples .details details summary {
	height: 24px;
	line-height: 24px;
	padding: 4px;
	margin-top: 12px;
	background: var(--second);
	color: #fff;
	background: linear-gradient(
		90deg,
		var(--first) 0%,
		var(--second) 44%,
		var(--third) 77%,
		var(--fourth) 100%
	);
}
.examples .details details p {
	padding: 8px 12px 12px;
	color: var(--fourth);
	font-weight: normal;
	text-shadow: 0 0 0 transparent;
}

.examples h1 {
	font-family: sans-serif;
	margin:30px 4px 32px;
}
.examples h1 span {
	border: 1px solid var(--fourth);
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 1px;
	padding: 10px 10px;
	background: var(--fourth);
	color: #fff;
	animation: colorfade 2s linear infinite;
	margin: 0 -4px;
}
.examples h1 span:nth-of-type(11) {
	animation-delay: 0.5s;
}
.examples h1 span:nth-of-type(10) {
	animation-delay: 0.45s;
}
.examples h1 span:nth-of-type(9) {
	animation-delay: 0.4s;
}
.examples h1 span:nth-of-type(8) {
	animation-delay: 0.35s;
}
.examples h1 span:nth-of-type(7) {
	animation-delay: 0.3s;
}
.examples h1 span:nth-of-type(6) {
	animation-delay: 0.25s;
}
.examples h1 span:nth-of-type(5) {
	animation-delay: 0.2s;
}
.examples h1 span:nth-of-type(4) {
	animation-delay: 0.15s;
}
.examples h1 span:nth-of-type(3) {
	animation-delay: 0.1s;
}
.examples h1 span:nth-of-type(2) {
	animation-delay: 0.05s;
}
.examples h1 span:nth-of-type(1) {
	animation-delay: 0s;
}

@keyframes colorfade {
	0% {
		background: var(--first);
		color: var(--first);
		border: 6px solid var(--first);
	}
	30% {
		border: 1px solid var(--fourth);
		background: var(--fourth);
		color: #fff;
	}
}

.examples .popup{
	font-family:sans-serif;
	font-size:12px;
	margin:22px 0 30px;
	border:1px solid black;
	box-shadow:4px 4px 0 0 #ccc;
	max-width:60%;
	min-width:270px;
}
.examples .toolbar{
	height:12px;
	line-height:13px;
	border-bottom:1px solid black;
	padding:8px;
	position:relative;
	background:#ccc;
	cursor:move;
	color:#333;
	padding-left:12px;
}
.examples .toolbar .rightside{
	line-height:1;
	position:absolute;
	right:9px;
	top:0;
	width:89px;
	text-align:right;
	display:flex;
}
.examples .toolbar .rightside div{
	display:inline-block;
	padding:8px 12px;
	cursor:pointer;
	cursor: url("pointerclick.png") 5 1, auto;
	margin:0;
	text-align:center;
}
.examples .toolbar .rightside div:nth-of-type(1){
	background:var(--first);
}
.examples .toolbar .rightside div:nth-of-type(2){
	background:var(--second);
}
.examples .toolbar .rightside div:nth-of-type(3){
	background:var(--third);
}
.examples .toolbar .rightside div:hover{
	background:var(--fourth);
}
.examples .popup .content{
	padding:12px;
	background:#eee;
}
.examples .popup .content p{
	margin-bottom:12px;
	font-size:12px;
	line-height:1.2;
}
.examples .popup .content button{
	cursor:pointer;
	cursor: url("pointerclick.png") 5 1, auto;
	background:#ccc;
	display:inline-block;
	margin:0 .23em 0 0;
	border:1px solid #777;
}
.examples .popup .content button:nth-of-type(2){
	background:var(--first);
}

.examples code {
	background: rgba(0,0,0,.1);
	border-radius: 3px;
	font-family: courier, monospace;
	padding: 0 2px;
}
.examples .dogtags {
	font-size:11px;
	font-weight:bold;
	text-transform:uppercase;
	border-radius:12px;
	margin: 34px 0 0 8px;
	line-height: 1.24;
	padding:12px 16px;
	background: var(--first);
	color:var(--fourth);
	font-family:monospace;
	box-shadow: 0 0 0 1px var(--second),0 0 0 2px var(--first),0 0 0 3px var(--third),0 0 0 4px var(--second),0 0 0 5px var(--third), 0 0 0 6px var(--third), 0 0 0 7px var(--fourth), 0 0 0 8px var(--fourth);
	max-width:60%;
	min-width:240px;
}