@import url("/static/fonts/Gotham.css");

:root {
	--primary: #f74;
	--secondary: #151e30;
	--tertiary: #3a4151;

	--text: #fff;
	--hyperlink: #42b9cc;
	--accent: #707a99;
	
	--error: #f77;
	
	--readable-area: 70vw;
}

body {
	background-color: var(--secondary);
	color: var(--text);
	font-family: "Gotham Book", sans-serif;
}

h1,
h2,
h3 {
	font-weight: 400;
}

a {
	color: var(--hyperlink);
}

modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.header {
	display: flex;
	flex-direction: row;
}

.title-section {
	border-bottom: 1px solid #707998;
	font-size: 3em;
	margin-inline: 1em;
	padding-bottom: 0.5em;
}

.title-logo {
	--size: 10em;

	display: block;
	width: var(--size);
	height: var(--size);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("/static/TigerSolar.png");
}

.forminput {
	font-family: "Gotham Book", sans-serif;
	font-size: 0.85em;
	background-color: var(--tertiary);
	color: var(--text);
	border: none;
	border-radius: 0.5em;
	padding: 1em;
	margin-block: 0.75em;
}

.forminput:focus {
	outline: var(--primary) 2px solid;
}

.forminput::placeholder {
	color: var(--text);
	opacity: 0.75;
}

.input-label {
	margin-bottom : -0.5em;
}

.password-group {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
}

.password-group > input {
	width: -webkit-fill-available;
}

.password-group > button {
	position: relative;
	color: white;
	margin-block: 0.75em;
	width: 3em;
	margin-right: -3em;
	transform: translateX(-3em) scale(0.75);
	border: none;
	background-color: transparent;
	opacity: 0.75;
	transition : opacity 0.1s, transform 0.1s;
}

.password-group>button>svg {
	fill: white;
}

.password-group > button:hover {
	opacity: 1;
	transform: translateX(-3em) scale(0.9);
}

input[type="submit"] {
	font-family: "Gotham Book", sans-serif;
	font-weight: 500;
	background-color: var(--primary);
	color: var(--text);
	border: none;
	border-radius: 0.5em;
	padding: 1em;
	margin-block: 0.75em;
}

form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}

.subtext {
	font-size: 80%;
}

.errortext {
	color: var(--error);
}

.spacer {
	display: block;
	height: 3em;
}

@media only screen and (max-device-width: 480px) {
	:root {
		--readable-area : 80vw;
	}
}

@media only screen and (max-device-width: 768px) and (min-device-width: 480px) {
	:root {
		--readable-area : 80vw;
	}
}