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

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

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

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

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

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

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

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

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



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