:root {
	--accentColor: #A94CF6;
}

@media (prefers-color-scheme: dark) {
	:root {
		--accentColor: #A94CF6;
	}
}

h1{
	font-size: 1.4rem;
}

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);
}


header{
	padding-top: 10px;
	padding-bottom: 10px;	
}

article{
	min-height: 300px;
}

header img, footer img{	
	height: 46px;
}

header nav a, footer a{
	text-decoration: none;
	color: var(--primary);
}


header nav a:hover,
footer a:hover{
	color: var(--accentColor);
}

header nav li{
	margin-left: var(--horizontalPadding);	
}

footer li{
	margin-left: 5px;
	margin-right: 5px;
}

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

footer > *{	
	text-align: center;
}

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



img.contact{
	width: 10rem;
}

@media screen and (max-width: 400px) {
	img.contact{
		width: 8rem;
	}	
}


img.main{
	width:calc(100% - 2 * var(--horizontalPadding))
}


a button{
	background-color: var(--accentColor);
	color:white;
	font-size: 20px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 16px;
	padding-right: 16px;
	border-radius: 6px;
}

a button span{
	color: white;
}

a button:hover{
	filter: brightness(0.9);
}

.button_dl_area{		
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}