* {
	transition: all ease;
}
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #010f19;
}

.header {
	width: 100vw;
	height: 18vh;
	/* background: rebeccapurple; */
	/* padding: 0 240px; */
	display: flex;
	/* flex-flow: column; */
	justify-content: center;
	align-items: center;
}

.logo img {
	width: 200px;
	margin: 20px 0;
}

input {
	height: 46px;
	width: auto;
	padding-left: 20px;
	border-radius: 20px;
	border: 2px solid #047ac9;
	font-family: sans-serif;
	font-size: 24px;
	outline: none;
	display: block;
	background-color: transparent;
	color: white;
}

input:focus {
	border-radius: 20px;
	border-color: white;
}

label {
	display: inline-block;
	font-size: 18px;
	font-family: sans-serif;
	margin-bottom: 10px;
	color: white;
}

::placeholder {
	font-family: sans-serif;
	font-weight: 500;
}

.fieldholder {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 80vh;
	align-items: center;
	justify-content: center;
}

.container {
	border: 2px #047ac9 solid;
	border-radius: 20px;
	padding: 40px 40px;
	background: linear-gradient(
		148deg,
		rgba(255, 255, 255, 0.06486344537815125) 0%,
		rgba(1, 12, 20, 0.13489145658263302) 100%
	);
}

.container div:nth-child(2) {
	margin: 20px 0;
}

.container div:nth-child(3) {
	margin: 32px 0;
}

.container div {
	/* width: 74%; */
}

#lblValue {
	display: block;
	font-size: 40px;
	font-family: monospace;
	text-align: left;
	margin-right: 10px;
	color: #047ac9;
}

.result {
	display: flex;
	flex-direction: row;
}

.reset {
	display: inline;
	cursor: pointer;
	opacity: 0.8;
}

.reset:hover {
	cursor: pointer;
	animation: spin 0.5s ease;
	transform: scale(1.1);
	opacity: 1;
}

.floaters {
	position: absolute;
	margin: 0;
	padding: 0;
	z-index: -19;
	height: 100vh;
	width: 100vw;
}

.floaters img {
	position: relative;
	display: inline;
}

.floaters .b1 {
	top: 77vh;
	left: 30vw;
	-webkit-animation: floating 10s ease-in-out 0s infinite both;
	animation: floating 10s ease-in-out 0s infinite both;
}

.floaters .b2 {
	bottom: -16vh;
	left: 62vw;
	/* filter: blur(8px); */
	-webkit-animation: floating-reversed 10s ease-in-out 0s infinite both;
	animation: floating-reversed 10s ease-in-out 0s infinite both;
}

@keyframes spin {
	100% {
		transform: rotate(-180deg);
	}
}

@keyframes floating {
	from,
	to {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	65% {
		-webkit-transform: translate(0, 35px);
		transform: translate(0, 35px);
	}
}

@keyframes floating-reversed {
	from,
	to {
		-webkit-transform: translate(0, 35px);
		transform: translate(0, 35px);
	}

	65% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@media screen and (max-width: 402px) {
.fieldholder {
    width: auto;
    height: 80vh;
}
.container {
	padding: 22px 22px;
	background: linear-gradient(
148deg
, rgb(18 29 40) 0%, rgb(2 15 25) 100% );
}
.floaters .b2 {
    bottom: -10vh;
    left: 62vw;
}
.floaters .b1 {
    top: 79vh;
    left: 48vw;
}
.header {
    width: 100vw;
    height: 10vh;
    justify-content: center;
    align-items: baseline;
}
.logo img {
    width: 160px;
}
input {
	height: 44px;
	font-size: 20px;
	width: 74vw;
}
}