* { 
	margin: 0;
	padding: 0;
	font-weight: normal;
}


body {
	padding: 0;
	margin: 0;
	background: #eeedec;
}

#screen {
    height: 100%;
    width: 100%;
	position: absolute;
	overflow:hidden;
/*	border: 4px solid #50a; */
}

#canvas {
    height: 100%;
    width: 100%;
	position: absolute;
/*	border: 4px solid #05a; */
}



	h2 { 
		font-family: 'Roboto', sans-serif;
		font-size: 2vw;
		display: block;
		position: relative;
		font-weight: 400;
		color: #d43;
		padding: .3em;
		text-transform: uppercase;
		mix-blend-mode: color-burn;
	}

	span, p {
		font-size: 1.4vw;
		font-family: 'Reenie Beanie', cursive;
	}

	#cashflow {
		color: #383433;
		font-family: 'Roboto', sans-serif;;
		font-weight: 400;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
	/*  border: 2px solid red;*/
	}

	.glitch { 
		font-family: 'Alegreya', serif;
		font-weight: 900;
		color: #b2f330;
		mix-blend-mode: screen;
		font-size: min(21vw,380px);
		line-height: 13vw;
		display: block;
		position:relative;
		padding-bottom:2vw;
		animation: glitch 12s 5s infinite;
		mix-blend-mode: multiply;
	/*	border: 4px solid #ff0; */
	}

.notefromauthor {
	white-space: nowrap;
	color: #8c8980;
}

@media 	only screen and (max-width: 1000px) and (min-resolution: 2x) and (orientation: portrait),
		only screen and (max-width: 600px) {

	h2 { 
		font-family: 'Roboto', sans-serif;
		font-size: 8vw;
		line-height: 7vw;
		display: block;
		position: relative;
		font-weight: 400;
		color: #d43;
		padding: .3em;
		text-transform: uppercase;
		mix-blend-mode: color-burn;
		transform: translate(-1.7vw, 0);
	}

	span, p {
		font-size: 4vw;
		font-family: 'Reenie Beanie', cursive;
	}

	#cashflow {
		color: #383433;
		font-family: 'Roboto', sans-serif;;
		font-weight: 400;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
	/*  border: 2px solid red;*/
	}

	.glitch { 
		font-family: 'Alegreya', serif;
		font-weight: 900;
		color: #b2f330;
		mix-blend-mode: screen;
		font-size: min(32vw, 380px);
		line-height: 19vw;
		display: block;
		position:relative;
		padding-bottom:3vw;
		animation: glitch 12s 5s infinite;
		mix-blend-mode: multiply;
	/*	border: 4px solid #ff0; */
	}
	
}


#eyecancer {
 	
    bottom: 0;
    left: 50%;
    transform: translate(-150%, -50%);
/*	border: 4px solid blue;  */
}

#eyecancer_message:hover {
	text-decoration: line-through;
}

#eyecancer_warning {
	visibility: hidden;
	animation: wiggle 1s cubic-bezier(.80,.03,.90,.97) alternate-reverse infinite;
}

#eyecancer_message:hover ~ #eyecancer_warning {
	visibility: visible;
	color: #d43;
}



#puny {
 	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
/* border: 4px solid green;  */
}

#dollars {
	width: 100vw;
 	position: absolute;
    top: 50%;
    left: 100vw;
/*	border: 2px solid #c0c; */
}

#cashteaser {
	position: absolute;
	transform: translate(-105%, -50%);
/*	border: 2px solid #07f;*/
}

@media 	only screen and (max-width: 1000px) and (min-resolution: 2x),
		only screen and (max-width: 600px) {

	#cashteaser {
		position: absolute;
		transform: translate(-105%, 360%);
	/*	border: 2px solid #07f; */
	}
}

.glitch::after {
	content: attr(glitch-text);
  	position: absolute;
  	left: 2px;
  	color: #c04060;
  	mix-blend-mode: multiply;
  	animation: colourglitch1 4.5s 0s infinite, colourglitch2 3.4s 0s alternate-reverse infinite;
}
  
.glitch::before {
  	content: attr(glitch-text);
  	position: absolute;
  	left: 2px;
  	color: #5070f0;
  	mix-blend-mode: multiply;
  	animation: colourglitch1 4s 0s alternate-reverse infinite, colourglitch2 5.4s 0s infinite;
}

@keyframes glitch {
  	1.2% {transform: rotateX(10deg) skewX(90deg);}
  	1%, 1.5% {transform: rotateX(0deg) skewX(0deg);}
  	75% {transform: translate(0, 0);}
  	76% {transform: translate(1%, -0.3%);}
	77% {transform: rotate(-0.3deg);}
	77.4% {transform: rotate(0deg);}
  	100% {transform: translate(1%, -0.3%);}
}

@keyframes wiggle {
	10%, 90% {transform: translate(-.01em, 0); rotate(0deg);}
    20%, 80% {transform: translate(.02em, 0) rotate(.1deg);}
	30%, 50%, 70% {transform: translate(-.04em, 0) rotate(.3deg);}
	40%, 60% {transform: translate(.04em, 0) rotate(-.1deg);}
}

@keyframes colourglitch1 {
	3%, 7%, 17%, 20%, 33%, 48%, 58%, 70%, 93% {transform: translate(0, 0);}
  	1%, 5%, 42%, 74% {transform: translate(0.002em, 0.004em);}
  	15%, 26%, 51%, 75% {transform: translate(-0.004em, -0.002em);}
  	7%,24%,46%, 89% {transform: translate(0.002em, -0.003em);}
   	26%,64%, 100% {transform: translate(-0.002em, 0.004em);}
}

@keyframes colourglitch2 {
	2%, 9%, 12%, 20%, 38%, 44%, 59%, 74%, 91% {transform: translate(0, 0);}
  	6%, 33%, 67%, 83% {transform: translate(0.004em, 0.005em);}
  	22%, 25%, 46%, 96% {transform: translate(-0.005em, -0.004em);}
    14%,36%,53%, 79% {transform: translate(0.002em, -0.001em);}
   	26%,41%, 77% {transform: translate(-0.003em, 0.001em);}
}

#eyecancer {
	text-align: right;
	transform: rotate(-2deg);
}

.myeyes {
	animation: eyeattack 0.3s 0s alternate-reverse infinite;

}

@keyframes eyeattack {
	10% {background: #ff0000;}
	30% {background: #b8f366;}
	60% {background: #00ffe7;}
	90% {background: #0070ff;}
}

del {
	color: #000;
}

.screenposition-dollars {
	animation: getdollars 10s cubic-bezier(.15,1,0,1) alternate;
}

@keyframes getdollars {
	20%, 80% {transform: translate(-100%, 0);}
	100% {transform: translate(0, 0);}
}


/* ===================== */
/* === DARK MODE ======= */
/* ===================== */

#darkmode-section {
	position: absolute;
	bottom: 3vw;
	left: 50%;
	transform: translateX(-50%);
}

.darkmode-toggle {
	cursor: pointer;
}

.bulb-svg {
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	vertical-align: middle;
	margin-right: 0.2em;
}

.bulb-svg svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bulb-glass {
	fill: #ffcc00;
	transition: fill 0.3s;
}

.bulb-base {
	fill: #666666;
	transition: fill 0.3s;
}

/* dark mode active */
body.darkmode {
	background: #000 !important;
}

body.darkmode h2,
body.darkmode .notefromauthor,
body.darkmode #cashflow,
body.darkmode #eyecancer_warning,
body.darkmode del,
body.darkmode .dm-text {
	color: #000 !important;
}

body.darkmode .darkmode-toggle {
	color: #000 !important;
}

body.darkmode .glitch {
	color: #000 !important;
	mix-blend-mode: normal !important;
}

body.darkmode .glitch::before,
body.darkmode .glitch::after {
	color: #000 !important;
	mix-blend-mode: normal !important;
}

body.darkmode .bulb-glass {
	fill: #111111;
}

body.darkmode .bulb-base {
	fill: #111111;
}

body.darkmode .darkmode-toggle:hover .bulb-glass {
	fill: #fc0;
}

body.darkmode .darkmode-toggle:hover .bulb-base {
	fill: #999;
}