/* Config */
/* mixins */
/* Styles */
html, body {
  height: 100%;
}

.fa-home{
  transform:scale(1.5);
}

.home {
height: fit-content;
  width: fit-content;
  position: absolute;
  left: 0;
  z-index: 5;
  top: 0;
  overflow: hidden;
}

.home a {
  color: rgba(255,255,255, 0.6);
  padding: 16px;
  text-decoration: none;
  display: block;
  position:relative;
  font-size:17px;
}

/* Change color on hover */
.home a:hover {
  color: white;
}

body {
  overflow: hidden;
  background-color:black;
}

@font-face {
	font-family: "CandideCondensedRegular";
	src: url("/ui/Candide-CondensedMedium.ttf");
}

.candide-condensed-regular {
	font-family: "CandideCondensedRegular", serif;
	font-weight: 400;
	font-style: normal;
}

.page-bg, .animation-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-bg {
  background-image: url('/ui/zesber/pbg.png');
  background-size: cover;
  z-index: 0;
}



.characterselect{
  top:5%;
  left:5%;
  width:20%;
  height:90%;
  position:absolute;
  display:block;
  overflow-y:auto;
  scrollbar-width: thin;
}

.characterselect button{
  display:block;
  text-align:left;
  width:100%;
  height:38px;
  color:white;
  background-color:rgba(35,35,35,0.5);
  border: 1px rgba(200,200,200,0.3) solid;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:10%;
  font-size:14px;
  font-family: "CandideCondensedRegular", serif;
  text-shadow: -1px -1px 0 #3c3c3c, 1px -1px 0 #3c3c3c, -1px 1px 0 #3c3c3c, 1px 1px 0 #3c3c3c;
}

.characterselect button:hover, .characterselect button:active, .characterselect button:focus{
  background:linear-gradient(90deg,rgba(200, 24, 64, 0) 0%, rgba(200, 24, 64, 0.75) 10%, rgba(200, 24, 64, 0.75) 50%, rgba(200, 24, 64, 0.75) 90%, rgba(200, 24, 64, 0) 100%);
  background-size: auto calc(100% - 6px);
  background-repeat:no-repeat;
  background-position-y:center;
  background-origin: padding-box;
}

/* Style the tab content */
.tabcontent {
  top:5%;
  left:24%;
  width:15%;
  height:90%;
  margin-left:37px;
  position:absolute;
  display:none;
  z-index:2;
  overflow-y:auto;
  scrollbar-width: thin;
}

.tabcontent button{
  display:block;
  text-align:left;
  width:100%;
  height:38px;
  color:white;
  background-color:rgba(60,60,60,0.7);
  border: 1px rgba(200,200,200,0.1) solid;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:10%;
  font-size:14px;
  font-family: "CandideCondensedRegular", serif;
  text-shadow: -1px -1px 0 #3c3c3c, 1px -1px 0 #3c3c3c, -1px 1px 0 #3c3c3c, 1px 1px 0 #3c3c3c;
}

.tabcontent button:hover, .tabcontent button:active{
  background:linear-gradient(90deg,rgba(200, 24, 64, 0) 0%, rgba(200, 24, 64, 0.75) 10%, rgba(200, 24, 64, 0.75) 50%, rgba(200, 24, 64, 0.75) 90%, rgba(200, 24, 64, 0) 100%);
}

/* Clear floats after the tab */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* The Modal (background) */
.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  top:5%;
  left: 42%;
  width: 54vw; /* Full width */
  height: 90vh; /* Full height */
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('/ui/zesber/mbg.png');
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  text-align:center;
}

model-viewer{
  width:54vw;
  height:90vh;
  --progress-bar-color: #5aa4de;
}

.controls {
position: absolute;
display: flex;
flex-direction: column;
bottom: 40px;
left: 1rem;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
/* max-height: 14rem; */
overflow: auto;
}
.glass {
background: rgba(255, 255, 255, 0.37);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(8px) contrast(0.89) saturate(1.27);
-webkit-backdrop-filter: blur(8px) contrast(0.89) saturate(1.27);
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 0.5rem;
border-radius: 0.5rem;
}