@charset "utf-8";


body {
    background-color: rgb(255, 255, 255);
    background-attachment: fixed;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace", sans-serif;
    color: rgb(0, 0, 0);
  cursor: url('../img/star.png'), auto;


}



a img:hover {

 cursor: url('../img/32.png'), auto;

}
.navbar{
  position: -webkit-sticky; /* For Safari support */
  position: sticky;         /* The magic property */
  top: 0;                   /* Pins it to the very top */
  z-index: 1000;            /* Ensures it stays above your images/content */
  padding: 2px;
  background-color: rgb(152, 152, 152);

}

.banner{
 max-width: 400px;

}

.bannertrue{
 max-width: 800px;
}

.pic{
  max-width: 300px;
}

.icon{
  max-width: 100px;
}

.tinyban{
  max-width: 200px;
}

.dinkydidingo{
   max-width: 200px;
}

/* links*/
a:hover{
  color: #00fff7 !important;

}

a,a:visited{
  color:rgb(51, 0, 255);
}


/* Shrink thumbnail size if the screen size is 600px wide or less */
@media screen and (max-width: 600px) {

  .bannerberserk,.banner,{

    max-width: 400px;
  }
.pic{
  max-width: 300px;
}
}

.warning{
  padding:16px
}
/* CONTACT FORM ---------------------------------------------------------

/* Style the container */
.form-container {
  border-radius: 8px;
  background-color: #f9f9f9;
  padding: 20px;
  width: 300px;
  font-family: Arial, sans-serif;
}

/* Style inputs and textareas */
input[type=text], input[type=email], textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  margin-top: 6px;
  margin-bottom: 16px;
}

/* The Button Styling */
.submit-btn {
  background-color: #cf95ff; /* Green */
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  transition: background-color 0.3s ease; /* Smooth color change */
}

/* Button Hover Effect */
.submit-btn:hover {
  background-color: #a600ff;
}


/* AI HELPING ME DO CSS
/* The Grid */
.masonry {
  column-count: 3; /* Number of columns */
  column-gap: 15px;
  padding: 15px;
}

.item {
  display: inline-block; /* Prevents items from breaking across columns */
  margin-bottom: 15px;
  width: 100%;
}

.item img {
  width: 100%;
  border-radius: 0px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.item img:hover {
  transform: scale(1.02);
}

/* The Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

#lightbox-img {
  max-width: 90%;
  max-height: 80%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Responsive adjustment */
@media (max-width: 768px) {
  .masonry { column-count: 2; }
}


/*  lightbox button*/
.nav-btn {
  position: absolute;
  top: 85%;
  transform: translateY(-50%);
  background: none;        /* Removes the purple background */
  border: none;            /* Removes the button border */
  padding: 0;              /* Removes extra spacing */
  cursor: pointer;
  transition: transform 0.3s ease; /* Smooth hover effect */
  user-select: none;
  z-index: 1010;           /* Ensures buttons stay above the lightbox image */
}

/* Control the size of your custom images */
.nav-btn img {
  display: block;
  width: 150px;             /* Adjust this size to fit your artwork style */
  height: auto;
  opacity: 0.7;            /* Slightly faded by default so they don't distract */
  transition: opacity 0.3s ease;
}

/* Hover Effect: Enlarge and make fully opaque */
.nav-btn:hover {
  transform: translateY(-50%) scale(1.3); /* Enlarge on hover */
}

.nav-btn:hover img {
  opacity: 1;              /* Becomes fully visible on hover */
}

/* Position the buttons on the far left and right */
.prev { 
  left: 30px; 
}

.next { 
  right: 30px; 
}


/* The Exit Button Style */
.close {
  position: absolute;
  top: 0px;
  right: 30px;
  color: white;
  font-size: 50px;       /* Makes it nice and large for thumbs */
  font-weight: bold;
  cursor: pointer;
  z-index: 1020;         /* Ensures it stays above everything */
  transition: 0.3s;
  line-height: 1;        /* Prevents weird vertical spacing */
}

.close:hover {
  color: #bd59b5;        /* Matching your purple theme on hover */
  transform: scale(1.8);
}

/* Lightbox Mobile Fix to keep Exit Button at top */
@media (max-width: 600px) {
  .close {
    top: 40px;
    font-size: 40px;
  }
  
  /* Ensuring the image doesn't overlap the exit button */
  #lightbox-img {
    margin-top: 50px; 
  }




}

.watermark{
  max-width: 150px;
  height:auto;
}

@media (max-width: 600px) {
.watermark{
  max-width: 80px;
  height:auto;
}
}



hr{
   border-style: dashed;
    border-color: #9bf1c9;
}




@media (max-width: 600px) {
.social-icon {
  width: 80px!important;        
}

}

/* caption on project page 

/* Ensure the container is the reference point for the caption */
.item {
  position: relative;
  overflow: hidden; /* Keeps the caption from spilling out if it's animated */
}

.caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Darkens the image for readability */
  color: #fff;
  
  /* Centering Logic */
  display: flex;           /* Enables flexbox */
  justify-content: center; /* Centers text horizontally (left to right) */
  align-items: center;     /* Centers text vertically (top to bottom) */
  text-align: center;      /* Ensures multi-line text is also centered */
  
  /* Hover animation */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item:hover .caption {
  opacity: 1;
}



/* animated hr*/

.transcend {
    width: 100%;             
    height: 32px;          
    background-image: url("../img/assets/jesus.gif");
    background-repeat: repeat-x;/
    background-position: center;
    image-rendering: pixelated; 
    border: none;
    margin: 10px 0;          
}


.copyright{
 color:grey;
  font-size: smaller;
}


/* status box*/
#statusbox {
    height: 140px;
    width: 600px;
    margin: 0 auto 0 0; /* Top, Right (auto), Bottom, Left (0) */
    padding: 5px; 
    border: 2px solid #d6d4b2;
    box-sizing: border-box; 
	  overflow-y: scroll; 
    scrollbar-width: thin; 
    scrollbar-color: #d6d4b2 rgb(65, 65, 65);
}

@media screen and (max-width: 600px) {
#statusbox {
    height: 140px;
    width: 400px;
}

}


/*stat counter */
.counter-wrapper {
  display: flex;          
  justify-content: center; 
  align-items: center;    
  gap: 2px;              
  padding: 10px;
  background: transparent; 
}

.digit-img {
  height:80px;           
  width: auto;            
  display: block;
  /*image-rendering: pixelated; */
}


.bigpic{
  max-width: 600px;
}

@media screen and (max-width: 600px) {
.bigpic{
  max-width: 400px;
}
}

.tutpage{
padding-left: 20px;
}


/*services*/

.services{

  background-color: rgb(244, 233, 212);
  color:black;
  a:visited,a{
    color:blue;
  }
  a:hover{
    color:aqua;
  }

  .navbar{
    background-color: rgb(244, 233, 212);
  }
}

.copyright{
  color: rgb(244, 233, 212);}



  .rainbow {
  /* Fallback color */
  color: red; 
  
  /* The animation: name, duration, timing-function, iteration-count */
  animation: rainbow-cycle 3s linear infinite;
  
  /* Optional: makes the text bold to show off the colors better */
  font-weight: bold;
}

@keyframes rainbow-cycle {
  from {
    color: hsl(0, 100%, 50%);
  }
  25% {
    color: hsl(90, 100%, 50%);
  }
  50% {
    color: hsl(180, 100%, 50%);
  }
  75% {
    color: hsl(270, 100%, 50%);
  }
  to {
    color: hsl(360, 100%, 50%);
  }
}


a img:hover{
  cursor: url('../img/star.png'), pointer;
}


/* cutie stat counter */

.digit-text {
  color:white;
}

.stat-container{
	display: inline;
}


.garden{

  .navbar{
  background-color: rgb(146, 215, 139);
  };

  background-color: rgb(146, 215, 139);

  img{
    max-width: 500px;
    display: block;
  }
}

.glenside{
  img:hover{
    opacity: 0.3;
  }
  font-size: x-large;
  background-color: red;
  img{max-width: 1200px;}
  @media screen and (max-width: 600px) {

    img{
      max-width: 500px;
    }
  }
}


.childhood{
  background-image: url('../img/orgasm/firstlove.jpg');
 color:rgb(81, 81, 255);
  background-color: yellow;
}

.enter{
background-color: rgb(193, 193, 193);
color:rgb(0, 0, 0);
text-align: center;
margin: auto;
padding-top: 20px;

 a:visited {
  color: rgb(72, 38, 238);
}
}


img{
  max-width: 600px;
}

.centre{
text-align: center;
margin: auto;

.sofia{
text-align: center;
margin: auto;
background-color: rgb(215, 215, 215);
color:rgb(64, 64, 48);
font-size: x-large;

img{
  max-width: 500px;
}
}
}




.heaven,.truth{
text-align: center;
margin: auto;
background-color: white;
color:black;


}



.repent{

text-align: center;
margin: auto;
 background-color: rgb(0, 0, 0);
 a:hover{color:rgb(179, 0, 255)!important;}
 a{
  color:greenyellow;
 }
 color:green;
}



.censor{
text-align: center;
margin: auto;
background-color: black;
color:red;
a{
  color:chartreuse;
}
}

.bigtime{
font-size: xx-large;
  padding:20px
}


.mytruth{
  padding:300px
}

.hell{
 background-image: url('../img/hell/imthedevilitortureyouall.png');
 color:red;
 font-size: xx-large;
}

.forces{
  text-align: center;
  margin: auto;
  background-color:white;
}





@charset "utf-8";
.icons{
	width:50px;
}

body {

    background-attachment: fixed;
	background-size: contain;
	background-color: #000000;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace", sans-serif;
    color: rgb(255, 255, 255);
	padding: 15px;
	text-align: center;
	ol,ul{
		display: inline-block;
	}
}


.spacetime {
    width: 100%;             
    height: 32px;          
    background-image: url("../img/assets/transcend.gif");
    background-repeat: repeat-x;/
    background-position: center;
    image-rendering: pixelated; 
    border: none;
    margin: 10px 0;          
}


div.art, footer {
    margin: 10px;
}

/**********************************************************/
.tiny{
	max-width: 50px;
}

.logo{
	max-width: 200px;
}

.about{
	background-color:white;
}

.banner{
	max-width: 600px;
}

.banner:hover{
	opacity: 0.5;
}

.archive{
	background-image: url('../img/assets/');
}


h3{
	color: #786401;
}

h4 {
	font-size: 15px;
}


a.footer a {
	color: black;
	text-decoration: bold;
}

a,
footer,
a:visited {
				color: rgb(255, 0, 225);
}

a:hover{
	color:aqua;
}

@-webkit-keyframes pastelmagic {
	0% {
		color: rgb(255, 167, 167);
	}

	25% {
		color: rgb(162, 255, 199);
	}

	50% {
		color: rgb(192, 176, 255);
	}

	100% {
		color: rgb(255, 0, 0);
	}
}



.thumbs img:hover {
	opacity: 0.6;
	color: #7f0000;;
}


/* Shrink thumbnail size if the screen size is 600px wide or less */
@media screen and (max-width: 600px) {


	.banner{
	max-width: 450px;
}


	/* comic shit first*/
	.comic_icons {
    width: 120px;
}

	body {
		font-size: smaller;
		padding: 2px;

	}
	.thumbs img {
		width: 30px;
		height: auto;
	}

	.full img.tall {
		width: 100%;
		height: auto;

	}

	.comic img {
		width: 100%;

	}
}


#copyright{
	color:#8e8b7b;
}

.wandering{
	hr{
	border: none;               
    border-top: 1px dashed #e7e7e7; 
    height: 0;                  
    width: 100%;               
    margin: 20px 0;
	}
	
	text-align: center;
	background-color: rgb(0, 0, 0);
	
	h1,p{
	color:rgb(255, 255, 255);
}
}


	.current{
		color:rgb(34, 44, 33)!important;
		pointer-events: none;
	}


/* CSS GOES HERE for Wandering******************* */
.comic{
	display:block;
	margin: auto;
	width: 100%;
	max-width: 600px;
}

.comic img{
	display:block;
	margin: auto;
	max-width: 600px;
}


.searcherfiller{
	max-width: 900px;
	text-align: center;
	margin: auto;
	background-color: #000000;
}


/* ALL COMIC CSS  GOES HERE for Wandering******************* */
.searchy{
	display:block;
	margin: auto;
	width: 100%;
	max-width: 800px;
}

.searchy img{
	display:block;
	margin: auto;
	max-width: 800px;
}


a:hover{
	color:aqua;
}


.url {
	font-size: smaller;
	color:rgb(71, 102, 103);
}


/* changelog */
#statusbox {
    height: 140px;
    width: 600px;
    margin: 0 auto;
    padding: 10px; 
    border: 2px solid rgb(0, 148, 27); 
    box-sizing: border-box; 
	overflow-y: scroll; 
    scrollbar-width: thin; 
    scrollbar-color: rgb(81, 255, 0) rgb(90, 0, 15);
	ul{
list-style-position: inside;
list-style: none;
}
}

@media screen and (max-width: 600px) {
#statusbox {
    height: 140px;
    width: 400px;
}
}


/* cutie stat counter */

.digit-text {
  color:white;
}

.stat-container{
	display: inline;
}


/* This targets the ID we used in the JavaScript */
#random-image {
  opacity: 1; /* Fully visible by default */
  transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
  cursor: pointer; /* Optional: shows it's interactive */
}

/* This triggers when the mouse is over the image */
#random-image:hover {
  opacity: 0.3; /* Becomes 70% visible (slightly translucent) */
}


/* This targets the ID we used in the JavaScript */
#logofade {
  opacity: 1; /* Fully visible by default */
  transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
  cursor: pointer; /* Optional: shows it's interactive */
}

/* This triggers when the mouse is over the image */
#logofade:hover {
  opacity: 0.3; /* Becomes 70% visible (slightly translucent) */
}

.wrongsippe img{
max-width: 400px;
}

.casryu{
  background-color: #d6d4b2;;
  color:#000000;
}
.heaven{

  background-image: url('../heaven/fields20211215_120901._smallpng.png');
}