/* 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." */

:root {
  overscroll-behavior: none;
}

@font-face{
  font-family: 'lowball';
  src: url(Fonts/LowballRegularText-X3ax2.ttf);
}

@font-face{
  font-family: 'univers';
  src: url(Fonts/UniversLight.ttf);
}

@font-face{
  font-family: 'letrashit';
  src: url(Fonts/LetrashitRegular-7O7wE.ttf);
}

h1 {
  font-family: 'letrashit', sans-serif;
  font-size: 40pt;
  margin-top: 0;
  margin-bottom: 0;
  text-align:center;
}

h2 {
  font-family: 'lowball', sans-serif;
  margin-top: 0;
  margin-bottom: 10px;
  text-align:center;
}

h3 {
  font-family: 'univers', sans-serif;
  margin-top: 0;
  margin-bottom: 30px;
  text-align:center;
}

  
body {
    overscroll-behavior: none;
}

body {
  
  background-image: url("Background Stuff/Light.jpg");
  background-size: cover; 
  background-position: center; 

  background-color: White;
  color: black;
  font-family: 'univers', sans-serif;
  letter-spacing: normal;
  
  padding: 0;
  margin: 0;
  width: 100%;
}


nav a {
  display: block;
  border: 10px solid transparent;
  padding: 0;
  border-image: url(Navigation/Border.png) 75 round;
  
  font-family:'lowball';
  color: black;
  text-decoration: none;
  
  margin-top: 30px;
  margin-bottom: 10px;
}

.sidenav {
  height: 100%;
  width: 188px;
  position: fixed;
  z-index: 1;
  top: 81;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
  padding-top: 85px;
  padding-left: 6px;
  
}

.sidenav a {
}

.sidenav a:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.main {
  margin-left: 230px; /* Same as the width of the sidenav */
  margin-top: 90px;
  padding: 0px 10px;
  float: left
}

.main_shove {
  margin-left: 200px; /* Same as the width of the sidenav */
  margin-top: 90px;
  padding: 0px 10px;
  float: left
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 50px;}
  .sidenav a {font-size: 18px;}
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}

 .centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.centered-text {
  text-align: center;
}

.transborder {
  position: relative; /* Needed for positioning the pseudo-element */
  /* Other styles for your container */
  padding: 0px; /* Adjust as needed to make space for the border */
}

.transborder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid transparent;
  padding: 0;
  border-image: url(Navigation/Border.png) 75 round;
  opacity: 0.5; /* Apply opacity to the border image */
  z-index: -1; /* Place behind the content */
}

 .borderimg { 
  border: 10px solid transparent;
  padding: 0;
  border-image: url(Navigation/Border.png) 75 round;}
  
div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 1px solid transparent;
  width: 500px;
}

div.gallery-item:hover {
  border: 1px solid transparent;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
  font-size: 15pt;
  font-family: 'lowball';
}

.shove_on {
  transform: translateX(0px);
}

.shove_off { 
  transform: translateX(-188px);
}

.shove_button_on {
  position:fixed; 
  left: 195px;
  top: 50%;
  
  display: block;
  border: 10px solid transparent;
  padding: 0;
  border-image: url(Navigation/Border.png) 75 round;
  
  font-family:'letrashit';
  color: black;
  text-decoration: none;
  
  width: 30px;
  height: 90px;
  
  opacity: .4;
  
  background: rgb(200,200,200)
}

.shove_button_off {
  
  transform: translateX(-188px);
  
  display: block;
  border: 10px solid transparent;
  padding: 0;
  border-image: url(Navigation/Border.png) 75 round;
  
  font-family:'letrashit';
  color: black;
  text-decoration: none;
  
  width: 30px;
  height: 90px;
  
  opacity: .4;
  
  background: rgb(200,200,200)
  
}

.shove_button_on::before {
  content: "<";
}

.shove_button_off::before {
  content: ">";
}

.shoveable_image { 
        transform: translateX(-188px);
       filter: drop-shadow( 4px 0px 3px rgba(0, 0, 0, 0.3));
       opacity: .7;
       position: fixed;
       height:100%;
}
  
.shoveable_nav { 
         transform: translateX(-188px);
         pointer-events: none;
          position: fixed
        
}
  
  
/*shove needs to be -188