:host {
	--color-bg: #2b3a45;
	--color-black1: #2b2b2b;
	--color-red1: #e3344e;
	--color-yellow1: #fedb00;
	--color-yellow2: #ffd200;
	--color-blue1: #0f3a96;
	font-family: Montserrat;
}

a {
	width: 300px;
	position: relative;
	text-decoration: none;
	cursor: pointer;
}

	a.w325 {
		width: 325px;
	}

	a.w600 {
		width: 600px;
	}

.state-icon {
	position: absolute;
	z-index: 15;
	top: 10px;
	left: 20px;
}

.top-bar {
	background-color: var(--color-black1);
	height: 35px;
}

.top-spacer {
	height: 35px;
}

.main {
	padding: 60px 25px 0 25px;
	line-height: 32px;
	position: relative;
	z-index: 10;
}

	.main .cover {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}

	.main .tagline {
		font-family: Bevan;
		text-align: left;
		margin-bottom: 20px;
	}

		.main .tagline span {
			text-shadow: 0px 0px 1px rgb(20 5 7 / 80%);
		}

	.main button {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
		font-family: Montserrat;
		font-size: 16px;
		font-weight: 700;
		line-height: 35px
	}

	.main .copyright {
		color: var(--color-black1);
		font-size: 8px;
		font-weight: 700;
		line-height: 4px;
		padding-bottom: 8px;
	}

	.main.trivia-q {
		background-color: #299986;
	}

		.main.trivia-q .cover {
			background: url('images/tile-trivia.png') center;
			background-size: 200%;
			opacity: .25;
		}

		.main.trivia-q .intro {
			color: white;
			font-family: Montserrat;
			font-size: 22px;
			font-weight: 500;
			line-height: 1em;
			text-align: left;
			margin-bottom: 30px;
		}

		.main.trivia-q .tagline {
			color: #ffd200;
			font-size: 28px;
			line-height: 32px;
		}

		.main.trivia-q button {
			color: white;
			border: solid 2px white;
			background-color: rgba(1, 47, 149, 0.35);
		}

	.main.trivia-01 {
		background-color: #2278a9;
	}

		.main.trivia-01 .cover {
			background: url('images/tile-trivia.png') center;
			background-size: 200%;
			opacity: .4;
		}

		.main.trivia-01 .tagline {
			color: white;
			font-size: 28px;
			line-height: 32px;
		}

			.main.trivia-01 .tagline span {
				color: #ffd200;
			}

		.main.trivia-01 button {
			color: white;
			border: solid 2px white;
			background-color: rgba(1, 47, 149, 0.35);
		}

	.main.worddeduce-01 {
		background-color: #ffd200;
	}

		.main.worddeduce-01 .cover {
			background: url('images/tile-worddeduce.png') center;
			background-size: 150%;
			opacity: .2;
		}

		.main.worddeduce-01 .tagline {
			color: var(--color-black1);
			font-size: 36px;
			line-height: 40px;
		}

			.main.worddeduce-01 .tagline span {
				color: #e3344e;
			}

		.main.worddeduce-01 button {
			color: var(--color-black1);
			border: solid 2px var(--color-black1);
			background-color: rgba(255, 255, 255, 0.3);
		}

	.main.wordsearch-01 {
		background-color: #9ad645;
	}

		.main.wordsearch-01 .cover {
			background: url('images/tile-wordsearch.png') center;
			background-size: 200%;
			opacity: .3;
		}

		.main.wordsearch-01 .tagline {
			color: var(--color-black1);
			font-size: 36px;
			line-height: 40px;
		}

			.main.wordsearch-01 .tagline span {
				color: #e3344e;
			}

		.main.wordsearch-01 button {
			color: var(--color-black1);
			border: solid 2px var(--color-black1);
			background-color: rgba(255, 255, 255, 0.35);
		}

	.main.wordguess-01 {
		background-color: #2e3192;
	}

		.main.wordguess-01 .cover {
			background: url('images/tile-wordguess.png') center;
			background-size: 150%;
			opacity: .4;
		}

		.main.wordguess-01 .tagline {
			color: white;
			font-size: 32px;
			line-height: 38px;
		}

			.main.wordguess-01 .tagline span {
				color: #ff9e1b;
			}

		.main.wordguess-01 button {
			color: white;
			border: solid 2px white;
			background-color: rgba(102, 45, 145, 0.5);
		}

	.main.lets-play {
		background-color: var(--color-black1);
	}

		.main.lets-play .cover {
		}

		.main.lets-play .tagline {
			color: white;
			font-size: 32px;
			line-height: 36px;
		}

			.main.lets-play .tagline span {
				color: #ffd200;
			}

		.main.lets-play button {
			color: white;
			border: solid 2px white;
			background-color: var(--color-black1);
		}

.launcher {
	padding: 14px;
	background-color: var(--color-bg);
	color: white;
	font-family: Bevan;
	font-size: 16px;
	line-height: 1em;
	text-align: center;
}

	.launcher .header {
		text-align: left;
		font-size: 13.5px;
		display: flex;
	}

		.launcher .header .header-text {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}

		.launcher .header .state-icon {
			zoom: .85;
			position: initial;
		}

		.launcher .header.il .state-icon {
			margin-right: 10px;
		}

		.launcher .header .title {
			font-size: 2em;
			line-height: 1em;
		}

		.launcher .header .tag-line {
			font-size: .88em;
			font-family: Montserrat;
		}

	.launcher .tile-container {
		margin: 10px 0;
	}

	.launcher .game-tile {
		text-align: left;
		color: var(--tile-title-color);
		font-size: 20px;
		padding: 9px 0 6px 10px;
		margin: 5px 0;
		border-radius: 3px;
		position: relative;
		z-index: 1;
		text-shadow: 0px 0px 2px rgb(20 5 7 / 50%);
		background-size: cover;
	}

		.launcher .game-tile .cover {
			border-radius: 3px;
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			z-index: -1;
			background-color: var(--tile-cover-color);
			opacity: .75;
		}

		.launcher .game-tile.worddeduce {
			--tile-title-color: var(--color-blue1);
			--tile-cover-color: #ffd741;
			background-image: url('images/tile-worddeduce.png');
			background-position: center top;
		}

		.launcher .game-tile.trivia {
			--tile-title-color: var(--color-yellow2);
			--tile-cover-color: transparent;
			background-image: url('images/tile-trivia.png');
			background-position: center center;
		}

		.launcher .game-tile.wordsearch {
			--tile-title-color: var(--color-red1);
			--tile-cover-color: #acf14e;
			background-image: url('images/tile-wordsearch.png');
			background-position: center center;
		}

			.launcher .game-tile.wordsearch .cover {
				opacity: .5;
			}

		.launcher .game-tile.wordguess {
			--tile-title-color: #ff9e1b;
			--tile-cover-color: #662d91;
			background-image: url('images/tile-wordguess.png');
			background-position: center center;
		}

			.launcher .game-tile.wordguess .cover {
				opacity: .5;
			}

	.launcher button {
		color: white;
		background-color: transparent;
		padding: 3px 0 2px 0;
		border: solid 1px white;
		border-radius: 3px;
		text-align: center;
		font-family: Bevan;
		width: 140px;
		cursor: pointer;
	}

	.launcher.w325 {
		padding: 10px;
	}

		.launcher.w325 .tile-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 0 0 2px 0;
		}

			.launcher.w325 .tile-container .game-tile {
				box-sizing: border-box;
				flex-basis: 49%;
				font-size: 14px;
				padding: 7px 5px 5px 5px;
				margin: 4px 0;
			}

@media screen and (max-width: 325px) {
	a {
		transform: scale(.8);
	}
}