<div class="container">
	<div class="c2">
		<div class="boxx">
			<h1 class="">Kilogram Converter</h1>
			<form class="form" accept-charset="utf-8">
				<div class="formm">
					<input type="number" class="inp" placeholder="Enter Kilograms" id="val-input" />
				</div>
			</form>

			<div class="output" id="output">
				<div class="box">
					<div class="wrapper red">
						<h5>Pounds: </h5>
						<div id="pOutput" class="ans"></div>
					</div>
				</div>

				<div class="box">
					<div class="wrapper blue">
						<h5>Grams: </h5>
						<div id="gOutput" class="ans"></div>
					</div>
				</div>

				<div class="box">
					<div class="wrapper green">
						<h5>Ounces: </h5>
						<div id="ouncesOutput" class="ans"></div>
					</div>
				</div>

				<div class="box">
					<div class="wrapper orange">
						<h5>Volumes: </h5>
						<div id="VOutput" class="ans"></div>
					</div>
				</div>

				<div class="box">
					<div class="wrapper yellow">
						<h5>Tonnes: </h5>
						<div id="tOutput" class="ans"></div>
					</div>
				</div>

				<div class="box">
					<div class="wrapper purple">
						<h5>Stones: </h5>
						<div id="stOutput" class="ans"></div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>

<!-- Loader -->
<div class="loader">
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@500&display=swap");

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

body {
	background-color: #222;
	color: #eee;
}

.container {
	position: relative;
	display: none;
	opacity: 0;
	transition: opacity 4s ease;
}

.c2 {
	position: absolute;
	transform: translate(-50%, -50%);
	margin: 50%;
	padding-top: 50%;
}

.boxx {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

h1 {
	text-align: center;
	margin: 10px;
}

.form {
	margin-bottom: 10px;
	width: auto;
}

.inp {
	outline: none;
	width: 300px;
	border-radius: 10px;
	padding: 20px 20px 20px 5px;
	height: 10px;
	font-family: "Poppins", sans-serif;
}

.red {
	background-color: red;
	width: 300px;
}

.blue {
	background-color: blue;
	width: 300px;
}

.blue > .ans {
	color: #888;
}

.yellow {
	background-color: yellow;
	width: 300px;
	color: #aaa;
}

.green {
	background-color: green;
	width: 300px;
}

.orange {
	background-color: orange;
	width: 300px;
}

.purple {
	background-color: purple;
	width: 300px;
}

.box {
	margin-bottom: 10px;
	width: 100%;
}

.wrapper {
	padding: 10px 5px 10px 5px;
	border-radius: 10px;
	display: flex;
	position: relative;
	align-items: center;
}

.ans {
	position: absolute;
	color: #000;
	left: 150px;
	font-size: 12px;
}

h5 {
	text-transform: uppercase;
	padding: 5px 0 5px 0;
	font-family: "Epilogue", sans-serif;
	font-size: 15px;
}

/* Loader*/
.loader {
	margin: 50%;
	height: 20px;
	animation: rotate 3s linear infinite;
	transform-origin: bottom center;
	transition: opacity 1s ease-out;
}

.circle {
	height: 20px;
	width: 20px;
	background-color: #0101ff;
	border-radius: 60%;
	display: inline-block;
	margin: -10px;
	animation: grow 1.5s linear infinite;
	transform: scale(0);
}

.circle:nth-child(2) {
	background-color: #eee;
	animation-delay: 1s;
}

.circle:nth-child(3) {
	background-color: #ee0101;
	animation-delay: 0.5s;
}

@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes grow {
	50% {
		transform: scale(0.8);
	}
}

document.getElementById("output").style.visibility = "hidden";
document
	.getElementById("val-input")
	.addEventListener("input", function (input) {
		document.getElementById("output").style.visibility = "visible";
		let unit = input.target.value;
		document.getElementById("pOutput").innerHTML = unit * 2.205 + " pounds";
		document.getElementById("gOutput").innerHTML = unit * 1000 + " g";
		document.getElementById("ouncesOutput").innerHTML = unit * 35.274 + " ounces";
		document.getElementById("VOutput").innerHTML = unit / 1000 + "m³";
		document.getElementById("tOutput").innerHTML = unit / 1000 + " tonnes";
		document.getElementById("stOutput").innerHTML = unit / 6.35 + " stone";
	});

//Loader
const loader = document.querySelector(".loader");
const container = document.querySelector(".container");

function display() {
	setTimeout(function () {
		loader.style.display = "none";
		loader.style.opacity = 0;

		container.style.display = "block";
		setTimeout(() => (container.style.opacity = 1), 50);
	}, 5000);
}

display();