/* Selbstdefinierte Farben */

:root {
  ---cassiopeia-color-primary: #373679;
  ---cassiopeia-color-link: #00ff00;
  ---cassiopeia-color-hover: #268386;

  --cassiopeia-font-family-body: "Roboto", sans-serif;
  --cassiopeia-font-family-headings: "Roboto", sans-serif;
  --cassiopeia-font-weight-body: 400;
  --cassiopeia-font-weight-headings: 700;

  --body-font-family: var(--cassiopeia-font-family-body);
  --body-font-size: 2 rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-color; #8bd4e1;
  --body-bg: #efefef;
}

body  {
}

.header {
    color: #0000ff; 
    background: #e6e6e6;
 /*  background: #bfcbc4; */
 /*  background: #38c46d; */
  height: 20vh; 
}

/* Seitliches Menü */
.card {
    color: #0000ff; 
    background: #f0ffff; 
/*    background: #ccffff; */ 
}

/* Kleineres Banner */
.container-banner .banner-overlay  {
   heigth: 20vh;
}

.metismenu.mod-menu .mm-collapse  {
  color: #000;
}

.metismenu.mod-menu .mm-collapse  .metismenu-item a {
  color: #000;
}

/* Module sind auf verschiedenen Modulpositionen im Cassiopeia Template bekommen dann die Module zusätzlich zu card auch die Position als Klassennamen, zum Beispiel main-top - wenn du also alle Module auf Main Top ändern möchtest, nimmst du .main-top.card */

.topbar.card {
   background: #8bd4e1;
}

/* Top Modul */
.mod-custom {
    color: #0000ff; 
    background: #f0ffff; 
/*  background: #ccffff; */ 
}
.main-top.card {
    color: #0000ff; 
    background: #f0ffff; 
/*  background: #ccffff; */ 
}

/* Überschriften sind html Elemente, die Hauptüberschrift ist eine h1, dann kommt h2, h3, h4 usw. Ein html Element steuerst du an indem du einfach den Namen davorschreibst */

h1 {
/*  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1); */
/*   color: rgba(119,9,121,1); */
}

/* In Joomla haben die meisten Buttons die Klasse btn-primary - im Element Inspektor kannst du nachsehen ob der Button, den du einfärben willst wirklich diese Farbe hat.
*/

.btn-primary {
/*  background: rgba(119,9,121,1); */
}

/* Wenn du etwas einfärben möchtest, nur wenn man mit der Maus drüber fährt dann schreibst du :hover dahinter
*/

.btn-primary:hover {
/*  background: rgba(0,212,255,1); */
} 

/* In Joomla haben alle Beitragsbilder die Klasse item-image, wenn du nur ein bestimmtes Bild einsteuern möchtest, dann muss du dem Bild im Beitrag eine eigene CSS Klasse geben.
*/

.item-image {
/*  border: 2px solid #ff0000; */
}


/*Laufen dir auf der Webseite icons über den Weg kannst du diese einzeln einfärben*/

.icon-user {
  
}

/* oder du färbst mit dieser besonderen Anweisung alle Icon ein*/

/* .fa, .fas, [class*=" icon-"], [class^="icon-"] {  */
/*   color: #403678; */
/* } */

/* Der Seitenfuß von Cassiopeia hat die Klasse "footer" du steuerst diese also mit .footer an */

.footer {
    background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}