@import url(/resources/fonts/web-fonts.css);

* {
	box-sizing: border-box;
}

/* THEME STYLES */
body {
	--bg-color: white;
	--txt-color: black;

	--unvisited-link: #0066cc;
	--visited-link: #551a8b;
	--active-link: #ee0000;

	cursor: var(--c-default), default;

}

body.dark {
	--bg-color: #252525;
	--txt-color: white;

	--unvisited-link: #6bb5ff;
	--visited-link: #b47ee7;
	--active-link: #ff6161;
}

a {
	cursor: var(--c-pointer), pointer;
	color: var(--unvisited-link);
}
a:visited {
	color: var(--visited-link);
}
a:active {
	color: var(--active-link);
}

input, label {
	cursor: var(--c-default);
}

button {
	cursor: var(--c-pointer);
}

/* GENERAL STYLES */

body {
	color: var(--txt-color);
	background-color: var(--bg-color);

	font-family: "Arial Pixelated 16", Arial, Helvetica, sans-serif;
	font-size: 16px;

	padding: 0;
	margin: 0;
}

.wrapper {
	max-width: 900px;
	margin: auto;
	position: relative;
}

p {
	line-height: 1.3em;
	padding: 0;
	margin: 10px 0;
}

h1 {
	font-family: "Times Pixelated 32", "Times New Roman", Times, serif;
	font-size: 64px;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

h2 {
	font-family: "Times Pixelated 16", "Times New Roman", Times, serif;
	font-size: 32px;
	margin: 0;
	padding: 0;

	white-space: nowrap;
}

hr {
	border: 0;
	border-top: 3px dotted var(--txt-color);
}

.crisp {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

/* BANNER STYLES */

.banner {
	display: flex;
	flex-direction: row;
	padding-right: 47px;
}

.bulb-box {
	display: flex;
	align-items: center;
	flex-direction: column;
	cursor: var(--c-pointer);
	padding: 0 10px;
}
.lightbulb {
	background-image: url(../img/bulb-on.png);
	width: 32px;
	height: 30px;
	background-size: 32px 30px;
}
body.dark .lightbulb {
	background-image: url(../img/bulb-off.png);
}
.bulb-chain {
	border-left: 2px dotted var(--txt-color);
	height: 30px;
	width: 0;
	transition: height 0.3s;
}
.bulb-box:hover .bulb-chain {
	height: 35px;
}
.bulb-box:active .bulb-chain {
	height: 40px;
}

.banner h1 {
	width: 100%;
	margin: auto;
	text-align: center;
	white-space: nowrap;
}

/* NAVIGATION STYLES */

nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

nav a,
.btn {
	background: #ccccff;
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;

	font-family: "MS Sans Pixelated 13", sans-serif;
	font-size: 12px;
	color: black;
	text-decoration: none;
	text-wrap: nowrap;

	padding: 5px 12px;
	width: fit-content;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;

	outline: none;
	border: none;
}
nav a:visited {
	color: black;
}
nav a:active,
.btn:active {
	color:black;
	box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
nav a:active img,
nav a:active span,
.btn:active span {
	position: relative;
	top: 1px;
	left: 1px;
}
nav a:focus, .btn:focus {
	outline: 1px dotted #000000;
	outline-offset: -4px;
}
nav a img {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;

	width: 32px;
}

.btn {
}

/* MAIN STYLES */
main {
	display: grid;
	column-gap: 20px;
	row-gap: 10px;
	padding: 25px 0;
}

main > div {
	border: 3px ridge black;
	position: relative;
	padding: 10px;
	padding-top: 15px;
}

main > div > h2 {
	position: absolute;
	top: -25px;
	left: 15px;
	padding: 0 3px;
	background-color: var(--bg-color);
}

@media (max-width: 700px) {
	/* h1 {
		padding: 0;
		margin: 0;
		/font-size: 9.6vmin;
	}
	.banner {
		padding-right: 0;
		justify-content: baseline;
	} */
}

@media (max-width: 450px) {
	h1 {
		font-size: 14.3vmin;
	}
	.bulb-box {
		padding-right: 3px;
	}
}