@font-face {
    font-family: "Pixel";
    src: url("font/PixelifySans-Regular.ttf") format("truetype"),
    font-weight: 400;  /* normal */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pixel";
    src: url("font/PixelifySans-Medium.ttf") format("truetype"),
    font-weight: 500;  /* medium */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pixel";
    src: url("font/PixelifySans-SemiBold.ttf") format("truetype"),
    font-weight: 600;  /* semibild */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pixel";
    src: url("font/PixelifySans-Bold.ttf") format("truetype"),
    font-weight: 700;  /* bold */
    font-style: normal;
    font-display: swap;
}




body {
    font-family: "Pixel";
    font-weight: 400;
    margin: 0;
    background: darkgrey;
}
p { margin-left: 5px; }
h2 { margin-left: 5px; }
h1 {
    font-size: 4rem;
    color: chocolate;
 /*   -webkit-text-stroke: 1px black; */
    text-shadow:
            4px 4px 0 black,
            -4px 4px 0 black,
            4px -4px 0 black,
            -4px -4px 0 black,
            4px 0 0 black,
            -4px 0 0 black,
            0 4px 0 black,
            0 -4px 0 black;
    position: absolute;
    top: 0;
    left: 20%;
    transform: translate(0%, 0);
    z-index: 101;

}

.flex {
    display: flex;
  /* align-items: center; */
}

.spacebetween {
    justify-content: space-between;
}
.wrap {
    flex-wrap: wrap;
}
.center {
    align-items: center;
}
.center2 {
    justify-content: center;
}

/*//////////////INHALT/////////////////// */

/* MAIN */
#Chars {
    width: 336px;
    height: 930px;
    background-image: url('img/bg/wand.png');
    background-repeat: repeat;
    border: black 5px solid;
    padding: 10px;
    overflow: auto;


}
#Gilde {
   width: 950px;
    height: 950px;
    border: black 5px solid;
    background-color: #dddddd;
    position: relative;
    overflow: hidden;
    z-index: 1;

}
#Missionen {
    width: 30%;
    height: 930px;
    background-color: #dddddd;
    padding: 2%;
    background-image: url('img/bg/wand.png');
    background-repeat: repeat;
    border: black 5px solid;
    padding: 10px;
    overflow: auto;
}
/* Charfenster */
.mitte {
    margin: 0 auto;
}
.mitte h2 {
    margin: 0;
    padding: 0;
    text-align: center;
}

.chars {
    padding: 2%;
    border: 5px solid #401a12;

    margin: 1%;
    border-radius: 10px;


}
.stats {

}
.stats p {
    padding: 5px;
    margin: 0;
    text-align: center;
    font-weight: 400;
}
.gender {
    width: 32px;
    height: 32px;

}


.sprite {
    width: 32px;
    height: 32px;
    scale: 2;
    transform: translate(6px, 6px);
   /* background-image: url('img/chars/rouge2.png');*/
    background-repeat: no-repeat;
    image-rendering: pixelated;
    margin-right: 32px;
}
.adventurrankdescription {
    text-align: center;
    margin: 0;
}
.adventurerank {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    text-align: center;

}
.livebalken {
    width: 200px;
    height: 16px;
    border: 1px solid black;
    border-radius: 10px;

    margin: 0 10px;
}
.balkenschrift {
    margin: 3px;
    width: 25px;
}
.leben {
    width: 100%;
    height: 100%;
    background-color: green;
    border-radius: 10px;
}
.stamina {
    width: 100%;
    height: 100%;
    background-color: lightskyblue;
    border-radius: 10px;

}
.exp {
    width: 10%;
    height: 100%;
    background-color: goldenrod;
    border-radius: 10px;
}
.alignment {
    width: auto;
    margin: 2px 5px;
    border: 1px solid black;
    border-radius: 10px;
    background-color: #dddddd;
    padding: 1px 5px;
    text-align: center;
}

/* Mitte */
.h2menu {
    text-align: center;
    font-size: 2rem;
    color: white;
    text-shadow:
            4px 4px 0 black,
            -4px 4px 0 black,
            4px -4px 0 black,
            -4px -4px 0 black,
            4px 0 0 black,
            -4px 0 0 black,
            0 4px 0 black,
            0 -4px 0 black;

}
.gildenbild {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* skaliert & schneidet */
    object-position: center; /* zentriert */
}
.geld {

    width: 64px;
    height: 64px;
    scale: 0.7;
    margin: 0;
    padding: 0;

}
.geldposi {
    z-index: 1002;
    position: absolute;
    bottom: 0%;
    right: 0%;
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
}
.geldposi p {
    color: beige;
    font-weight: 700;
    font-size: 2rem;
    text-shadow:
            2px 2px 0 black,
            -2px 2px 0 black,
            2px -2px 0 black,
            -2px -2px 0 black,
            2px 0 0 black,
            -2px 0 0 black,
            0 2px 0 black,
            0 -2px 0 black;
    margin: 0;

}
.zurück {
    border: 2px solid black;
    display: inline-block;
    padding: 4px;
    margin: 1%;
    border-radius: 4px;
    float: right;
    font-weight: bold;
    font-size: 1.5rem;
}
.zurück:hover {
    background-color: grey;
}

.questmenu {
    position: absolute;
    top: 0;
    left: 360px;
    height: 950px;
    width: 950px;
    background-color: #dddddd;
    border: black 5px solid;
    z-index: 102;
    overflow: auto;
}
.quest {
    padding: 2%;
    border: 5px solid #401a12;

    margin: 1%;
    border-radius: 10px;
}
.questframe {
    border : black 5px solid;
    border-radius: 10px;
    padding: 1%;
    margin: 1%;
}
.questframe div h3 {
    text-align: center;
    width: 100%;
    font-size: 1.5rem;
    margin: 0;
    text-align: center;
    white-space: nowrap;

}
.questicon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    border: 3px solid black;
    border-radius: 4px;
}
.questcharclick {

    border-radius: 10px;
    background-color: grey;
    margin: 0 40px 0 0;

    width: 32px;
    height: 32px;
    scale: 2;
    transform: translate(6px, 6px);

    background-repeat: no-repeat;
    image-rendering: pixelated;

}
.losbuttonclick {
    border: 2px solid black;
    display: inline-block;
    padding: 4px;
    margin: 1%;
    border-radius: 4px;
    float: right;
    font-weight: bold;
    font-size: 1.5rem;
    margin-left: auto;


}
.losbuttonclick:hover {
    background-color: grey;

}
.questkostencont {
    margin: 0 25px;
}
.questkostencont div img {
    width: 16px;
    height: 16px;
    transform: translate(0px, 2px);

}
.questkostencont p {
    margin: 1px auto;
}
.fortschritt {
    width: 0%;
    height: 100%;
    background-color: purple;
    border-radius: 10px;
}
.fortschrittsbalken {
    width: auto;
    height: 16px;
    border: 1px solid black;
    border-radius: 10px;

    margin: 10px;
}
.questcharmove {

    border-radius: 10px;

    margin: 0 auto 20px auto;

    width: 32px;
    height: 32px;
    scale: 2;
    transform: translate(0px, 5px);

    background-repeat: no-repeat;
    image-rendering: pixelated;

}

.questabschlussicon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    border: 3px solid black;
    border-radius: 4px;
    margin: 0 100px;
}
.Looticon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    border: 3px solid black;
    border-radius: 4px;
    margin: 5px;
}
.belohnungsH {
    text-shadow: 2px 2px 0 white, -2px 2px 0 white, 2px -2px 0 white, -2px -2px 0 white, 2px 0 0 white, -2px 0 0 white, 0 2px 0 white, 0 -2px 0 white;
    margin-left: 5px;
}
.belohnungsP {
    margin-left: 5px;
}
.kostenimg {
    width: 32px;
    height: 32px;
    margin-left: 10px;
}
.itemframe {
    border-radius: 10px;
    border: 3px solid black;
    margin: 5px;
    padding: 3px;
    min-width: 280px;
    min-height: 90px;
}
.itemframepic {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    border: 3px solid black;
    border-radius: 4px;
    margin: 10px;
    background-color: #FFDFBA;
}

.itemframenumber {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    text-align: center;
}
.itemframetxt {
    margin: 5px auto;
    font-size: 1.2rem;
    text-align: center;
}
.itemframeleer {
    text-align: center;
    margin: auto;

}
.itemframeLeerShop {
     border-radius: 10px;
     border: 3px solid black;
     margin: 5px;
     padding: 3px;
     min-width: 280px;
     min-height: 90px;
     background-color: lightgray;

}
.itemframeLeerShop:hover {
    background-color: gray;
}
.itemframeClicked {
    background-color: gray;
    border: 3px solid saddlebrown;
}

.absatz2box {
    background-color: lightgrey;
    border-radius: 10px;
    border: 3px solid black;
    width: 450px;
    height: 220px;
    Margin: 2%;
}
.Lagerbutton {
    border: 2px solid black;

    padding: 4px;
    margin: 1% 2%;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
}
.Lagerbutton:hover {
    background-color: grey;
}
.lagerFrameNumber {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    text-align: left;
}
.sellinput {
    width: 100px;
    height: 25px;
    font-family: Pixel;
    font-size: 1.2rem;
    border-radius: 4px;
    border: 2px solid black;
    margin: 2%;
    background-color: lightgray;
    text-align: right;
    padding: 2px
}
.dummyclass {
    display: flex;
    align-items: center;
    justify-content: center;

}
.heilerbox {

    background-color: #afdbad;
    border-radius: 10px;
    border: 3px solid black;
    width: 80%;
    margin: 5px auto;
}
.heilerButton {
    border: 2px solid black;
    display: inline-block;
    padding: 4px;
    margin: 1%;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.5rem;
    font-family: Pixel;

}
.kaufmenu {
    background-color: #ab9dcf;
    border-radius: 10px;
    border: 3px solid black;
    padding: 10px 0px;
    margin: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clicked-grey {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    background-color: gray;
}
.maskbox {

    background-color: #e3b476;
    border-radius: 10px;
    border: 3px solid black;
    width: 60%;
    margin: 5px auto;
   text-align: center;