@charset "UTF-8";
:root {
	--header_height: 0;
	--buttons_height: 5vh;
	--buttons_top:1vh;
	--font-size:15pt;
	
	
}
html,body{
	font-family: sans-serif;
	height: 100%;
font-size: var(--font-size);
//line-height:20pt;
font-weight: 500;
//letter-spacing: .5px;
color:#0b0e4b;
	//'Merriweather Sans'
	height: -webkit-fill-available;
}

.minimized{
	position:fixed;
	z-index:-9999999999;
	top:-100%;
	left:-100%;
	opacity:0;
	transform:scale(.1);
	transition:all 0s ease-out !important;
}

body {
    box-sizing: border-box;


	margin:0px; 
	padding:0px;
	border:0px;
	height: 100%;
	
}

.div_cost{
}
.menu_li{
	color:white;
	display:block;
	padding-left:1vh;
	margin:0;
	box-sizing: border-box;
	border:1px solid transparent;
	transition: background, border;
	transition-duration:.1s;
	border-radius:1vh;
}

.menu_li_selected{
	border:1px solid #555555;
	background:grey;
}
.menu_li:hover{
	color:white;

	background:grey;
	border:1px solid black;

	
}
.info_button{
	display:inline-block;
	color:#696969;
	font-size:smaller;
	font-weight:bold;
	cursor:pointer;
	padding:0 .2vh;
	transform: translateY(-25%);
}


.info_button2{
	display:inline-block;
	text-align:center;
}
.info_button2:hover{
	transform: scale(1.1);
	text-shadow:0 0 1vh white !important;
	//border-radius:.5vh;
	
}


.hoverscale_small:hover{
	transform: scale(0.99);
	box-shadow:0 0 1vh black;
	transition:all .1s ease-out;
}

.infoleiste{
	animation: 2s fadeout;
	animation-delay:4s;
	animation-fill-mode: forwards;
	
	display:flex;
	z-index:99999;
	justify-content: center;
	align-items: center;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	height:5vh;
	font-size:2vh;
	color:white;
	text-align:center;
	background:purple;
}


a{
		font-weight:bold;
		color: white;
		text-decoration:none;
}

.iframe_stellarhoodmap{
	box-sizing: border-box;
	padding:0;
	margin:0;
	padding-top:var(--header_height);
	border:0;
	width:100%;
	height:100%;
	
	
	display:block;
	overflow:hidden;
	
	//background: radial-gradient(ellipse at bottom, #353e49 40%, #090A0F 100%);
	
}


a:hover{
		font-weight:bold;
		color: crimson !important;
}

.bg{
	
	width:100%;
	height:100%;
	position:fixed;
	z-index:-99;
	background: transparent;


	
}
.header,.menu{
-webkit-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.58); 
box-shadow: 5px 5px 15px rgba(0,0,0,0.58);
}

.header {
	height: var(--header_height);
	background: #555555;
	color: #f1f1f1;
	position: fixed;
	top: 0;
	width: 100%;
	display:flex;
	align-items: center;
	padding:var(--header_heigh);
	box-sizing: border-box;
}
.imp{
	font-weight:bold;
}
.header_spacer{
	flex-grow:1
}


.patch{
	height:50pt; border-radius:1vh; box-shadow:.1vh .1vh 1vh rgba(0,0,0,.5);
	cursor:pointer;
}
.patch:hover{
	transform:scale(1.1);
	
}

.sprechblase{
	border:2px dotted black; 
	border-radius:1vh;
	//background:rgba(255,255,255,.5);
	padding:1vh;
	font-family:monospace;
	font-size:smaller;
}
.sprechblase div:nth-child(2){
	//font-style:oblique;
	
	
}
.ss_citizen{
	cursor:pointer;
	height:7vh; 
	width:7vh; 
	position:fixed;
	z-index: 0; 
	transform:translateX(-50%);
}

.ss_citizen:hover{
	transform:translateX(-50%) scale(1.3);
	z-index:1000;
}


.ss_citizen:hover > img{
	filter: drop-shadow(.1vh .3vh .5vh white) drop-shadow(.1vh .3vh 2vh white);
	transform:scale(1.2);
	z-index:1001;
}



.ss_citizen:hover > div{
	background:white;	
	
	
	
}

.ss_citizen:hover > div > span{
	display:inline;
	z-index:1002;
	
	
}

.ss_citizen img{
	position:absolute; 
	height:100%; 
	filter: drop-shadow(.1vh .3vh .5vh black);
}

.ss_citizen div{
	display:inline-block; 
	font-size:smaller; 
	user-select: none; 
	background:rgba(255,255,255,.5);
	transform:translateY(-100%) translateX(-50%);
	left:50%;
	position:relative;
	white-space:nowrap; 
	border-radius:1vh; 
	padding:.3vh;
	
	//height:calc(var(--font-size)*1.05);
	//width:calc(var(--font-size)*1.05);
	overflow:hidden;
	line-height:1.4;
}
.ss_citizen > div > span{
	display:none;
}




.bouncing_text {
  animation: backAndForth 1s linear infinite;
  position:absolute !important;
  right:0px;
  color:green;
  overflow:hidden;
  font-size: 1.2vmin;
}
@keyframes backAndForth {
  0% { right: 0px; left: auto;}
  100% { left:0px; right: auto; }
}


.starship_hoover {
  animation: hoover_anim 5s ease-in-out infinite;
}
@keyframes hoover_anim {
  0% { background-position:50% 60%;}
  50% { background-position:50% 80%;}
  100% { background-position:50% 60%;}
}


.mainsec{

	box-sizing: border-box;
	padding:0;
	padding-top:var(--header_height);
	min-height: 100%;
}

.menu{
	
	line-height:25pt;
	position: fixed;
	top:var(--header_height);
	//font-family: monospace;
	box-sizing: border-box;
	display:inline-block;
	background-color:#555555;
	white-space:nowrap;
	padding:0;
	padding-bottom:1vh;
	margin:0;
	transform:translateX(-120%);
	transition-duration: .5s;
	transition-property: transform;
	transition-timing-function: cease-in;
	min-width:20vh;
}
.menu_opened{
	transform:translateX(0);
}


.txt_discord_status{
	color:white;
	padding:1vh;
	
}


.leaderboard_button:hover, .leaderboard_button:active {
	box-shadow: inset 2pt 2pt 5pt rgba(0,0,0,0.58);
}



.leaderboard_button{
	
	color:black;
	width:20%;
	overflow:hidden;
	text-align:center;
	aspect-ratio:1;
	display:flex;
	justify-content:center;
	align-items:center;
	background:grey;
	cursor:pointer;
	border:.3vh solid black;
	padding: 10pt;
	margin: 10pt;
	border-radius: 50%;
}
  
.leaderboard_active{
	color:white;
	
	box-shadow: inset 4pt 4pt 5pt rgba(0,0,0,0.58);
	
	
	
}



  
.input-field {
	padding:10pt; 
	height:100%;
}


.field_bg{
	white-space:nowrap; 
	color: white; 
	position: absolute; 
	z-index:9999; 
	background-color:rgba(0,0,0,.5);
}




.image_discord_avatar{
	width:100%;
	//padding-top:calc(var(--buttons_height)*2);
}
.menu_ul{
	margin:0;
	padding:1vh;
	list-style-type: none;
	color:white;
}
.menu_ul li{
	padding:.5vh;
}





li{
	padding-left: 1vh;
}


a:hover{
	color:brown;
}



input,textarea,select{
	
	box-sizing: border-box;
	font-size: 13pt;
	border:1px solid black;
	border-radius: 1vh;
	padding: 1vh;
}


textarea {
	width:100%;
	height:20vh;
	padding: 1vh;
	resize: none;
}



.verifyadd{
	background: lightgrey; 
	width:100%; 
	font-size:min(2.5vw,2vh);
	
	
}
.container{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:50pt;
	padding-top:0pt;
}
.maindiv{
	width:75vh;
	padding:0px;
	margin:0px;
	border:0px;
}


.row{

	border:.3vh solid black;
	padding:2vh;
	margin-top:15pt !important;
	margin-bottom:15pt !important;
	border-radius: 1vh;
	background:rgba(255,255,255,0.8);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	
}


.row2{
	//padding:2vh;
	margin-top:15pt;
	margin-bottom:15pt;	
	
}

.row3{
	padding-left:15pt !important;
	padding-right:15pt !important; 
	padding-top:15pt !important; 
	padding-bottom:15pt !important; 
	align-items: flex-start !important;
	border:.2vh solid black;
	box-shadow: none;
	
	
}



.rowheader{
	background:grey;
	color:white;
	border-radius:5vh;
	font-size:larger;
	padding:1vh;
	text-align:center;
}
.walletrow,.walletrow2{
	font-family: monospace;
    white-space: pre;
	padding:.5vh;
}


.wallets{
	background:rgba(177,177,226,0.8);
}

.walletverify{
	margin-top:1vh;
	margin-bottom:1vh;
	background: Gainsboro;
    box-sizing: border-box;
	
	
	border-bottom-left-radius: 1vh;
	border-bottom-right-radius: 1vh;
	
}

.selhov:hover,.selhov:active,.walletrow:hover,.walletrow:active{
	background:Gainsboro;
	
}

.rownamed{
	background:rgba(226,177,226,0.8);
}


.sys{
	font-weight: bold
}

.sysdesc{
	color:grey;
}

.namedsys{
	color:purple;
}

.co_row_left{
	overflow:hidden;
	text-align:left;
}

.co_row {
	display:flex;
	align-items: center;
	padding-bottom:.5vh;
	
}
.co_row_consoles_head{
	padding:.5vh;
}
.co_row_consoles_sub {
	padding:.3vh .5vh;
	
}

.co_row_spacer{
	flex-grow:1;
}

.co_row_right{
	white-space:nowrap;

}

.claimbutton{
		font-weight:bold;
		color: brown;
		cursor:pointer;
		user-select: None; 
		

}


.ressource_tile,.ressource_tile2{
	
	user-select:none;
	margin:2pt;
	padding:3pt;
	display:inline-flex;
	justify-content: center;
	align-items: center;
	border-radius:2pt;
	width: max-content;
	border:1px solid black;
}
.ressource_tile{
	cursor:pointer;
}
.ressource_tile:hover{
	transform:scale(1.05);
}
.ressource_tile:active{
	background:white;
}


.nft_tile,.nft_tile2{
	position: relative;
	box-sizing:border-box;
	
	
	border-radius:10pt;
	border:2px solid black;
	display:inline-flex;
	cursor:pointer;
	user-select:none;
	width:25%;
	
	
	aspect-ratio:1;
	overflow:hidden;
	white-space:nobreak;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center; 
}


.nft_tile:active, .nft_tile:hover{
	box-shadow:.2vh .2vh .5vh rgba(0,0,0,1);
	background:white;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center; 
}


.nft_tile2:hover, .nft_tile2:active{
	transform:scale(1.05);
	filter: drop-shadow(.1vh .3vh .3vh black)
}

.nft_tile2 > div{
	color:white !important;
	
}
.nft_tile2:hover > div, .nft_tile:active > div{
	background:rgba(150,150,150,.6);
	
}


.nft_tile_wrapper{
	display:inline-block; 
	width: 100%;
	box-sizing: border-box;
	padding:.6vh;
	aspect-ratio:1;
	
}


.nft_tile_wrapper_inner{
	cursor:pointer;
	width:100%;
	height:100%;
	background-position: bottom; 
	background-size:100%;
	background-repeat:no-repeat;
	color:white !important;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

.nft_tile_wrapper_inner:hover{
	transform:scale(1.05);
	//filter: drop-shadow(.1vh .3vh .3vh black);
	//backdrop-filter: blur(10px);
}

.nft_tile_wrapper_inner:hover * .wapper_subdiv{
	//background:rgba(150,150,150,.6);
	background:linear-gradient(transparent,grey) !important;
}


.nft_tile_wrapper_inner * > a{
	display:inline-block;
	
}
.nft_tile_wrapper_inner * > a:hover{
	transform: scale(1.2);
	//box-shadow:0 0 1vh white;
	text-shadow:0 0 1vh white;
	//border-radius:.5vh;
}

.nft_tile_stellarhood{
	position: relative;
	margin:0 0;
	padding:3pt;
	border-radius:5pt;
	outline:1px solid grey;
	display:inline-flex;
	box-sizing: border-box;
	width:100%;
	overflow:hidden;
	font-size:smaller;
	
}
.nft_tile_stellarhood:hover,.nft_tile_stellarhood:active{
	background:rgba(0,0,0,.1);
}


.resource_symbol{
	display:inline-flex;
	justify-content: center;
	align-items: center;
	aspect-ratio:1;
	width:22pt;
	text-align:center;
}

.banner{
	display:inline;
	height:20pt;
	vertical-align: bottom;
	transform:scale(1);
	cursor:pointer;
}
.banner:hover{
	transition: all .1s ease-in-out;
	transform:scale(5);
}

.disabled{
	
	pointer-events: none;
	opacity:.5;
}

select{
	border:none;
	margin:2pt;
}

.blink {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }    
}

[class*="col-"]  {
  box-sizing: border-box;
}


.nft_anz_1 {width: 100%;}
.nft_anz_2 {width: 50%;}
.nft_anz_3 {width: 33.33%;}
.nft_anz_4 {width: 25%;}
.nft_anz_5 {width: 20%;}
.nft_anz_6 {width: 16.66%;}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
  float: left;
  padding: 2vh;
}
.rowtest::after {
  content: "";
  clear: both;
  display: table;
}
.colcent{
	text-align:center;
}
.newsimage{
	width:100%;
}

.loretext{
	//padding-left:5vh; 
	//padding-right:5vh;
	text-align:center; 
	color:grey;
	font-size:smaller;
}
@media only screen and (max-aspect-ratio: 9/10) 
{   
	:root{
		--font-size: 10pt;
	}
	.loretext{
		padding-left:1vh; 
		padding-right:1vh;
		color:grey;
		text-align:left;
	}
	[class*="col-"] {
		padding: 0;
		padding-bottom: 2vh;
	width: 100%;
	}

	//.nft_anz_1 {width: 100%;}
	//.nft_anz_2 {width: 50%;}
	//.nft_anz_3 {width: 33.33%;}
	.nft_anz_4 {width: 33.33%;}
	.nft_anz_5 {width: 25%;}
	.nft_anz_6 {width: 20%;}
	.newsimage{
		width:30vh;
	}

	:root {
		--header_height:5vh;
		--buttons_top:0;

	}

	.button_menu{
		box-shadow:.7vh 0 .5vh -.5vh rgba(0,0,0,.7);
	}



	.container{
		padding-left:1vh;
		padding-right:1vh;
	}
	.maindiv{
		width:100%;
	}
}