@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap");

*
{
	font-family: 'Montserrat';
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	user-select: none;
    scroll-behavior: smooth;
    transition: 1s ease-in-out;
}

body
{
	width: 100%;
	height: 100vh;
}

.container-qr
{
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to top left, #202020, #404040);
	height: auto;
}

.image-qr
{
	width: 50%;
	place-items: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

.qr-code
{
	filter: drop-shadow(0px 0px 10px #000);
	border-radius: 10px;
	width: 350px;
}

.input-link
{
	place-items: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	width: 50%;
	height: 100vh;
	background: #404040;
}

.title
{
	filter: drop-shadow(2px 2px 1px #000);
	padding: 10px;
	color: white;
	font-size: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.form-control
{
	filter: drop-shadow(2px 2px 1px #000);
	margin: 20px 0px;
	color: white;
	font-size: 20px;
	width: 90%;
	border-radius: 50px;
	outline: none;
	border: 1px solid #fff;
	background: transparent;
	padding: 10px;
}

::placeholder
{
	color: white;
}

.button
{
	margin: 5px 0px;
	text-decoration: none;
	text-align: center;
	filter: drop-shadow(2px 2px 1px #000);
	width: 50%;
	height: auto;
	padding: 10px;
	background: transparent;
	color: white;
	font-size: 20px;
	border: 1px solid #fff;
	border-radius: 50px;
	outline: none;
	cursor: pointer;
}

.button:hover
{
	border: 1px solid green;
}

input:focus
{
	border: 1px solid green;
}

.credits
{
	filter: drop-shadow(2px 2px 1px #000);
	color: white;
	margin: 20px 0px;
}

.credits a 
{
	text-decoration: none;
	color: yellow;
}

.version
{
	filter: drop-shadow(0.5px 0.5px 1px #000);
	margin: 10px 0px;
	text-align: center;
}

@media(max-aspect-ratio: 16/9)
{
	.container-qr
	{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: linear-gradient(to top left, #202020, #404040);
		height: 100vh;
	}

	.image-qr
	{
		height: 100vh;
		width: 100%;
		place-items: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.qr-code
	{
		filter: drop-shadow(0px 0px 10px #000);
		border-radius: 10px;
		width: 500px;
	}

	.input-link
	{
		place-items: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 10px;
		width: 100%;
		height: 100vh;
		background: #404040;
	}

	.title
	{
		padding: 10px;
		color: white;
		font-size: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-control
	{
		margin: 20px 0px;
		color: white;
		font-size: 30px;
		width: 90%;
		border-radius: 50px;
		outline: none;
		border: 1px solid #fff;
		background: transparent;
		padding: 20px;
	}

	::placeholder
	{
		color: white;
	}

	.button
	{
		width: 50%;
		height: auto;
		padding: 10px;
		background: transparent;
		color: white;
		font-size: 40px;
		border: 1px solid #fff;
		border-radius: 50px;
		outline: none;
		cursor: pointer;
	}

	.button:hover
	{
		border: 1px solid green;
	}

	input:focus
	{
		border: 1px solid green;
	}

	.credits
	{
		font-size: 30px;
		color: white;
		margin: 20px 0px;
	}

	.credits a 
	{
		text-decoration: none;
		color: yellow;
	}

	.version
	{
		margin: 10px 0px;
		text-align: center;
	}
}