@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;600;800&display=swap');

*::selection {
	color: rgb(0, 0, 0);
	background-color: rgb(0, 255, 0);
}
* {
	font-family: 'Noto Sans Display', sans-serif;
	font-size: 20px;
}
html {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgb(0, 0, 0);
}
input,
p,
h1,
h2,
h3 {
	color: rgb(0, 255, 0);
}
h1 {
	text-align: center;
	font-size: 70px;
}
.formCont {
	margin: 0;
	width: 70vw;
	height: 40vh;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
	flex-direction: column;
}
.encOutput,
.decOutput {
	font-size: 30px;
	text-align: center;
	width: 40vw;
	height: 15vh;
}
input {
	box-sizing: border-box;
	width: 30vw;
	height: 5vh;
	border: 1px solid black;
	border-radius: 10px;
	background-color: rgb(29, 29, 29);
}
.encInput,
.decInput {
	text-align: center;
	width: 40vw;
	height: 9vh;
	font-size: 25px;
}
.formCont div {
	width: 70vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-content: center;
}
.alert {
	top: 50vh;
	right: 30vw;
}
.alert,
.alert2 {
	width: 50vw;
	height: 15vh;
	font-weight: 800;
	text-align: center;
	font-size: 55px;
	background-color: rgb(255, 255, 255);
	color: black;
	position: absolute;
	border-radius: 16px;
	display: none;
	z-index: 100;
}
button {
	width: 20vw;
	height: 10vh;
	border: none;
	outline: none;
	font-size: 30px;
}
button:hover {
	opacity: 0.9;
	cursor: pointer;
}
input:focus,
input:hover {
	border: 1px solid green;
}
button {
	border-radius: 16px;
	background-color: rgb(0, 255, 0);
	color: black;
	font-weight: 800;
}
.secretHold{
	margin:20px;
	display: flex;
	flex-direction: column;
}
.secretHold i{
	color: rgb(0, 255, 0);
}
.secret{
	
	text-align: center;
}
@media (max-width: 800px) {
	.secret{
		width: 90vw;
	}
	* {
		flex-shrink: 0;
	}
	.formCont div {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 90vw;
		min-height: 30vh;
	}
	.formCont {
		margin: 15px;
	}
	.formCont:nth-of-type(1) {
		margin: 15px 0 55px 0;
	}
	h1 {
		font-size: 55px;
		margin: 50px;
	}
	.decInput,
	.encInput,
	.decOutput,
	.encOutput {
		min-width: 90vw;
	}
	.mainCont {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		justify-content: center;
		min-width: 100vw;
	}
	button {
		min-width: 50vw;
		margin: 10px;
	}
	.alert{
		top: 50vh;
		left: 0;
		right: 0;
	}
	.alert,
	.alert2 {
		min-width: 100vw;
		min-height: 27vh;
	}
}