/* Font aclonica-regular - latin */
@font-face {
  font-family: 'Aclonica';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.svg#Aclonica') format('svg'); /* Legacy iOS */
}
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Aclonica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
}


/* Changing the Colors */
/*
:root {
  --cassiopeia-color-primary: #ff0000;
  --cassiopeia-color-link: #00ff00;
  --cassiopeia-color-hover: #0000ff;
}
*/

/*
More advanced example allowing to play with transparency (RGBA) because my initial variable is not directly expressed as a color, but as the RGB value (example: 37, 143, 167):
*/
/*
.colors1 {
  --website-color-primary: 37, 143, 167;
  --website-color-hover: 242, 48, 48;
  --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);
  --cassiopeia-color-hover: rgb(var(--website-color-hover));
  --cassiopeia-color-link: rgb(var(--website-color-primary));
}
*/

/*
Changing the display of the menu: If you hope to change the horizontal menu appearance:
*/
.container-header .mod-menu {
justify-content: center;
color: #ffffff;
padding: 0;
}

/*
Altering the background color of the header: 
Whenever you need to alter the background color of the header:
Stadard color >>> background-color: #220e4d;
#ff0000 = Licht Rood
#00ff00 = Licht groen
#0000ff = Licht blauw
#220e4d = Standaard donder blauw

*/
/*
.container-header {
background-color: #220e4d;
background-image: none;
}
*/