@charset "UTF-8";

h1,
h2,
h3,
h4,
h5,
h6,
p {
	color: hsl(0, 0%, 100%);
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
p::selection {
	color: hsl(0, 100%, 0%);
	background-color: white;
}

.container {
	display: flex;
	position: relative;
	width: 100%;
	height: 100vh;
	align-items: center;
	justify-content: center;
}

.container-main {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: black;

	transition: opacity 1s 0s ease, border-radius 1s 0s ease, width 1s 0s ease, height 1s 0s ease;
}

#link {
	color: white;
	font-weight: bolder;
	font-size: 3rem;
	background-color: hsl(0, 0%, 15%);
	width: calc(14 * var(--unit));
	aspect-ratio: 16/4.5;
	border-radius: var(--unit);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: none;
	transition: background .1333s 0s ease-out;
}

#link:hover {
	background: hsl(0, 0%, 18%);
}

#link:active {
	background: hsl(0, 0%, 20%);
}

#link:focus {}

timeouted {
	position: absolute;
	background: hsl(0, 0%, 100%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	border-radius: 50%;
	animation: timeouted-animation .65s 0s cubic-bezier(.25, -0.01, .45, 1.01) forwards;
	filter: blur(.3rem);
}

@keyframes timeouted-animation {
	0% {
		width: 5px;
		height: 5px;
		opacity: 0.5;
	}

	100% {
		width: 1000px;
		height: 1000px;
		opacity: 0;
	}
}

div.tooltip {
	display: block;
	outline: none;
	font-family: "Roboto", "Noto", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: .845rem;
	background-color: hsl(0, 0%, 40%);
	color: white;
	padding: calc(var(--unit) / 3);
	border-radius: calc(var(--unit) / 4);

	margin: 8px;
	text-transform: none;
	word-break: normal;
	font-size: 1.2rem;
	line-height: 1.8rem;
	font-weight: 400;
}


.copy-message-container {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	height: 10vh;
	bottom: 1rem;
	margin: 0 2.5rem;
	transition: all 1s 0s ease;
	z-index: 1;
}

.copy-message-container.hidden {
	opacity: 0;
	visibility: hidden;
	transform: translate(0, 110%);
}

.copy-message-container.visible {
	opacity: .85;
	visibility: visible;
	transform: translate(0, 0);
}

.copy-message {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;

	background: black;
	border-radius: 1.333rem;
	padding: 1rem;
	align-items: center;
	justify-content: flex-start;
}

.copy-message span {
	color: white;
	font-size: 2.233rem;
	font-weight: bolder;
	padding: 0 3rem;
}

@media screen and (max-width: 483px) {
	.copy-message-container {
		margin: 0 1.333rem;
	}

	.copy-message {
		padding: .33rem;
		border-radius: 1.6333rem;
	}

	.copy-message span {
		padding: 0 1rem;
		font-size: 1.633rem;
	}
}



body::-webkit-scrollbar {
	width: 1rem;
}

body::-webkit-scrollbar-track {
	margin: 1.333rem 0;
}

body::-webkit-scrollbar-button {
	opacity: 0;
	visibility: hidden;
	display: none;
}

::-webkit-scrollbar-thumb {
	background: hsl(0, 0%, 65%);
	border-radius: .5rem;
}

body {
	overflow: overlay;
}