html, body {
  height: 100%;
  width: 100%;
  min-width:1024px;
  padding: 0;
  margin: 0;
  background: black url('/images/background/bg_town.jpg') center center no-repeat;;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:relative;
	--op03:0.3;
	--op05:0.5;
	--op06:0.6;
	--op07:0.7;
	--op08:0.8;
	--op09:0.9;
	--op10:1;
}



.centerbox {
        width: 300px;
        height: 200px;
        background-color: rgba(var(--bs-body-bg-rgb), var(--op09)); /* Milchiger Hintergrund */
        border-radius: 10px; /* Abgerundete Ecken */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		padding:10px;

    }



#menu{
		background-color: rgba(var(--bs-body-bg-rgb), 0.9); /* Milchiger Hintergrund */
        border-radius: 0 0 10px 10px; /* Abgerundete Ecken */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
        position: absolute;
        top: 0%;
        right: 0%;
		padding:10px;
		margin-right:5px;
		z-index:1000;
}
#storeMenu{
	  position: fixed;
      top: 0;
      left: -150px; /* Das Menü ist standardmäßig versteckt */
      width: 150px;
      height: 100vh; /* Volle Höhe des Bildschirms */
      background:rgba(var(--bs-body-bg-rgb), var(--op09));
      transition: left 0.3s; 
	  padding:10px;
}
#storeMenu.show{
	left: 0;
}

.imgIcon100{
	max-width:100px;
	max-height:100px;
}

#wBuyIngredients{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 90vH;
 width: 50vW;
 display:none;
 background: rgba(var(--bs-body-bg-rgb), var(--op09));
 border-radius: 10px 10px 10px 10px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
 overflow:auto;
 padding:15px;
}

#wBuyIngredients.show{
	display:block;
}


.NoModalbg{
 position: fixed;
 height: 100vH;
 width: 100vW;
 display:none;
 background: rgba(var(--bs-body-bg-rgb), var(--op08));
}

.NoModalh90w80{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 90vH;
 width: 80vW;
 border-radius: 10px 10px 10px 10px;
 background: rgba(var(--bs-body-bg-rgb), var(--op09));
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
 overflow:auto;
 padding:15px;

}

.Modalh90w80,NoModalh90w80{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 90vH;
 width: 80vW;
 display:none;
 background: rgba(var(--bs-body-bg-rgb), var(--op09));
 border-radius: 10px 10px 10px 10px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
 overflow:auto;
 padding:15px;
}

.display{
	display:block;
}


.nftModal{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 90vH;
 width: 80vW;
 display:none;
 background: rgba(var(--bs-body-bg-rgb), var(--op09));
 border-radius: 10px 10px 10px 10px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
 overflow:auto;
 padding:15px;
}

.card-container{
	position: relative;
    max-width: 100%;
}

.cardtitle{
	  position: absolute;
      top: 8.2%; /* Anpassung der Position des Textes */
      left: 50%; /* Anpassung der Position des Textes */
      transform: translate(-50%, -50%);
      color: white;
      font-size: calc(0.75vw); 
	  width:calc(6.2vw);
}

.carddesc{
	  position: absolute;
      top: 75%; /* Anpassung der Position des Textes */
      left: 50%; /* Anpassung der Position des Textes */
      transform: translate(-50%, -50%);
      color: white;
      font-size: calc(0.6vw); 
	  width:calc(9vw);

}


.cardImage{
	width:100%;
	position:absolute;
}
.card-name-box {
	position: absolute;
	font-size: 13px;
	left: 48px;
	top: 12px;
	color: #fff;
	width: 115px;
	height: 24px;
	overflow: hidden;
}

.card-name{
	font-size: clamp(10px, 3vw, 16px);
	text-overflow: ellipsis; /* Kürzt den Text, falls er nicht in die Bounding Box passt */
	overflow: hidden; /* Versteckt den überschüssigen Text */
	white-space: nowrap; /* Verhindert Zeilenumbrüche */
}


.card-description-box {
	position: absolute;
	font-size: 13px;
	left: 17px;
	top: 223px;
	color: #fff;
	width: 179px;
	height: 55px;
	overflow: hidden;
}

.card-description{
	font-size: 10px;;
}


.addMore{
	position:relative;
	top:60px;
	font-size:25px;
}

.addMore span{
	font-size:80px;
	font-weight:bold;
	margin-top:-15px;
}

.card-container:hover,.card-container.active,.card:hover {
	box-shadow: black 0px 0px 20px;
	transform: scale(1.35);
	z-index:1000;
}

.cardMenuNewStore{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	display:none;
	background-color: rgba(var(--bs-body-bg-rgb), var(--op09)); /* Milchiger Hintergrund */
}
.active .cardMenuNewStore{
	display:block;
}

.cardMenuNewStore div{
	border-bottom: 1px solid rgba(255,255,255,.5);
	text-align:center;
	color: white;
}


.hbgr{
	background-color: rgba(255,0,0, var(--op08));
}
.hbgr:hover{
	background-color: rgba(255,0,0, var(--op06));
}
.hbgw:hover{
	background-color: rgba(255,255,255, var(--op03));
}

div.carddescLong{
	text-align:left;
	font-size:.6em;
}

#stat_balances{
		background-color: rgba(var(--bs-body-bg-rgb), var(--op09)); /* Milchiger Hintergrund */
        border-radius: 0 0 10px 10px; /* Abgerundete Ecken */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
        position: absolute;
        top: 0%;
        left: 0%;
		padding:10px;
		margin-left:5px;
}

#log{
		background-color: rgba(var(--bs-body-bg-rgb), var(--op09)); /* Milchiger Hintergrund */
        border-radius: 0 10px 10px 0; /* Abgerundete Ecken */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
        position: absolute;
        bottom: 0%;
        left: 0%;
		padding:10px;
		margin-left:5px;
		height:200px;
		width:500px;

}

#logHeader{
	font-size:12px;
	font-famaly:Arial;
	font-weight:bold;
}

#logEntries{
max-height: 160px;
overflow-y: scroll;
flex-direction: column-reverse;
display: flex;
font-size:12px;
font-famaly:Arial;
}

.log-entry {
	position: relative;

  }


#login_register_box{
		background-color: rgba(var(--bs-body-bg-rgb), var(--op09)); /* Milchiger Hintergrund */
        border-radius: 0 0 10px 10px; /* Abgerundete Ecken */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
        position: absolute;
        top: 0%;
        right: 0%;
		padding:10px;
		margin-right:5px;
	
}

#loginbtn,#registerbtn{
	cursor:pointer;
}

.button{
	margin-right:5px;
}

.button-blue {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button-blue:hover {
  background-color: #2980b9;
}

.button-green {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2ecc71;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button-green:hover {
  background-color: #27ae60;
}


.button-red {
  display: inline-block;
  padding: 10px 20px;
  background-color: #e74c3c;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button-red:hover {
  background-color: #c0392b;
}


.modal, .nomodal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color:white;
}

.modal-content-box,.nomodal-content-box {
  background-color: rgba(10, 10, 10, 0.75);
  margin: 20% auto;
  padding: 10px;
  border-radius: 4px;
  width: 40%;
  min-height: 250px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.dh{
	display:none;
}


.bgblack{
background-color: rgba(0, 0, 0, 1);
}

#logNew{
	position:absolute;
	left:100%;
	display:none;
	background:rgba(0,150,0,0.65);
	border-radius: 10px 10px 10px 10px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
	bottom:0%;
	font-wight:bold;
	padding:3px;
	color:white;
}

.ht_d{
	display:block!important;
}


.fcontainer{
	display: flex;
}

.fcol{
  padding: 20px;
  border: 1px solid #ccc;
}


.yghd897hjdk{
 position: fixed;
 top: 75px;;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 90px;
 width: 728px;
 background: rgba(var(--bs-body-bg-rgb), var(--op09));
// border-radius: 10px 10px 10px 10px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
 overflow:hidden;
}



.storeClosed{
	color:red;
}

.storeOpened{
	color:lightgreen;
}