@import url(t_os_fonts.css);
@import url(t_os_glossy.css);

:root
{
	--teaos-inset-link-color: linear-gradient(0deg, #aa78ed 0%, #9f5eb5 100%);
	--teaos-inset-text-outline: drop-shadow(-1.5px -1px 0.7px #0000004d);
	--teaos-inset-text-color-default: linear-gradient(0deg, #9da8b7 0%, #d1dfe5 100%);
	--teaos-inset-text-color-green: linear-gradient(0deg, #6ac64b 0%, #318e35 100%);
	--teaos-inset-text-color-light-blue: linear-gradient(0deg, #97cded 0%, #3c65a1 100%);
	--teaos-background: url('/img/water.jpg') 700px -180px/2400px auto repeat;
	--teaos-gradient-gray: radial-gradient(100% 90% at center top, #838f8ff2 0%, #525a5df2 95%);
	--teaos-gradient-blue: radial-gradient(100% 90% at center top, #115069f2 0%, #349ec2f2 95%);
	--teaos-gradient-green: radial-gradient(100% 90% at center top, #5bd363f2 0%, #549c43f2 95%);
	--teaos-gradient-purple: radial-gradient(100% 90% at center top, #986ddef2 0%, #633372f2 95%);
}

.use-custom-cursor,
.use-custom-cursor *
{ cursor: url('/img/airplane_cursor_low-res.png') 1 1, auto; }

.use-custom-cursor a,
.use-custom-cursor a *,
.use-custom-cursor button,
.use-custom-cursor button *
{ cursor: url('/img/airplane_cursor_low-res_select.png') 3 22, auto; }

.inset
{
	text-transform: lowercase;
	filter: var(--teaos-inset-text-outline);
	background: var(--teaos-inset-text-color-default);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

a.inset
{
	text-transform: lowercase;
	background: var(--teaos-inset-link-color);
	filter: var(--teaos-inset-text-outline);
	background-clip: text;
	-webkit-text-fill-color: transparent;

	&:hover
	{
		text-transform: lowercase;
		background: var(--teaos-inset-link-color);
		filter: var(--teaos-inset-text-outline) brightness(110%);
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	&:active
	{
		text-transform: lowercase;
		background: var(--teaos-inset-link-color);
		filter: var(--teaos-inset-text-outline);
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

body
{
	margin: 0;
	background: var(--teaos-background);
}

#everything
{
	display: flex;
	flex-flow: column;
	height: 100vh;
	backdrop-filter: blur(8px);
}

#header
{
	display: flex;
	padding-left: 2vw;
	background: var(--teaos-gradient-blue);
	height: 140px;

	& a, & a:hover, & a:active
	{
		background: var(--teaos-inset-text-color-default);
		background-clip: text;
		text-decoration: none;
		font-family: 'Noto Sans Display';
		font-size: 90px;
		& sup
		{
			font-size: 70px;
		}
	}

	& .stinger
	{
		font-family: 'Noto Sans Display';
		font-weight: 500;
		font-size: 20px;
		align-self: end;
	}
}

#teaos
{
	flex: 1;
	overflow: auto;
	z-index: 2;

	& .content
	{
		margin: 10px;
		flex-grow: 1;

		& button
		{
			display: flex;
			justify-content: center;
			width: 320px;
			height: 15vh;
			min-height: 100px;
			background: var(--teaos-gradient-green);
			border: none;
			border-radius: 15px;
			font-family: 'Noto Sans Display';
			margin-top: 10px;

			&:hover
			{ filter: brightness(110%); }

			&:active
			{ filter: brightness(90%); }

			p
			{
				font-size: 60px;
				align-self: center;
			}
		}


		& #blag-preview
		{
			background: var(--teaos-gradient-gray);
			height: fit-content;
			border-radius: 15px;
			padding: 2vmin 4vmin 1vmin 1vmin;
			max-width: 900px;

			& .title
			{
				font-size: 40px;
				margin: 0;
				padding-left: 2vmin;
			}

			& #blag.preview
			{
				font-family: Frutiger;
				font-size: 18px;
				line-height: 27px;
				background: #fffffff0;
				background-clip: text;
				list-style: none;

				& .separator
				{ display: none; }
			}
		}
	}
}