html{
  --white:#E7E6DD; 
  --dimwhite:#d7d6cD; 
  --black:#181511;
  --whitetransluscent:#E7E6DD66; 
  --blacktransluscent:#18151166;
  --red:#b02010;
  --red2:#fa5030;
  --gold:#a08022;
  --gold2:#c0a032;
  --gray:#423d3a;
  --maroon:#8a0000;
  --nav-item-hover:var(--whitetransluscent);
  --light:var(--white);
  --dark:var(--black);
  --accent:var(--maroon);
  --accent2:var(--gray);
  --pagebody-color:var(--dark);
  --pagebody-border-color:var(--dark);
  --hlogo-inv-val:0;
  --blog-page-width:360px;
  --main-content-height:calc(100vh - 120px - 1.5em);
  --content-inset-shadow:inset 0 0 4px var(--dark);
  --content-outset-shadow:0 0 4px var(--dark);
  --navtext-brightness-filter:1;
  --navtext-filter:brightness(0.26) contrast(1.25) drop-shadow(10px 20px 4px #11111188);
  --mainpage-width:60vw;
  --sidenav-widths:240px;
  --maincontent-padding:48px 82px;
}

[data-theme="dark"]{/*
  --light:var(--black);
  --dark:var(--white);*/
  --light:var(--dimwhite);
  --pagebody-color:var(--dark);
  --pagebody-color:var(--gray);
  --accent:var(--gold2);
  --nav-item-hover:var(--blacktransluscent);
}
html,body{  
  background-color:var(--pagebody-color);
  padding:0;
  margin:0;
  font-family:times, serif;
  
}
#backdrop{width:100vw;height:100vh;z-index:0;position:fixed;background:url(/imgs/backdrop.jpg);filter:brightness(.05) contrast(1);background-size:500px;animation-timing-function:linear;animation-direction:forwards;animation-duration:10s;animation-iteration-count:infinite;animation-name:backdropslide;}


#head-logo{
  filter:invert(var(--hlogo-inv-val));
  position:fixed;
  width:120px;
  left:calc(50vw - 60px);
  height:auto;
  aspect-ratio: 1/1;
  
  top:6px;
  background:var(--accent);
  border-top:solid 1em var(--pagebody-border-color);
  border-bottom:solid .5em var(--pagebody-border-color);
  border-right:solid .5em var(--pagebody-border-color);
  border-left:solid .5em var(--pagebody-border-color); 
  border-radius:100%;
  display:flex;
  justify-content: center;
  align-items:center;
  box-shadow:var(--content-outset-shadow);
}
  #head-logo{
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  
  }

#head-logo>img{
  width:100px;
  height:auto;
  margin-top:6px;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#head-logo:hover>img{
  animation:stuttery 1s infinite;
  animation-direction: alternate;
}

#head-logo:hover{
    background-color:color-mix(in srgb,var(--accent) 80%,var(--dark));
}
@keyframes stuttery{
  0%{margin-left:0}
  4%{margin-left:0px}
  5%{margin-left:8px}
  6%{margin-left:0px}
  24%{margin-left:0px}
  25%{margin-left:-12px}
  31%{margin-left:0px}
  32%{margin-left:4px}
  33%{margin-left:0px}
  51%{margin-left:0px}
  52%{margin-left:9px}
  53%{margin-left:0px}
  80%{margin-left:0px}
  81%{margin-left:-4px}
  82%{margin-left:0px}
  88%{margin-left:0px}
  89%{margin-left:-10px}
  90%{margin-left:0px}
}@keyframes stuttery2{
  0%{margin-left:0;      margin-right:0px;}
  4%{margin-left:0px;    margin-right:0px;}
  5%{margin-left:8px;    margin-right:-8px;}
  6%{margin-left:0px;    margin-right:0px;}
  24%{margin-left:0px;   margin-right:0px;}
  25%{margin-left:-12px; margin-right:12px;}
  31%{margin-left:0px;   margin-right:0px;}
  32%{margin-left:4px;   margin-right:-4px;}
  33%{margin-left:0px;   margin-right:0px;}
  51%{margin-left:0px;   margin-right:0px;}
  52%{margin-left:9px;   margin-right:-9px;}
  53%{margin-left:0px;   margin-right:0px;}
  80%{margin-left:0px;   margin-right:0px;}
  81%{margin-left:-4px;  margin-right:4px;}
  82%{margin-left:0px;   margin-right:0px;}
  88%{margin-left:0px;   margin-right:0px;}
  89%{margin-left:-10px; margin-right:10px;}
  90%{margin-left:0px;   margin-right:0px;}
}
@keyframes backdropslide{
  from{background-position:0 0}
  to{background-position:0 500px}
}
#main-content{
  border-top:solid 1em var(--pagebody-border-color);
  border-bottom:solid .5em var(--pagebody-border-color);
  border-right:solid .5em var(--pagebody-border-color);
  border-left:solid .5em var(--pagebody-border-color); 
  background-color:var(--light);
  margin:0;
  height:var(--main-content-height);
  min-height:calc(100vh - 120px - 1.5em);
  box-shadow:var(--content-inset-shadow);
  overflow-y:scroll;
  width:var(--mainpage-width);
  margin-top:20px;
  padding:var(--maincontent-padding);
  box-sizing: border-box;
}
header{
  height:0px;
  position:fixed;
  top:0;
  background: linear-gradient(180deg, var(--light),var(--dark));
  width:100vw;
  display:none;

}

header >div{
  height:100%;
}
header >div>img{
  height:90%;
  margin:0 16px;
}

.head-left{
  position:absolute;
  left:8px;
  width:fit-content;
  }
  
.head-right{
  position:absolute;
  right:8px;
  width:fit-content;
  }
  
.head-center{
  position:absolute;
  right:50%;
  left:50%;
  }
  
  .nav-items-set{
    
  width:fit-content;
  display:flex;
  flex-direction:row;
  align-items:center;}
  
.navitem{
  color:var(--dark);
  padding:.5em 1em;
  font-size:16pt;
  font-family:BlackCasper,times;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  box-sizing: border-box;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position:relative;
  filter:var(--navtext-filter);
}
.navitem:hover{
  color:var(--accent);
  opacity:1;
  filter:brightness(0.8) contrast(1.1)  drop-shadow(10px 20px 4px #11111188);
  animation-name:stuttery2;
}
.navitem>img{
  width:100%;
  box-sizing: border-box;
}
.navitem>span{
  font-size:36pt;
  color:white;
  opacity:0;
  user-select: none;
  top:40%;
  position:absolute;
}
.navitem:hover>span{
  opacity:1;
  
  
}
#blog-panel{
  width:var(--blog-page-width);
  border-top:solid 1em var(--pagebody-border-color);
  border-bottom:solid .5em var(--pagebody-border-color);
  border-right:solid .5em var(--pagebody-border-color);
  background-color:var(--dark);
  top:0;
  bottom:0;
  display:relative;
  
}

#main-wrapper{
  height:100vh;
  display:flex;
  flex-direction:row;
  position:relative;
  justify-content: center;
  align-items:center;
}
		
	/* toggle in label designing */
	.toggle {
		position : relative ;
		display : inline-block;
		width : 24px;
		height : 10px;
		background-color: var(--light);
		border-radius: 30px;
		border: 2px solid var(--dark);
	}
		
	/* After slide changes */
	.toggle:after {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: var(--dark);
		top: 0px;
		left: 0px;
		transition: all 0.5s;
	}
	.navitem:last-child{
	  margin-bottom:12vh;
	}
	#right-wrapper>.navitem:last-child{
	  margin-bottom:10vh;
	}
	#left-wrapper{
	  width:var(--sidenav-widths);
	  position:fixed;
	  left:calc(50vw - (var(--mainpage-width) / 2) - (var(--sidenav-widths) / 2 * 1.15));
	  height:100vh;
	  z-index: 1000;
	  display:flex;
	  top:0;
	  flex-direction: column;
	  justify-content: center;
	}
	#right-wrapper{
	  width:var(--sidenav-widths);
	  position:fixed;
	  left:calc(100vw - ((100vw - var(--mainpage-width)) / 2) - (var(--sidenav-widths) / 2 * (1 / 1.15)));
	  height:100vh;
	  z-index: 1000;
	  display:flex;
	  flex-direction: column;
	  top:0;
	  justify-content: center;
	}
		
		#dark-toggle{
		  width:60px;
		  display:flex;
		  flex-direction:column;
		  justify-content:center;align-items:center;
		}
	/* Checkbox checked effect */
	.checkbox:checked + .toggle::after {
		left : 14px;
	}
		
	/* Checkbox checked toggle label bg color */
	.checkbox:checked + .toggle {
		background-color: var(--accent);
	}
		
	/* Checkbox vanished */
	.checkbox {
		display : none;
	}
	
	h1{
	  font-size:64pt;
	  text-align: center;
	  font-family: BlackCasper;
	  color:var(--red);
	}
	h1>span{
	  font-family: times;
	}
#dark-toggle > p{font-size:8pt;
	text-align:center;width:100%;margin:4px;padding:0;
	}
	
	@media(max-aspect-ratio:3/2){
	  html{
	    --mainpage-width:72vw;
    }
    #main-content h1{
      font-size:48pt
    }
	}
	@media(max-aspect-ratio:1/1){
	  html{
	    --mainpage-width:86vw;
	    --maincontent-padding:32px 12px;
    }
    #main-content h1{
      font-size:36pt
    }
    #right-wrapper{
      display:none;
    }
    #left-wrapper{
      display:none;
    }
    #left-wrapper{
	  width:40vw;
	  position:fixed;
	  left:0;
	  height:80px;
	  z-index: 1000;
	  display:flex;
	  top:48px;
	  flex-direction: row;
	  justify-content: center;
	}
	#right-wrapper{
	  width:40vw;
	  position:fixed;
	  right:0;
	  height:80px;
	  z-index: 1000;
	  display:flex;
	  top:48px;
	  flex-direction: row;
	  justify-content: center;
	
	  left:auto;
	}
	.navitem,#right-wrapper>.navitem,#right-wrapper > .navitem:last-child{
  	--navtext-filter:none;
	  margin:0;
	  padding:0;
	  min-width:30%;
	  max-width:60%;
	}
	.navitem > span {
	  opacity: 1;
	  font-size:18pt;
  }
	
	.navitem > img {
	  width:100%;
	}
	#shows-nav{
	  margin-bottom:40px!important;
	}
	}
	@media(max-aspect-ratio:2/3){
	  html{
	    --mainpage-width:100vw;
    }
	#shows-nav{
	  margin-bottom:84px!important;
	}
	#photos-nav{
	  margin-bottom:-24px!important;
	  margin-right:18px!important;
	  margin-left:-18px!important;
	}
    #main-content h1{
      font-size:36pt
    }
	}