/*

RoboCalc - DXM Trip Calculator
Copyright (C) 2023 Matthew Evan 

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.


*/


html {
	background-color:#17001b;
	color:#ffecdb;
	font-family:'Karla', sans-serif;
	text-shadow:1px, 1px, 5px, black;
}

#bodylol {
	display:flex;
	justify-content:center;
	align-items:center;
	height:95vh;
	ooverflow:scroll;
	font-size:17px;
	margin:0 auto;
}

a {
	color:#ffecdb;
}

#error {
	display:none;
}

#nexparam {
	display:none;
}

@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');

#main-container {
	z-index:3;
	width:100%;
	max-width:350px;
	/*margin:0 auto;*/
	text-align:center;
}

p, h1, h2, h3 {
	font-family:'Karla', sans-serif;
	color:#ffecdb;
}

h1, h2, h3 {
	border-bottom:1px dashed #ffecdb;
	padding-bottom:3px;
}

ul {
	text-align:left;
}

hr {
	border-top:1px solid #ffecdb;
}

p {
	text-align:left;
}


input, select, button {
	font-family:'Karla', sans-serif;
	border: 3px solid #ffecdb;
	background-color:black;
	color:#ffecdb;
	padding:5px;
	background: rgba(0,0,0,0.5);
	font-size:18px;
}

table, tr, td {
	border: 3px solid #ffecdb;
	border-collapse:collapse;
	text-align:center;
}

label {
	font-weight:bold;
	font-size:18px;
}

#graph {
	display:none;
}

#plat, #legend {
	background-color:black;
}

#plat {
	width:100%;
	margin:0 0;
}
#legend{
	font-family:'Karla', sans-serif;
	border: 3px solid #ffecdb;
	color:#ffecdb;
	background: rgba(0,0,0,0);
	font-size:18px;
}
td {
	padding:5px;
}

@keyframes colorize {
	0% {
		filter:hue-rotate(0deg) blur(3px);
	}
	50% {
		filter:hue-rotate(181deg) blur(8px);
	}
	100% {
		filter:hue-rotate(360deg) blur(3px);
	}
}

@keyframes rotate {
	/*
	0% {
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		-moz-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
	}
	*/
	0% {
		rotate:0deg;
	} 
	100% {
		rotate:360deg;
	}
}

@keyframes motion {
	0% {
		-webkit-transform:translate(0px, 0px);
		-moz-transform:translate(0px, 0px);
		-ms-transform:translate(0px, 0px);
	}
	10% {
		-webkit-transform:translate(20px, -20px);
		-moz-transform:translate(20px, -20px);
		-ms-transform:translate(20px, -20px);
	}
	20% {
		-webkit-transform:translate(-20px, 0px);
		-moz-transform:translate(-20px, 0px);
		-ms-transform:translate(-20px, 0px);
	}
	30% {
		-webkit-transform:translate(30px, 15px);
		-moz-transform:translate(30px, 15px);
		-ms-transform:translate(30px, 15px);
	}
	40% {
		-webkit-transform:translate(-20px, -30px);
		-moz-transform:translate(-20px, -30px);
		-ms-transform:translate(-20px, -30px);
	}
	50% {
		-webkit-transform:translate(-20px, -50px);
		-moz-transform:translate(-20px, -50px);
		-ms-transform:translate(-20px, -50px);
	}
	60% {
		-webkit-transform:translate(30px, -20px);
		-moz-transform:translate(30px, -20px);
		-ms-transform:translate(30px, -20px);
	}
	70% {
		-webkit-transform:translate(30px, -20px);
		-moz-transform:translate(30px, -20px);
		-ms-transform:translate(30px, -20px);
	}
	80% {
		-webkit-transform:translate(40px, 40px);
		-moz-transform:translate(40px, 40px);
		-ms-transform:translate(40px, 40px);
	}
	90% {
		-webkit-transform:translate(-20px, -20px);
		-moz-transform:translate(-20px, -20px);
		-ms-transform:translate(-20px, -20px);
	}
	100% {
		-webkit-transform:translate(0px, 0px);
		-moz-transform:translate(0px, 0px);
		-ms-transform:translate(0px, 0px);
	}
}

@keyframes pulse {
	0% {
		width:300%;
		height:300%;
	}
	10% {
		width:375%;
		height:375%;
	}
	20% {
		width:300%;
		height:300%;
	}
	30% {
		width:375%;
		height:375%;
	}
	40% {
		width:300%;
		height:300%;
	}
	50% {
		width:375%;
		height:375%;
	}
	60% {
		width:300%;
		height:300%;
	}
	70% {
		width:375%;
		height:375%;
	}
	80% {
		width:300%;
		height:300%;
	}
	90% {
		width:600%;
		height:600%;
	}
	100% {
		width:300%;
		height:300%;
	}
}

@keyframes bouncing {
	0% {
		transform:translateY(0px);
	}
	20% {
		transform:translateY(-7.5px);
	}
	100% {
		transform:translateY(0px);
	}
}

#bg {
	will-change:rotate, -webkit-transform, -moz-transform, -ms-transform, transform;
	margin:0 auto;
	z-index:10;
	width: 100vw;
	height: 100vh;
	display: none;
	ddisplay: flex;
	justify-content: center;
	align-items: center;
	overflow: visible;
	position:fixed;
	animation-name:rotate, motion;
	animation-duration:100s, 10s;
	animation-iteration-count:infinite, infinite;
}

#bg img {
	will-change:filter, width, height;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-name:colorize, pulse;
	animation-duration:30s, 10s;
	animation-iteration-count:infinite, infinite;
	filter: blur(5px);
	z-index:10;
}

#links {
	display:flex;
	position:fixed;
	width:50px;
	padding:5px;
	bottom:10px;
	left:10px;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	z-index:5;
}

#links > div {
	width:40px;
	margin-bottom:5px;
	text-align:center;
}

#links > a {
	opacity:50%;
	margin-bottom:5px;
}
#links > a:hover {
	opacity:100%;
}

#cr {
	display:flex;
	position:fixed;
	bottom:0px;
	right:0px;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	z-index:5;
	text-align:right;
	background-color:black;
	border-top:3px solid #ffecdb;
	border-left:3px solid #ffecdb;
	padding:5px;
}

@keyframes fade{

	0% {
		opacity:0%;	
	}
	5% {
		opacity:20%;
	}

	80% {
		opacity:20%;
	}
	100% {
		opacity: 0px;
	}
	
}

@keyframes move {
	0% {
		transform:translateX(0px);
	}
	100% {
		transform:translateX(300px);
		width:10px;
	}
}

.shape {
	will-change:transform, width, opacity;
	border-radius:50%;
	z-index:1;
	position:fixed;
	filter:blur(1px);
	animation-name:fade, move;
	animation-iteration-count:1, 1;
	animation-duration:5s, 5s;
	background-position:center;
	background-size:cover;
	opacity:25%;
}

@media screen and (max-width: 500px) {

	#links {
		/*display:none;*/
		position:relative;
		flex-direction:row;
		align-items:left;
		justify-content:left;
		height:50px;
		bottom:inherit;
		left:inherit;
		text-align:left;
	}
	#links > a {
		margin-right:10px;
		margin-bottom:0px;
	}
	#links > div {
		display:none;
	}


	#cr {
		display:block;
		border:none;
		position:relative;
		text-align:left;
		background-color:#17001b;
		font-size:smaller;
		opacity:0.50;
		padding:0px;
		padding-bottom: 10px;
	}

	.shape {
		display:none;
	}

}



#graphnote {
	font-style:italic;
	margin-top:4px;
	font-size:small;
	text-align:center;
}

center {
	text-align:center;
}

@keyframes lethal {
	0% {
		color:#ff0000;
		text-shadow:0px 0px 10px #ff0000;
	}
	50% {
		color:#b70000;
		text-shadow:0px 0px 5px #b70000;
	}
	100% {
		color:#ff0000;
		text-shadow:0px 0px 10px #ff0000;
	}
}

.lethal {
	font-weight:bold;
	color:red;
	animation-name:lethal;
	animation-duration:500ms;
	animation-iteration-count:infinite;
}

#lethalwarning {
	display:none;
}

#player {
	display:none;
	position:fixed;
	bottom:5px;
	right:5px;
}

#meet {
	animation-name:bouncing;
	animation-delay:120s;
	animation-iteration-count:500;
	animation-duration:1.5s;
}

#screenwarning{
	display:none;
	margin:0 auto;
	text-align:center;
	font-size:35px;
	opacity:0%;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

@keyframes fadeout {
	0% {
		opacity:80%;
	}
	90% {
		opacity:80%;
	}
	100% {
		opacity:0%;
	}
}

@media screen and (min-width: 1500px) {
	#screenwarning {
		position:fixed;
		opacity:0%;
		z-index:20;
		animation-name:fadeout;
		animation-duration:30s;
		animation-iteration-count:1;
	}
}