:root {
	--accentColor: #01b2fe;
	--barColor: #000;	
	--cardBorderColor:rgba(0, 0, 0, 0.1);	
	--cardColorPressed:rgba(0, 0, 0, 0.03);	
	--buttonlistitem:rgba(0, 0, 0, 0.04);
	--buttonlistitemHover:rgba(0, 0, 0, 0.07);
	
	--backColor1:#DCDCFA;
	--backColor2:#FFE6DC;
	--backColor3:#F8F8FA;
	
}

@media (prefers-color-scheme: dark) {
	:root {		
		--cardBorderColor:rgba(255, 255, 255, 0.1);		
		--cardColorPressed:rgba(255, 255, 255, 0.03);		
		--buttonlistitem:rgba(255, 255, 255, 0.03);
		--buttonlistitemHover:rgba(255, 255, 255, 0.06);
		--backColor1:#2D2D33;
		--backColor2:#332E2C;
		--backColor3:#333333;
	}
}

[data-theme="dark"]{
	color-scheme: dark;
	--cardBorderColor:rgba(255, 255, 255, 0.1);	
	--cardColorPressed:rgba(255, 255, 255, 0.03);		
	--buttonlistitem:rgba(255, 255, 255, 0.03);
	--buttonlistitemHover:rgba(255, 255, 255, 0.06);
	--backColor1:#2D2D33;
	--backColor2:#332E2C;
	--backColor3:#333333;
}

.backgroundColor1{
	background-color: var(--backColor1);
}

.backgroundColor2{
	background-color: var(--backColor2);
}

.backgroundColor3{
	background-color: var(--backColor3);
}



footer{
	background-color: var(--barColor);
}


header::before {	
	background-color: var(--barColor); /* Set your background */	
}

header nav a:last-child{
	background-color: var(--accentColor);
	padding: 8px 12px 8px 12px;
	border-radius: 2em;
}

header nav a:last-child:hover{
	color: var(--primary);
	filter: brightness(1.1);
}

article h1{
	text-align: center;
	opacity: 0.6;
}

main > section:first-child > article{
	text-align: center;
}

main > section:first-child{
	background-color: var(--barColor);
}

article > h2:first-child{
	margin-block-start:0.83em;
}


h1{
	font-size: 1.7rem;
	font-weight: 400;
}

h2{
	font-size: 1.2rem;
	margin-block-start:2rem;
}

h3{
	font-size: 1.1rem;
	margin-block-start:1.5rem;
}

article{
	padding-top: 30px;
	padding-bottom: 30px;
}

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


footer{
	font-size: 1rem;
	padding-bottom: 10px;
	text-align: center;
	padding-top: 10px;
}

footer > *{	
	text-align: center;
}

footer > div, footer > nav{
	margin-bottom: 10px;
}

footer nav{
	margin-top: 15px;
	margin-bottom: 15px;
}



img.main{
	max-width: 400px;
}


.card{
	display: flex;
	flex-direction:column;
	align-items:center;	
	border-radius: 12px;
	text-decoration: none;
	color: var(--primary);
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 30px;
	padding-left: 15px;
	padding-right: 15px;
	border: 1px solid var(--cardBorderColor);
	transition: all 0.2s ease-in-out
}

.card:hover{
	transform: scale(1.01);
	background-color: var(--cardColorPressed);
}

.card img{
	width: 150px;
	height: 150px;
	margin-top: 30px;
	margin-bottom: 30px;
}


.card h3{
	font-size: 28px;
	opacity: 0.9;
	margin: 0;	
}

.card h4{
	font-size: 18px;
	font-weight: 400;
	opacity: 0.5;
	margin: 0;	
}

footer nav.large{
	max-width:600px
}

footer nav.large .col h4{
	text-transform: uppercase;
}

footer nav.large .social li{
	display: inline!important;
	margin-left: 0;
}

footer > div:last-child{
	margin-top: 40px;
	font-size: 0.9em;
}

@media screen and (max-width: 800px) {
	footer nav.large{
		max-width:100%;
	}
}



.q_a > li{
	margin-top: 2px;
	margin-bottom: 2px;
}

.q_a > li > input:hover + label::before{
	background-color: var(--accentColor);
	opacity: 0.1;
}


.q_a > li > div{
	margin-top: 10px;
}

.q_a > li > input:checked + label{
	color: var(--accentColor);
}

.q_a > li > input:checked + label::after{
	border-color: var(--accentColor);
}



.hero{
	display: flex;	
	padding-top: 40px;
	padding-bottom: 40px;
}

.hero img{
	width: 300px;	
}

.hero h3{
	font-size: 2em;
}

.hero h3 span{
	color: var(--accentColor);
}

.hero div{
	text-align: left;
}


@media screen and (max-width: 800px) {
	.hero{
		display:block
	}
	
	.hero h3{
		font-size: 1.7em;
	}
	
	
	.hero div{
		margin-top: 30px;
		text-align: center;
	}
	
}


ul.centered{
	text-align: center;
}

ul.centered li{
	margin: 0.5em;
}

section ul.centered a{
	color: var(--primary);
	text-decoration: none;
}
section ul.centered a:hover{
	color: var(--accentColor);
}

/*Button List for all the list selection with icon*/


.buttonslist li{
	display: inherit;
	padding: var(--halfhorizontalPadding);	
	margin-top: var(--halfhorizontalPadding);
	margin-bottom: var(--halfhorizontalPadding);
	background-color: var(--buttonlistitem);
	border-radius: 8px;
}

.buttonslist li:hover{
	background-color: var(--buttonlistitemHover);
}


.buttonslist li a{
	display: flex;
	gap: var(--halfhorizontalPadding);
	text-decoration: none;
}

.buttonslist li img{
	width: 2em;
	height: 2em;
}

.buttonslist li span{	
	font-size: 1.15em;	
	line-height: 2em;
}


@media screen and (max-width: 800px) {
	.buttonslist li a{
		flex-direction: column;	
		align-items: center;
	}
	
	ul.centered li{
		display: block;
		margin: 1em;
	}
}


section ol li{
	margin-bottom: var(--horizontalPadding);
}

section.icontitle,
section.video{
	text-align: center;
}

section.icontitle img{
	width: 6em;
	height: 6em;
}

section.video{
	background-color: var(--backColor1);
}

section.video iframe{
	width: 640px;
	height: 360px;
}

@media screen and (max-width: 800px) {
	section.video iframe{
		width:100vw;
		margin-left: calc(0px - var(--horizontalPadding));
	}
}


main.mainpage article{
	text-align: center;
}

main.mainpage h2{
	margin-bottom: 60px;
}

main.mainpage .socialicons picture{
	display: flex;
	justify-content: center;	
}

main.mainpage .socialicons picture img{
	max-width: 2000px;
	height: 300px;	
}

main.mainpage{
	overflow-x: hidden;
}

main.mainpage .signatureexamples > article > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:3em;
}

main.mainpage .signatureexamples > article > div img{
	max-width: 350px;
}

main.mainpage .andmore > article > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

main.mainpage .andmore > article h3{
	margin-block-start: 0.5em;
}

main.mainpage .andmore > article > div > div{	
	width: calc(33% - 2em);
	padding: 1em;
	text-align: left;	
}

main.mainpage .andmore img{
	height: 80px;
}


@media screen and (max-width: 800px) {
	main.mainpage .andmore > article > div > div{
		width: calc(100% - 2em);
	}
}


@media (prefers-color-scheme: dark) {
main.mainpage .andmore img{
	filter: invert();
}
}