@use '@angular/material' as mat;
@include mat.core();

// hue. Available color palettes: https://material.io/design/color/
$LegioXXX-primary: mat.define-palette(mat.$red-palette, 900);
$LegioXXX-accent: mat.define-palette(mat.$indigo-palette, 900);
$LegioXXX-warn: mat.define-palette(mat.$orange-palette, 500);
$LegioXXX-theme: mat.define-dark-theme((
  color: (
    primary: $LegioXXX-primary,
    accent: $LegioXXX-accent,
    warn: $LegioXXX-warn,
  )
));

@include mat.all-component-themes($LegioXXX-theme);

@import "~bootstrap/dist/css/bootstrap.min.css";

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar {
	width: 10px;
	background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.6);
	&:hover { background: rgba(255, 255, 255, 0.8); }
}

html, body {
	height: 100%;
}
body {
	background: #000;
	color: #fff;
	font-family: Roboto, sans-serif;
	margin: 0;
	overflow: hidden;

	@media print {
		background: #fff !important;
		overflow: visible !important;
	}
}

a, a:visited {
	color: #b10000;
	text-decoration: none;
}
a:hover {
	color: #b10000;
	text-decoration: underline;
}

h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }

.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 5rem 2rem;

	@media screen and (max-width: 400px) {
		padding: 3rem 2rem;
	}

	@media print {
		padding: 5rem 1rem;
	}

}

.invert {
	background: #fff;
	color: #000;

	mat-divider {
		border-color: rgba(0, 0, 0, 0.4);
	}
}

@media screen {
	.fill {
		height: 0;
		min-height: calc(100vh - 64px);
	}
}

.transparent-link {
	a, a:visited { color: #fff; }
	a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
}

ol {
	list-style-type: upper-roman;
}