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

body {
        margin: 0;
    }
.background{
  width:100%;
}
	
@font-face {
	font-family: "Zen Kaku Gothic Antique";
	src: url("/ui/DFG-KaKouGothic-W5.ttf");
}

.zen-kaku-gothic-antique {
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "ReiGaSou";
	src: url("/ui/DFG-ReiGaSou-W7.ttf");
}

.rei-ga-sou {
	font-family: "ReiGaSou", serif;
	font-weight: 400;
	font-style: normal;
}


	
.backbutton {
	position: fixed;
	z-index: 5;
}

.backbutton img {
  margin-left:12%;
	width:50px;
	height:auto;
}

.previous {
	bottom: 5%;
	left: 3%;
	position: fixed;
	z-index: 5;
}

.next {
	bottom: 5%;
	right: 3%;
	position: fixed;
	transform: rotateY(180deg);
	z-index: 5;
}

.overlaybox {
  background-color: rgba(255, 255, 255, 0.1);
  margin-left:5%;
  margin-right:5%;
  padding-top:10px;
  padding-bottom:10px;
  min-height:100vh;
}

table {
border: 0; /* reset */
font-family: "Zen Kaku Gothic Antique", sans-serif;
width: 85%;
margin: auto;
color: #ffffff;
border-color: transparent;
border-style: solid;
border-width: 20px;
border-spacing: 0px;
border-image: url(/ui/Tutorial_bg_4823.png) 29 fill;
z-index:4;
}

table img{
  height:100px;
  margin-left: auto;
  margin-right: auto;
  display:block;
}

td, th {
  text-align: left;
  padding: 8px;
}

th {
  border-image: url(/ui/com_fullscreen_bg_887.png);
}

tr {
	background-attachment: fixed;
  border: 0px solid #c6d9ff;
  box-shadow: 1px 1px #c6d9ff;
  clip-path: inset(-4px 0px -4px 0px);
}

.mainheader {
  z-index:3;
  text-align:center;
  height:250px;
  width:auto;
}

.mainheader img{
  height:100%;
}

.banner{
  margin:auto;
  width:fit-content;
}

.banner img{
  width:auto;
  height:25vh;
}

.header {
  margin:auto;
  width:fit-content;
}
.header img {
  width:100%;
}

.ColImgWidth {
	width: 35%;
}

.ColName {
	width: 15%;
}

.ColDialogue {
	width: 0;
}

.container {
	font-family: "Zen Kaku Gothic Antique", sans-serif;
  border: 0; /* reset */
width: 70%;
text-align:center;
margin: auto;
color: #ffffff;
border-color: transparent;
border-style: solid;
border-width: 20px;
border-spacing: 0px;
border-image: url(ui/Tutorial_bg_4823.png) 29 fill;
z-index:4;
}

.skiticon img {
  transform: scale(0.9);
  vertical-align:bottom;
}

.skiticon {
  display:inline-table;
  background-image:url('/ui/iconbg.png');
  background-position: center;
  background-repeat: no-repeat; 
  background-size:contain;
  width:108px;
  height:auto;
}

.charabiocontainer {
  border: 0; /* reset */
width: 80%;
text-align:center;
margin-left: auto;
margin-right: auto;
  margin-top:5px;
color: #ffffff;
border-color: transparent;
border-style: solid;
border-width: 20px;
border-spacing: 0px;
border-image: url(ui/Tutorial_bg_4823.png) 29 fill;
z-index:4;
  padding:5px;
}

.eventcontainer {
  margin-top:5px;
  border: 0; /* reset */
width: 70%;
text-align:center;
margin: auto;
color: #ffffff;
border-color: transparent;
border-style: solid;
border-width: 20px;
border-spacing: 0px;
border-image: url(ui/Tutorial_bg_4823.png) 29 fill;
z-index:4;
  padding:5px;
}

.eventcontainer img {
  transform: scale(0.985) translateY(1px);
  vertical-align:bottom;
  width:100%;
}

.eventlogo {
  display:inline-table;
  background-image:url('/ui/logobg.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size:contain;
  width:376px;
  height:88px;
}

.recocontainer {
  font-family: "ReiGaSou", serif;
  border: 0; /* reset */
width: 70%;
text-align:center;
margin: auto;
color: #ffffff;
border-color: transparent;
border-style: solid;
border-width: 20px;
border-spacing: 0px;
border-image: url(ui/Tutorial_bg_4823.png) 29 fill;
z-index:4;
  padding:5px;
}

.recologo{
  background-image:url('/ui/recobg.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size:contain;
  width:376px;
  height:88px;
  margin-bottom:-20px;
  display:inline-table;
}

.recologo a{
  position:relative;
  text-decoration:none;
  font-size:28px;
  text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white;
  color:#005de5;
  top:13px;
}

.nameheader { font-family: "ReiGaSou", serif;grid-area: top;font-size:25px;}
.artside { grid-area: left; width:100%;}
.artside img {width:100%;height:auto;}
.storyquote {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: bottomleft;height:fit-content;}
.gachaquote {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: topleft;height:fit-content;}
.statsorigingame {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: origingame;}
.statsgender {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: gender;}
.statsage {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: age;}
.statsheight {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: cheight;}
.statsweight {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: cweight;}
.statsvoice {font-family: "Zen Kaku Gothic Antique", sans-serif; grid-area: chva;}
.notes {grid-area: footer;}
.notes p {font-family: "Zen Kaku Gothic Antique", sans-serif; margin-left:15px;margin-right:15px;}
.notes u { font-family: "ReiGaSou", serif;}

.grid-container {
  display: grid;
  grid-template:
    'top top top top top top top top'
    'origingame origingame gender age cheight cweight chva chva'
    'topleft topleft topleft topleft topleft topleft topleft topleft'
    'left left left left footer footer footer footer'
    'left left left left footer footer footer footer'
    'bottomleft bottomleft bottomleft bottomleft bottomleft bottomleft bottomleft bottomleft';
  grid-gap: 5px;
  padding: 10px;
  height:fit-content;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.1);
  text-align: center;
  padding: 20px 0;
}

@media screen and (max-width:600px) {
	td, th {
		display: grid;
	}
	colgroup .ColImgWidth{
	width: 85%;
}
  div .eventlogo{
   width:100%;
  }
  div .eventcontainer{
    width:90%;
  }
  div .recologo{
   width:100%;
  }
  div .recocontainer{
    width:90%;
  }
  table{
   width:94%; 
  }
  div .mainheader {
    height:auto;
}

div .mainheader img{
  width:100%;
  height:auto;
}
div .skiticon {
  height:68px;
  width:68px;
}
div .skiticon img{
  width:100%;
  height:auto;
}
  div .grid-container {
  grid-template:
    'top top'
    'origingame origingame'
    'gender age'
    'cheight cweight'
    'chva chva'
    'topleft topleft'
    'left left'
    'footer footer'
    'bottomleft bottomleft';
}
div .event-container{
  width:70%;
}
}

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