/*Magier */
g1{
text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#f75f91, #ff80aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g1 svg{color:#ff90b5;}

/*Harpyra*/
g2{
text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#04bd40,#d5df30, #f6ff63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g2 svg{color:#f6ff63;}

/*Werwölfe*/
g3{
text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#909cff,#9298cc, var(--font-color1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g3 svg{color:#9298cc;}

/*Gestaltwandler*/
g4{
   text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
   background-image: linear-gradient(90deg, #5abc67, #5abc67, #86de92);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;}

g4 svg{color:#86de92;}

/*Feen*/
g5{
text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#cc81ff,#c46aeb );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g5 svg{color:#db8bfe;}

/*Vampire*/
g6{
   
text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#e76969,#d13535);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g6 svg{color:#a62b2b;}

/*Meerwesen*/
g7{
    text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#7b98f9,#31c6c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g7 svg{color:#31c7a2;}

/*Menschen*/
g8{
text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#aeaeae,#aeaeae);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g8 svg{color:#aeaeae;}

/*Mischwesen*/
g9{
text-shadow: 1px 0 1px rgb(2 2 2 / 20%);
    background-image: linear-gradient(90deg,#db8c3e,#77d154,#d15497);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

g9 svg{color:#d15497;}

.grusback{
  width: 285px;
  height: 343px;
  float:left;
  margin:2px;
  padding:2px;
  }

.grusname{
font-family: var(--font-headline1);
text-align:center;
font-size:14pt;
}

.grusava{
border: 3px solid var(--akzent2);
width: 250px;
height:220px;
border-radius: 100px 100px 0px 0px;}

.grusava img{
border-radius: 98px 98px 0px 0px;
width: 250px;
height: 220px;}

.grushortfact{
width: 253px;
background-color:var(--hintergrund2);
margin: 1px;
font-size: 12pt;
line-height: 20px;
text-align: center;
color: var(--font-color1);
}