:root {
    --titlefont: Rubik Mono One;
    --bodyfont: Bebas Neue;

    --fontsizeXXL: 40px;
    --fontsizeXL: 36px;
    --fontsizeL: 32px;
    --fontsizeM: 28px;
    --fontsizeS: 24px;
    --fontsizeXS: 20px;
    --fontsizeXXS: 16px;


    --primCol: #7E47D1;
    --secCol: #63E9BA;
    --dmbgCol: #121212;
    --dmsurColOne: #232323;
    --dmsurColTwo: #343434;
    --dmsurColThr: #454545;
    --dmsurColFou: #565656;
    --dmerrorCol: #CF6679;
	--dmwarnCol: #CF8540;
	--dmcautCol: #CFCD66;

    --dmtextColHE: #ffffffe0;
    --dmtextColHME: #ffffffbb;
    --dmtextColME: #ffffff97;
    --dmtextColDIS: #ffffff55;


    --lmerrorCol: #B00020;
}

button {
	cursor: pointer;
	align-items: center;
	user-select: none;
	touch-action: manipulation;
}

button:hover {
	scale: 1.1;
}



.buttonroundpurple {
	border-radius: 20em;
	border-style: none;
	padding: 4px 24px;

	background-size: 200% auto;
	background-image: linear-gradient(45deg, #7E47D1 0%, #9466d9  51%, #7E47D1  100%);

	color: var(--dmtextColHE);
  
	cursor: pointer;

	transition: 0.4s;
}

.buttonroundpurple:hover {
	background-position: right center;
	text-decoration: none;
}

.buttonroundpurple:active {
	transform: scale(0.95);
}




.buttonroundgrey {
	border-radius: 20em;
	border-style: none;
	padding: 4px 24px;

	background-size: 200% auto;
	background-image: linear-gradient(45deg, #565656 0%, #787878  51%, #565656  100%);

	color: var(--dmtextColHE);

	transition: 0.4s;
}

.buttonroundgrey:hover {
	background-position: right center;
	text-decoration: none;
}

.buttonroundgrey:active {
	transform: scale(0.95);
}