/* Config */
/* mixins */
/* Styles */

.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(230, 241, 249, 0.8);
  padding: 16px;
  text-decoration: none;
  display: block;
  position:relative;
  font-size:17px;
}

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

html, body {
  height: 100%;
}

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

@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/bg.png');
  background-size: cover;
  z-index: 0;
}

.characterselect{
top: 5%;
right:20px;
  display: block;
  position: relative;
  min-width:fit-content;
  width:30%;
  max-width:1300px;
  height: 93%;
  font-family: "CandideCondensedRegular", serif;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #f2df80 transparent;
  color: #5e2e18;
background:linear-gradient(90deg, rgba(214, 187, 120, 0) 5%, rgba(208, 167, 68,0.1) 6%, rgba(180, 133, 41,0.2) 9%, rgba(181, 136, 38,0.5) 10%, rgba(180, 133, 41,0.2) 11%, rgba(208, 167, 68,0.1) 14%, rgba(214, 187, 120, 0) 15%, rgba(214, 187, 120, 0) 100%) left top no-repeat, url('ui/bgtile.png') left top repeat;
clip-path: xywh(20px 0 100% 100%);
  box-shadow: inset 1px 0 6px 10px #7b6ba7, inset 0 0 0 20px #8e7ec0;
  z-index:2;
}

.characterButtons{
position: relative;
  float: left;
  padding-top: 50px;
  margin-left: 10%;
  min-width: fit-content;
  width: 20%;
  margin-right: 5px;
}

.characterButtons button{
	text-align:left;
  width:100%;
  height:32px;
  display:block;
  color:white;
  background-color:rgba(90,120,118,0);
  border: 1px transparent;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:12px;
  font-size:14px;
  font-family: "CandideCondensedRegular", serif;
  text-shadow: -1px -1px 0 #494d6a, 1px -1px 0 #494d6a, -1px 1px 0 #494d6a, 1px 1px 0 #494d6a;
}

.characterselect button:hover, .characterselect button:active, .characterselect button:focus{
  background-image:linear-gradient(rgba(215,69,169,0), rgba(215,69,169,1));
}

/* Style the tab content */
.tabcontent {
  padding-top:50px;
  height:auto;
  max-width:calc(60% - 20px);
  position:relative;
  display:none;
  z-index:3;
  overflow-y:auto;
  scrollbar-width: thin;
}

.tabcontent button{
  display:block;
  text-align:left;
  width:100%;
  height:32px;
  color:#58463a;
  background-color: rgba(200, 121, 19, 0.1);
  border: none;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:12px;
  font-size:14px;
  font-family: "CandideCondensedRegular", serif;
  text-shadow: -1px -1px 0 #eed8a2, 1px -1px 0 #eed8a2, -1px 1px 0 #eed8a2, 1px 1px 0 #eed8a2;
}

.tabcontent button:hover, .tabcontent button:active{
  background-image:linear-gradient(rgba(215,69,169,0), rgba(215,69,169,1));
  background-color:rgba(0,0,0,0);
}

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

/* The Close Button */
.close {
  position: absolute;
  right:0;
  padding: 3px 8px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  z-index:9999;
}

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

/* The Modal (background) */
.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  top:0;
  left: 29%;
  width: 71%; /* Full width */
  height: 100vh; /* Full height */
}

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

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

@media (orientation:portrait){
	
	
	
  div.modal {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 4; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color:rgba(0,0,0,0.5);
  /*overflow: auto;  Enable scroll if needed */
}
  model-viewer{
  width:100vw;
  height:100vh;
}

div.characterselect{
position: absolute;
width: calc(100% + 15px);
left: -20px;
}

/* Style the tab content */
div.characterButtons {
	height:100%;
overflow-y: hidden;
}

div.tabcontent{
max-width:calc(60% - 80px);
overflow-y: hidden;
}

}

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