/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import '/fonts/fonts.css';

html{
  --font-strength:1;  
  --nav-item-scale:1;
}
body {
  background-color: white;
  color: black;
  font-family: Verdana;
  padding:0;
  margin:0;
  height:100vh;
  width:100vw;
  background:url(/imgs/background.png);
  background-size:33.3%;
  background-position:20% 50%;
  background-color:#2a3f71;
  overflow-x:hidden;
}
#overflowIndicator{
  position:absolute;right:22px;top:auto;left:auto;
	bottom: 15px;
  mix-blend-mode:overlay;
  opacity:1;
  transition:opacity 1s;
}
#overflowIndicator[data-top="1"]{
  transform:scaleY(-1);
  bottom:auto;
  top:15px;
}

#overflowIndicator>img{
    width:32px;
    opacity:0;
  transition:opacity 0.7s;
}
#overflowIndicator[data-loaded="1"]>img{
    opacity:1;
}
#background {
  background:url(/imgs/background.png);
  background-size:33.3%;
  
}
#background-stains{
  z-index:1;
  width:100vw;
  height:100vh;
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:url('/imgs/stain.JPG');
  mix-blend-mode:color-burn;
  pointer-events:none;
  background-size:cover;
}
#background,#background-over {
  height:100%;
  overflow-x:hidden;
  z-index:2;
}

#background-over {
  display:flex;
  
}
.navPanel {
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  margin:0 ;
  padding:24px 24px;
  width:fit-content;
  grid-gap:12px;
  box-sizing:border-box;
}
.navPanel .nav-item {
  transform-origin: 50% 50%;  
  grid-gap:12px;
  width:fit-content;
  display:flex;align-items:center;
  filter:drop-shadow(10px 8px 3px #15151599);
  transform:scale(var(--nav-item-scale));
}
.navPanel .nav-item span {
  font-family:felix;
  font-size:24pt;
  color:white;
  text-shadow: 0 0 2px gray;
  user-select:none;
}

.navPanel .nav-item img {
  width:92px;
  height:auto;
}

#topPanel{
  flex-direction:row;  
  grid-gap:24px 18px;
  flex-flow: row wrap;
  justify-content:center;
  align-items:center;
  width:100%;
  display:none;
}

#topPanel .nav-item {
  flex-direction:column;
}

#topPanel .nav-item span {
  font-family:felix;
  font-size:18pt;
  color:white;
  text-shadow: 0 0 2px gray;
  user-select:none;
}

#topPanel .nav-item img {
  width:64px;
  height:auto;
}
#mainPanel {
  flex-grow:1;
  width:100%;
  position:relative;
  z-index:5;
}
#mainPanel::after{
  content:"";
  box-sizing:border-box;
  border:solid calc(375px / 2) transparent;
  border-image:url(/imgs/frame.png);
  border-image-slice:288 375;
  z-index:1000;
  width:100%;
  position:absolute;left:0;top:0;
  min-height:100%;
  display:flex;
  pointer-events:none;
}
#mainPanelFrame {
	width: calc(100% - 290px);
	height: calc(100% - 375px / 2 - 125px);
	margin-left: 145px;
	margin-top: calc(375px / 4 + 62px);
	position:relative;
}

#mainContentWrapper{
	height:100%;
	background: url(/imgs/paper.png);
	background-size: 50%;
	background-position: center;
	background-repeat: repeat;
	overflow-y:scroll;
}
#mainContent {
	padding: 12px 64px;
	font-family: felix;
	mask: url('/imgs/mask2.jpg');
	mask-size: cover;
	mask-composite: subtract;
	mask-mode: luminance;
	opacity: .78;
	color: #261000;
	mix-blend-mode: hard-light;
}
#bgMask {
  
	mask: url('/imgs/mask2.jpg');
	mask-size: cover;
	mask-composite: subtract;
	mask-mode: luminance;
	background:#674400;
	opacity:.25;
	min-height:100%;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	right:0;
	top:0;
  bottom:0;
  pointer-events:none;
}

h1,h2,h3,h4{
  text-align:center;
  font-family:felix,georgia!important;
}
h1{font-size:calc(32pt * var(--font-strength));}
h2{font-size:calc(24pt * var(--font-strength));}

#mainContent div{
  font-family:georgia;  
}
#mainContent #actual-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;  
}

#mainContent p {
  font-size:calc(16pt * var(--font-strength));
  line-height:1.5;
}


#mainContent .accent-image {
  width:30%;
  height:auto;
  float:left;
  opacity:.8;
}
html[data-page="1"] #mainContent .accent-image {
  width:20%;
  height:auto;
  float:right;
  opacity:.8;
}
html[data-page="2"] #mainContent .accent-image {
  width:32%;
  height:auto;
  float:right;
  opacity:.8;
}
html[data-page="3"] #mainContent .accent-image {
  width:30%;
  height:auto;
  float:right;
  opacity:.8;
}
html[data-page="1"] #mainContent iframe {
  filter:brightness(1) contrast(1.6) saturate(.4);border: 0;  width: 100%; height: 340px;
}
.navPanel .nav-item.current>img{
    filter:sepia(4) brightness(.65) contrast(1.75) hue-rotate(-15deg) drop-shadow(0 0 5px #eaeaea) !important;
}
.navPanel .nav-item:not(.current):hover>*,.navPanel .nav-item.current>span{
    filter: drop-shadow(0 0 5px #eaeaea) !important;
}

.navPanel .nav-item.current span{
    color:#9aca8d!important;
}

.actual-content a{
  font-size:calc(12pt * var(--font-strength));  
}

@media(max-aspect-ratio:900/600)
{
  html{
    --font-strength:0.85;
    --nav-item-scale:0.75;
  }
  
  #mainContent{
	  padding: 12px 32px;
  }
  html[data-page="3"] #mainContent .accent-image {
    width:35%;
    height:auto;
    float:right;
    opacity:.8;
  }
  

}

@media(max-aspect-ratio:1/1)
{
  html{
    --font-strength:0.65;
    --nav-item-scale:1;
  }
  #mainContent{
	  padding: 12px 24px;
  }
  #sidePanel{
    display:none;
  }
  #topPanel{    
    display:flex;
  }
  
  #background-over{
    flex-direction:column;
  }
  #mainPanel{
    height:calc(100% + 40px);
    position:relative;
    overflow:hidden;
    margin-top:-40px;
  }
  #mainPanel::after{
    content:"";
    border-image-width:calc(280px / 2);
    width:calc(100% + 40px);
    margin-left:-20px;
    margin-right:-20px;
  }
   #mainPanelFrame {
  	width: calc(100% - 170px);
  	height: calc(100% - 230px);
  	margin-left: 85px;
  	margin-top: calc(375px / 4 + 62px - 40px);
  	position: relative;
  }
  #background-over {
  	flex-direction: column;
  	display: grid;
	  grid-template-rows: max-content auto;
  }
  html[data-page="3"] #mainContent .accent-image {
    width:50%;
    height:auto;
    float:right;
    opacity:.8;
  }
  
}

@media(max-width:450px)
{
  html{
    --font-strength:.5;
    --nav-item-scale:1;
  }
  #mainContent{
	  padding: 12px 24px;
  }
  #sidePanel{
    display:none;
  }
  
#topPanel .nav-item span {
  font-size:16pt;
}

#topPanel .nav-item img {
  width:42px;
}
  #topPanel{    
    display:flex;
  }
  #mainPanel{
    height:calc(100% + 40px);
    position:relative;
    overflow:hidden;
    margin-top:-40px;
  }
  #mainPanel::after{
    content:"";
    border-image-width:calc(220px / 2);
    width:calc(100% + 40px);
    margin-left:-20px;
    margin-right:-20px;
  }
  #mainPanelFrame {
  	width: calc(100% - 130px);
  	height: calc(100% - 190px);
  	margin-left: 65px;
  	margin-top: calc(375px / 4 + 62px - 60px);
  	position: relative;
  }
  #background-over {
  	flex-direction: column;
  	display: grid;
	  grid-template-rows: max-content auto;
  }
}







.hidden{
  display:none;height:0;
  width:0;max-height:0;
  max-width:0;visibility:hidden;
}


.hidden-opacity{
  opacity:0!important;
}