html, body {
		background: whitesmoke;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;

		font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;

	}

	input[type=file]
	{
		display: none;
	}
label
{
	position: absolute;
	
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background: black;
		width: 50%;
		transition: width 1s;
		aspect-ratio: 1/1;
		border-radius: 50%;
		outline: solid 2px white;
		outline-offset: 0px;
	animation: pulse 2s ease infinite;

	filter: drop-shadow(
      1px 2px 8px gray);

	cursor: pointer;
}

label:hover
{
	width: 9%;
}

label img
{
	width: 50%;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

}

@keyframes pulse {
		0% {
			outline-offset: 0px;
		}
		60% {
			outline-offset: 70px;
			outline-color: black;
		}
		100% {
			outline-offset: 80px;
			outline-color: white;
		}
	}

	h2
	{
		padding: 0;
	margin: 0;
	text-align: center;
	}

	#loadingDiv
	{
		
		position: absolute;
		left: 5%;
		top: 50%;
		transform: translateY(-50%);
		width: 80%;

		box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
		border-radius: 15px;

		background: white;
		padding: 5%;

		display: none;
		flex-direction: column;
		gap: 5%;

	}

	span {
		font-style: italic;
		color: gray;
	}

	#gap
	{
		height: 10px;
	}

	progress
	{
		 -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
   border-radius: 15px;
width: 100%;

	}

	progress[value]::-webkit-progress-bar 
	{
		 -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
   border-radius: 15px;
   width: 100%;

	}

progress[value]::-webkit-progress-value {
	background: black;
	  border-radius: 15px;
}

progress[value]::-moz-progress-bar { 
background: black;
  border-radius: 15px;
}


h3
{
	text-align: center;
	font-style: italic;
	padding: 0;
	margin: 0;
}

#finishedDiv
{
	position: absolute;
		top: 50%;
		left: 5%;
		width: 80%;
		transform: translateY(-50%);


		box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
		border-radius: 15px;

		background: white;
		padding: 5%;

		display: none;
		flex-direction: column;
		gap: 5%;
}


#link
{
	border: 1px solid black;
	background: white;
	width: 100%;
	display: grid;
	grid-template-columns: 80% 20%;	

	border-radius: 15px;

}

#link a{
	text-align: center;
	text-decoration: none;
	color: black;
	font-style: italic;
	font-size: 50%;

	text-decoration: underline;
	align-content: center;
}

#link button{
	width: 100%;
	height: 100%;
	background: black;
	color: white;
	border: none;
	border-left: 1px solid black;
	padding-block: 10px;

	cursor: pointer;

	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
}

#link button:hover{
	color: black;
	background: white;
}