@font-face {
	font-family: "NotInterRegular";
	src: url("/ui/NotInter-Regular.ttf");
}

.notinter-regular {
	font-family: "NotInterRegular", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.chapterTree {width:80%;margin-left:auto;margin-right:auto;text-align:center;}

.unused{
  background-color:rgba(247, 173, 215,0.2);
  color:#f73337;
}
  
.textcontainer{
    display:block;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:75%;
    top:5%;
    height:90%;
  background:
              linear-gradient(90deg, rgba(214, 187, 120, 0) 0%, rgba(214, 187, 120, 0) 45%, rgba(208, 167, 68,0.1) 46%, rgba(180, 133, 41,0.2) 49%, rgba(181, 136, 38,0.5) 50%, rgba(180, 133, 41,0.2) 51%, rgba(208, 167, 68,0.1) 54%, rgba(214, 187, 120, 0) 55%, rgba(214, 187, 120, 0) 100%) left top no-repeat,
              url('ui/bgtile.png') left top repeat;
  box-shadow: inset 1px 0 6px 10px #7b6ba7, inset 0 0 0 20px #8e7ec0;
  font-size:16px;
  z-index:5;
  font-family:"CandideCondensedRegular", serif;
  margin-top:3px;
  margin-bottom:3px;
}

.shadow {
  top:20px;
  left:20px;
    width:calc(100% - 40px);
    height:calc(100% - 40px);
  position:absolute;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#f2df80 transparent;
    display:block;
    position:relative;
  color:#5e2e18;
  box-shadow: 0 0 10px 5px rgba(113, 53, 81, 0.5);
  }
  
  td, tr, th{
    			  padding:0.5% 2%;
    			}
    			
    			
    			h4{text-align:center;text-decoration:underline; font-weight: bold;}
    			
    			h2{
    			  padding-top:1%;
    			 padding-bottom:1%;
    			 text-align:center;
    			}
  
  tr:not(:first-child){
    border-top: 1px dotted #3c3c3c;
  }
  
  tr:not(:last-child){
    border-bottom: 1px dotted #3c3c3c;
  }
  
    table{
      border-collapse:collapse;
      margin:6px;
      padding-top:5%;
      padding-bottom:5%;
      max-height:80%;
      width:90%;
      margin-left:auto;margin-right:auto;  
      color:#5e2e18;
  background-color:rgba(90,120,118,0);
    	font-family:"CandideCondensedRegular", serif;
  text-shadow: -1px -1px 0 #dec491, 1px -1px 0 #dec491, -1px 1px 0 #dec491, 1px 1px 0 #dec491;
    }
    .speaker {
    	min-width:15%;
    	text-align:right;
    	font-weight: bold;
    	font-family:"CandideCondensedRegular", serif;
    	color:#f2df80;
  text-shadow: -1px -1px 0 #7b5b04, 1px -1px 0 #7b5b04, -1px 1px 0 #7b5b04, 1px 1px 0 #7b5b04;
    }
    
    a{color:#7b5b04;text-shadow:none;}
    
    .simpleText {border: 1px #eee solid;width:100%;margin-left:auto;margin-right:auto;}
    .jpText {width:35%;
	font-family: "NotInterRegular", sans-serif;}
    
    .optionalScene {background-color:rgba(40, 132, 0,0.2) ;overflow:hidden; border: 1px #288400 solid;width:75%;margin-left:auto;margin-right:auto;margin-bottom:1%;}
    .unusedText {overflow:hidden; border: 1px #e12e2e solid;width:75%;margin-left:auto;margin-right:auto;margin-bottom:1%;background-color:rgba(247, 173, 215,0.2);}
    
    .chapterTree {width:80%;margin-left:auto;margin-right:auto;text-align:center;}
    .chapterTree th{
      width:50%;
    }
    
    .top{background:url('ui/bordertop.png') center top repeat-x;background-size:contain;height:100px;position:relative;top:0;}
    .bottom{background:url('ui/borderbottom.png') center bottom repeat-x;background-size:contain;height:100px;}
                
    .pagination{
      position:relative;
      text-shadow:none;
      width:40%;
      height:fit-content;
      margin:0 auto;
      top:2.5%;
      display:table;
      vertical-align:middle;
      border-image: url('ui/header.png') 40 fill;
      border-image-outset:2vh;
      }
      .pagination table a{
      color:white;
      text-shadow: -1px -1px 0 #3b535d, 1px -1px 0 #3b535d, -1px 1px 0 #3b535d, 1px 1px 0 #3b535d;}
    .pagination-bar{text-align:center;width:calc(100% / 3);}
    .fa-arrow-left{
    padding-right:0.5em;
      color:white;
      text-shadow: -1px -1px 0 #3b535d, 1px -1px 0 #3b535d, -1px 1px 0 #3b535d, 1px 1px 0 #3b535d;
    }
    
     .fa-arrow-right{
    padding-left:0.5em;
      color:white;
      text-shadow: -1px -1px 0 #3b535d, 1px -1px 0 #3b535d, -1px 1px 0 #3b535d, 1px 1px 0 #3b535d;
     }
    
    th {
      padding-top:20px;
      text-align:center;    			  font-size:24px;
    			  font-weight:700;
    			  text-decoration:underline;
    			  font-style:normal;
    			}
    			
    
    /* 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(190,190,190, 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;
  width:100vw;
  height:100vh;
}

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

.candide-condensed-regular {
	font-family: "CandideCondensedRegular", sans-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: -1;
}

@media screen and (max-width:675px) {
	div.pagination{
      width:95%;
      border-image-outset:2vh;
      }
  div.pagination tr{
    display:table-row;
  }
  tr {
		display: grid;
	}
	
	td{
	  width:100%;
	}
	td.speaker{
	  text-align:center;
	}
	td.jpText, th.jpText{
	  width:100%;
	}
	div.textcontainer{
	  background:url('ui/bgtile.png') left top repeat;
	  width:95%;
	}
	div.bottom{
	     position: unset;
  bottom: unset; 
  width:unset;
	}
	table.chapterTree tr{
	  display:table-row;
	}
}