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


body {
  background: url('img/bgsmall.jpeg') repeat center;

  font-family: VCR OSD Mono;

  margin: 0;
  padding-bottom: 50vh;
  font-size: 20px;
  background-color: #130200;
  color: #e2d6ce;
  font-family: VCR OSD Mono;
      }

::selection {
    background: #ff0909;
    color: rgb(255, 255, 255);
    text-shadow: none;
}



:root {
	--cursor-default: url("normal cursor.png");
	--cursor-point: url("hover cursor.png");
}


/** CURSOR */
html,
label {
	cursor: var(--cursor-default), auto;
}
a:link,
button,
summary,
input {
	cursor: var(--cursor-point), default !important;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #050000;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  color: #ad8a8a;
  text-align: center;
  margin: 0px;
  padding: 30px 20px;
  text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #6c4747;
  color: rgb(25, 2, 8);
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #3b4729;
  color: rgb(194, 199, 123);
}


.text {

 margin: auto;
 justify-content: center;  
 text-align: center;

}

.main {

  display: flex;
  font-size: 15px;
  width: 90%;
  padding: 20px;
  padding-left: 20px;
  margin: 01%;
  flex-flow: column wrap;
  background: url('img/midtile.jpg') repeat center;
  justify-content: left;  
  text-align: left;
  gap: 20px 20px;
  border-style: solid;
  border-width: 10px;
  border-color: #150000;
  border-image: url('img/eye texture 3.jpg') 30;
  overflow: visible;
}


.main2 {

  display: flex;
  width: 70%;
  margin: auto;
  padding: 5%;
  flex-flow: column wrap;
  background: url('img/midtile.jpg') repeat center;
  justify-content: center;  
  text-align: center;
  gap: 20px 20px;
  overflow: hidden;
}




.index {
  width: 80%;
  margin: auto;
  justify-content: center;  
  text-align: center;
  overflow: hidden;
  gap: 5px 5px;
  font-family: Times;
  font-size: 22px;
  color: #e06332;

}

.gunkworld {

display: flex;
background: url('img/blacknoise.png') repeat center;
margin: auto;
font-size: 15px;
width: 85%;
justify-content: left;
  border-style: solid;
  border-width: 10px;
  border-color: #150000;
  border-image: url('img/eye texture 3.jpg') 30;
font-family: VCR OSD Mono;
text-justify: right; 
color: #c32c36;
overflow: hidden;

}

#gunktext{

justify-content: right;
text-align: right;
font-size: 18px;
padding-left: 100px; 
padding-right: 15px;
color: #e2c27ebc;

}

.hi {
  width: 60%;
  justify-content: space-between;
  display: flex;
margin: auto;
color: #df222f;
background-color: black;
padding: 5px;
list-style-type: none;
}

.links {

  display: block;
  width: 68%;
  margin: auto;
  padding: 0%;
  flex-flow: row wrap;
  background: url('img/midtile.jpg');
  gap: 5px 5px;
  border-style: solid;
  border-width: 15px;
  border-color: #150000;
  border-image: url('img/midtile.jpg') 30;
  overflow: hidden;
  
}




@font-face {
  font-family: VCR OSD Mono;
  src: url('/VCR_OSD_MONO.ttf') format('truetype'); }     
  
      
      
      
/* unvisited link */
a:link {
  color: #DB7657;
}

/* visited link */
a:visited {
  color: #79611f;
}

/* mouse over link */
a:hover {
  color: #DB3D0E;
}

/* selected link */
a:active {
  color: #FF0000;
}



/* FREAKING GALLERY Stuff. */






:root {
		background-color: #090100;
	color: rgb(228, 192, 147);
	font-family: system-ui;
  
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;
}

body {
margin: 0;
}

.slidesshow {
	display: grid;
	grid-template-columns: 4rem auto;
	gap: 0.5rem;


	&__thumbnail {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		display: block;
	}

	&__slide {
		display: block;

	}

	&__dot {
		&:active {
			outline: solid;
		}
	}
	
	&__container {
  display: grid;
		gap: .5rem;
}
	
	.sticky {
		position: sticky;
		display: grid;
		gap: .5rem;
		width: 90px;
    
	}

.section {
	max-width: 1200px;
	margin: 1rem auto;
	padding: 0 1rem;
}

img {
	width: 60%;
  max-height: 90vh
	height: auto;
}

}


.gallery2 {

display: inline-block;
background: url("img/midtile.jpg") repeat center;
padding: 5px;
margin: 20px;
margin-left: 40px;

p{

padding-left: 10px;
padding-right: 10px;
color: #e4bb7e;
font-size: 17px;
}

img{
height: 250px;
padding-bottom: 10px;

}



}


/* EXPANDING STUFF */

.lightbox-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #0a0605cf;
      z-index: 929;
      justify-content: center;
      align-items: center;
    }

    .lightbox-img {

      min-height: 90%;
      max-height: 90%;
      box-shadow: 0 0 20px #0a0605cf;
      border-radius: 4px;
    }