html{
 background-image: url('/ui/com_bg.png'); 
 background-position: left top;
 background-repeat: repeat; 
 background-attachment: fixed; 
 background-size: 100vw 100vh;
}

body {
        margin: 0;
    }
.background{
}
	
@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%;
}

.ColName {
	width: 35%;
}

.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'
    'footer footer footer footer 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%;
}
}