@import url("./main.css");

body {
	background-color: var(--color-background0);
}

/* header start */
header {
	display: inline-flex;
	position: fixed;
	background-image: linear-gradient(to right, var(--color-primary) 0%, #0000 200px);

	width: 100%;
	height: 50px;
	padding: 5px;

	align-items: center;
	justify-content: space-between;
}
header #tnbx-logo {
	height: 100%;
	filter: invert(1);
}
header #header-links {
	display: inline-flex;
	backface-visibility: hidden;

	margin-right: 5px;
}
header #header-links li {
	display: inline;
	margin: 0 5px;
}
header #header-links li a {
	color: var(--color-primary);
	text-decoration: none;

	transition: 500ms;
}
@media (pointer:fine) {
	header #header-links li a:hover {
		text-shadow:    0 0 3px var(--color-primary),
						0 0 3px var(--color-primary);
		filter: brightness(120%);
	}
}
/* header end */

/* first screen start */
section#first-screen {
	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100dvh;
	padding: 25px;
	padding-top: 50px;
	
	color: var(--color-primary);

	justify-content: end;
	align-items: center;
}

section#first-screen button {
	cursor: pointer;

	height: 85%;
	width: 90%;
	margin: auto 0;

	border: 3px dashed;
	background-color: #0000;
	
	color: var(--color-primary);
	font-size: 12pt;
	font-weight: 700;

	transition: 500ms;
}
@media (pointer:fine) {
	section#first-screen button:hover {
		border: 12px solid;
		background-color: var(--color-background1);
	}
}
section#first-screen p {
	font-size: 12pt;
	font-weight: 700;
	text-align: center;
}
@media screen and (max-width: 800px) {
	section#first-screen p {
		font-size: 10pt;
	}
}
/* first screen end */

span.blink {
	animation: cursor 1s linear infinite;
}

/* animations start */
@keyframes cursor {
	0%		{color: #0000;}
	49% 	{color: #0000;}
	50%		{color: inherit;}
	99%		{color: inherit;}
	100% 	{color: #0000;}
}
/* animations end */