/*
Copyright (C) jasperredis 2026

This CSS is Free Software licensed under the GNU General Public License 3.0
(GNU GPLv3). For that license, see the LICENSE-GPL file in the project root, or
see <https://gnu.org/licenses/gpl-3.0.en.html>.

Prior to 2026-09-07 (Monday, September 7th, 2026), this file was licensed under
the Creative Commons Attribution-ShareAlike 4.0 (CC BY-SA 4.0) by virtue of
being in the same repository as the CC BY-SA-licensed website. For that license,
see the LICENSE-CC-BY-SA file in the project root, or see
<https://creativecommons.org/licenses/by-sa/4.0/legalcode.en>, though DO NOTE
that this version of this file is NOT under that license.
*/

@font-face {
    font-family: 'PYR5x5';
    src: url('/fonts/PYR5x5Regular.ttf') format('truetype');
}

:root {
	font-family: sans-serif;
	--code-font: monospace;
	--font-btn-font: PYR5x5;
	--dark: #141923;
	--header-text: #141923;
	--grey: #4a566e;
	--light: #ffffff;
	--red-1: #750f0f;
	--red-2: #d9576c;
	--green-1: #0f673d;
	--green-2: #d3eca4;
	--bg-img: url("/images/lifeline.pyr/background.png");
}
:root.cool-font { font-family: PYR5x5; --code-font: PYR5x5; --font-btn-font: sans-serif; }
:root.light {
	--dark: #ffffff; --light: #141923;
	--red-2: #750f0f; --red-1: #d9576c;
}
:root.sand {
	--dark: #d18947; --light: #ffefc9;
	--red-2: #750f0f; --red-1: #d9576c;
	--bg-img: url("/images/lifeline.pyr/background-sand.png");
}
:root.ocean {
	--dark: #2b8282; --light: #ffefc9;
	--red-2: #750f0f; --red-1: #d9576c;
	--bg-img: url("/images/lifeline.pyr/background-thunder.png");
}
:root.watermelon {
	--dark: #e27d86; --light: #d3eca4;
	--red-2: #750f0f; --red-1: #d9576c;
	--bg-img: url("/images/lifeline.pyr/background-alt.png");
}
:root.demo {
	--dark: #750f0f; --light: #ffffff;
	--bg-img: url("/images/lifeline.pyr/background-red.png");
}
:root.original {
	--dark: #ca7728; --light: #141923;
	--red-2: #750f0f; --red-1: #d9576c;
	--bg-img: url("/images/lifeline.pyr/background-jrises.png");
}

body {
	background-color: var(--dark);
	color: var(--light);
	font-size: 19px;
	margin: 0;
}

/* Header */
header { text-align: center; }

#jasperredis-header nav a { padding: 0.5em; }
#jasperredis-header header { box-shadow: 0 0 10px black; position: relative; }
#jasperredis-header nav { padding: 0.5%; }

#lifelinepyr-header header {
	background-image: var(--bg-img);
	background-size: 30%;
	color: var(--header-text);
}
#lifelinepyr-header h2 { margin: 2px; }
#lifelinepyr-header #title { height: 15vh; padding: 1%; }
#lifelinepyr-header #new {
	background-color: var(--red-1);
	color: var(--light);
	width: 100%;
	padding: 0.5%;
}

/* Links */
a {
	display: inline-block;
	padding: 3px;
	background-color: var(--grey);
	text-decoration: none;
	color: var(--green-2);
}
a:hover, a:focus {
	color: var(--red-2);
	background-color: var(--light);
}

/* Footer */
#license-logos { width: 50%; }
footer {
	background-color: var(--light);
	color: var(--dark);
	text-align: center;
	padding: 2%;
}

/* Dropdown */
.dropdown-content {
	display: none;
	position: absolute;
	padding: 5px;
	background-color: var(--light);
	color: var(--dark);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content p { margin: 0; }
.dropdown:hover .dropdown-content { display: block; }

/* Other */
main { padding: 0 5% 0 5%; }
main img { width: 90%; }

.screenshot { width: 30%; border: 5px solid var(--light); transition: 0.2s ease-out; }
.screenshot:hover { transform: scale(1.1); box-shadow: 0px 0px 10px #000000; }
@media (prefers-reduced-motion: reduce) { .screenshot, .screenshot:hover { transition: none; } }

#laser { width: 5%; }

pyr { font-family: PYR5x5; }
th { text-align: left; }
th, td { border: 1px solid var(--light); padding: 5px; }
code, pre { font-family: var(--code-font); }

/* Look buttons */
.look-btn {
	border-radius: 0px;
	border: 3px solid;
	font-family: inherit;
	font-size: inherit;
	background-color: var(--light);
	color: var(--dark);
}
.wide { width: 100%; }
.look-btn:hover, .look-btn:focus { background-color: var(--dark); color: var(--light); }
#font-btn { margin: 20px 0 20px 0; font-family: var(--font-btn-font); }

/* Mobile */
@media screen and (max-width: 768px) {
    body { font-size: 14px; }
	header { padding: 0 5% 0 5%; }
	#title { height: 12vh; }
	.screenshot { width: 100%; }
}