body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	background-color: black;
	color: white;
	display: grid;
	place-items: center;
	height: 100vh;
	margin: 0;
	user-select: none;
}

.cont {
	width: 100%;
	max-width: 600px;
	padding: 0 5%;
	box-sizing: border-box;
}

#gh {
	position: fixed;
	left: 50%;
	translate: -50%;
	top: 15%;
	& a {
		display: block;
		height: fit-content;
		width: fit-content;
		&:hover svg {
			fill: white;

		}
	}
	& svg {
		height: 50px;
		cursor: pointer;
		fill: #8e8e8e;
	}
}

form {
	display: flex;
	flex-direction: column;
	width: 100%;
}

input {
	background-color: transparent;
	color: white;
	outline: none;
	border: none;
	border: 1px solid rgb(70, 70, 70);
	border-radius: 5px;
	font-size: 20px;
	padding: 5px 10px;
	background-color: rgb(25, 25, 25);
	width: 100%;
	box-sizing: border-box;
	/* max-width: 400px; */
	&:focus {
		outline: none;
		border: 1px solid rgb(180, 180, 180);
	}
}

label {
	font-size: 30px;
}


button[type="submit"] {
	font-size: 1.25rem;
	font-family: inherit;
	background-color: transparent;
	color: inherit;
	outline: none;
	border: 1px solid rgb(60, 60, 60);
	border-radius: 5px;
	width: 100px;
	height: 38px;
	cursor: pointer;
	align-self: end;
	&:hover {
		background-color: rgb(30, 30, 30);
	}
	&:focus {
		border-color: rgb(180, 180, 180);
	}
	&:active {
		background-color: rgb(50, 50, 50);
	}
}


.text {
	margin-top: 18px;
	min-height: 30px;
}

.mess {
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 20px 0;
	padding: 3px 0;
	height: 30px;
	border-radius: 10px;
	user-select: none;
	background-color: rgb(25, 25, 25);
}

.hoverable {
	cursor: pointer;
}

.hoverable:hover svg {
	fill: white;
}

#copy {
	margin-left: 10px;
	fill: #8e8e8e;
}

.copied {
	inset: 0;
	position: absolute;
	display: grid;
	place-items: center;
	background-color: inherit;
}

.off {
	/* display: none; */
	visibility: hidden;
}

.loader {
	visibility: hidden;
	display: block;
	--height-of-loader: 4px;
	--loader-color: #999;
	width: 130px;
	height: var(--height-of-loader);
	border-radius: 30px;
	background-color: rgba(255, 255, 255, 0.1);
	position: relative;
}

.loader::before {
	content: "";
	position: absolute;
	background: var(--loader-color);
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	border-radius: 30px;
	animation: moving 0.351s ease-in-out infinite;
	;
}

@keyframes moving {
	50% {
		width: 100%;
	}

	100% {
		width: 0;
		right: 0;
		left: unset;
	}
}