:root{
	--color-blue:#0086d1;
	--color-green:#6fba2c;
}

.bg-blue{
	background-color: var(--color-blue);
}
.bg-green{
	background-color: var(--color-green);
}
.text-blue{
	color: var(--color-blue);
}
.text-green{
	color: var(--color-green);
}

.navbar,
.navbar *{
	-webkit-transition: all .5s ease ;
	-o-transition: all .5s ease ;
	transition: all .5s ease ;
}

.banner{
	--size:clamp(64px,10vw,128px);
	gap:calc(var(--size) * .25);
	font-size:clamp(13px,1.5vw,16px);
	height: clamp(380px,45vw,480px);
	margin-top:50px;
}
.intro p:last-child{
	margin-bottom: 0;
}

header{
	position:fixed;
	top:0;
	right:0;
	left:0;
	z-index:1030;
}

#right-tools li{
	--li-size:40px; 
	--icon-size:1.4rem; 
	--li-gap:calc((var(--li-size) - var(--icon-size)) / 2) ;
	--li-width:calc(var(--li-size) + 4em + var(--li-gap) * 3);
	--li-bottom:calc(100vh / 2 - 60px);
	transition:all 0.5s;
	position:fixed;
	width:var(--li-width);
	height: var(--li-size);
	right:calc( var(--li-size) - var(--li-width) );
	color:#fff;
	background:rgba(0,0,0,0.4);
	padding-left:var(--li-gap) ; 
	display:flex;
	align-items:center;
	gap: calc(var(--li-gap) * 2);
	font-size:14px; 
	cursor:pointer;
	z-index:1000;
}

#right-tools li i{
	font-size: var(--icon-size);
}

#right-tools li:nth-last-child(5){
	bottom:calc( var(--li-bottom) + var(--li-size) * 4 + 4px );
}

#right-tools li:nth-last-child(4){
	bottom:calc( var(--li-bottom) + var(--li-size) * 3 + 3px );
}
	
#right-tools li:nth-last-child(3){
	bottom:calc( var(--li-bottom) + var(--li-size) * 2 + 2px);
}
	
#right-tools li:nth-last-child(2){
	bottom:calc( var(--li-bottom) + var(--li-size) + 1px );
}
	
#right-tools li:nth-last-child(1){
	bottom:var(--li-bottom);
}

#right-tools li:is(:hover,.active,[aria-describedby])
{
	right:0px!important;
	background:rgba(0,0,0,0.5);
}

#page-header{
	position: relative;
	z-index: -2;
}
#page-header .container{
	height: clamp(300px,calc(200px + 20vw),450px);
}

#page-header::before{
	content: "";
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	background: url(/statics/images/page-bg.png) bottom center / cover;
	z-index: -1;
}

#page-header :is(.h1,.h5){
	text-shadow:1px 1px 2px black,0 0 1em var(--color-blue),0 0 0.2em var(--color-blue);
}