.glow {
	box-shadow:
		0 0 var(--s0) rgba(35, 46, 209, 0.4),
		0 0 var(--s1) rgba(35, 46, 209, 0.2),
		0 0 var(--s2) rgba(35, 46, 209, 0.1);
	transition: all 0.3s ease;
}

.glow:hover {
	box-shadow:
		0 0 var(--s1) var(--pal2),
		0 0 var(--s2) var(--pal2),
		0 0 var(--s3) var(--pal2);
}
h1 {
	font-size: var(--s4);
}
h2 {
	font-size: var(--s3);
}
h3{
	font-size: var(--s2);
}
h4 {
	font-size: var(--s1);
}
p {
	font-size: var(--s0);
}
h1,h2,h3,h4 {
	margin: 0 0 var(--s0) 0;
}
p, span{ margin:0; font-weight: normal;}

*{
	user-select: none;	
}
:root { 
	--border: rgba(255,255,255,.2);
	/* --pal0: #161925; */
	/* --pal1: #23395B; */
	/* --pal2: #406E8E; */
	--pal0: #000000;
	--pal1: #0f0f0f;
	--pal2: #232ED1;
	--pal3: #8EA8C3;
	--pal4: #CBF7ED;

	--headerPadH: calc(var(--s0) + var(--s3) + var(--s0));

	--s-2: 0.382rem;
	--s-1: 0.618rem;
	--s0: 1rem;
	--s1: 1.618rem;
	--s2: 2.618rem;
	--s3: 4.236rem;
	--s4: 6.854rem;
	--s5: 11.089rem;

	/* https://getbootstrap.com/docs/5.0/layout/breakpoints/ */
	--scr-xs:  0;
	--scr-sm: 576px;
	--scr-md: 768px;
	--scr-lg: 992px;
	--scr-xl: 1200px;
	--scr-xxl: 1400px;
}
body {
	background-color: var(--pal0);
	margin:0;
}
.icos {
	width: var(--s0);
	height: var(--s0);
}
.icom {
	width: var(--s1);
	height: var(--s1);
}
.icol{
	width: var(--s2);
	height: var(--s2);
}
.icoxl {
	width: var(--s3);
	height: var(--s3);
}
.icoxxl{
	width: var(--s4);
	height: var(--s4);
}

.btn, .sbtn {
	background-color: var(--pal2);
	font-weight: bold;
	cursor:pointer;
	user-select: none;
	transition: all 0.3s ease;
	border: none;
	display:inline-block;
}
.btn{
	font-size: var(--s1);
	padding: var(--s1);
	border-radius: var(--s4);
}
.sbtn {
	font-size: var(--s0);
	padding: var(--s-1);
	border-radius: var(--s0);
}

.btn:hover:not(.disabled), .sbtn:hover:not(.disabled), .selected {
	transform: scale(1.1);
	background-color: var(--pal3);
}

.disabled {
	background-color: rgb(150,150,150);
	transition: none;
	transform: none;
	cursor: not-allowed;
}

.page {
	width: 75vw;
	margin: auto auto var(--s0) auto;
}

.lightbox, .modalBox {
	position:fixed;
	left: 0;
	top: 0;
	z-index: 99; 
	width:100vw;
	height:100vh;
	transition: .3 ease all;
	background-color: rgba(0,0,0,.7);	
}

.modalBox {
	z-index: 100;
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;	
}
.modal {
	border: none;
	border-radius: var(--s0);
	background-color: var(--pal1);
	text-align: center;
	margin: auto;
	padding:var(--s0);
	
	line-break: word;
	width:25vw;
}

@media(max-width:768px){
	.btn {
		font-size: var(--s0);
		padding: var(--s0);
		border-radius: var(--s0);
	}
	:root{
		--headerPadH: var(--s3);
	}
	.modal {
		width:75vw;
	}
}