/* When fiddling to move things around yourself, remember the following:

MARGIN is the space between the edges of the element and the things OUTSIDE it (so, gutter)
PADDING is the space between the edges of the element and the things INSIDE it. (like bubble wrap in a cardboard box)
If you give one value, it's applied to all four directions.
If you give two values, the first one applies to the top and bottom, and the second applies to the left and right.
If you give three values, the first one is for the top, the second one is for left and right, and the third one is for bottom.
If you give four values, the order is top-right-bottom-left. 

margin: [any value] auto; will horizontally center elements. Sometimes you have to add display: block; to make the margin value actually have an effect.

Height and width values in percent will use the size of the element that the item is inside of as the value for 100%.
For example, if my page is 2000px wide and I have a section inside it that has width set to 80%, that section will be 80% of 2000px.
If that section has another element inside it that has width set to 25%, it will be 25% of 80% of 2000px wide.

In CSS, you select a html tag by just typing the tag, you select a class by putting a dot in front of the class name, and you select an id by putting a hashtag in front of the class name.
a {some bullshit} will apply that bullshit to every link on the page.
.gallery {some bullshit} will apply that bullshit to every element that was given the "gallery" class.
#illustrations {some bullshit} will apply that bullshit to the box that has the "illustrations" id, of which there can be only one.

Multiple selectors separated by commas will have the style apply to all elements that have one of those identifiers.
.class-1, .class-2 {} makes the same stuff apply to both class-1 and class-2. You can then proceed to specify other things they don't have in common for either class. This lets you reduce the amount of times you have to repeat yourself.

You can also select more specific elements by listing selectors in order with spaces between them.
.gallery a {bullshit} will apply this bullshit to links that are somewhere inside elements with the gallery class.
#illustrations .gallery a {bullshit} will apply to links that are inside boxes with the gallery class that are inside the box with the illustrations id.

There's more but you can read up on that here: https://www.w3schools.com/cssref/css_ref_combinators.php

Attributes assigned to more specific selectors will take priority over attributes given to more general selectors.
*/

/* ###########################    PAGE-WIDE STYLING     ############################ */
/* I'm putting a wide line between groups of related code so they're easier to distinguish when scrolling through the file */

/*  CSS lets you set variables so you can quickly change values that are used in multiple things. You can refer to these variables with var(--variable-name). As far as I know the variable doesn't Have to start with --, that's just the standard to show that it's a CSS variable.*/
:root{
	--border-image-width: 111px;
	--header-image-width: 500px;
	--header-image-width-tablet: 350px;
	
	--gallery-image-height: 600px;
	--gallery-image-width: 400px;
	--gallery-button-width: 40px;
	
	/* This is a padding value applied left and right, so the actual distance between gallery images will be twice this value */
	--gallery-image-spacing: 10px;
	
	--popover-text-width: 350px;
}

/* This loads in your custom font 
@font-face {
  font-family: CubesFont;  /* set name 
  src: url(/cubes_font.woff);  /* url of the font 
}*/

/* This makes borders be included in an element's size when calculating, which makes spacing them easier */
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}

/* What you declare here for body is essentially the default, and you can specify something else for more specific elements later */
body {
	background-color: white;
	color: #173949; 									/* In CSS, color is for text color and colors for other things have to be called [that thing]-color */
	font-family: /*CubesFont,*/ Verdana, sans-serif; 	/* You can give a list of fonts to try in order if the browser can't load the desired font for some reason. Here we say to load the custom font, then Verdana if that doesn't work, and then to just get any sans-serif font if that also doesn't work. */
	margin: 0; 											/* This removes the whitespace that browsers tend to put around websites by default */
}

/* makes sure images by default don't stretch beyond the thing they're placed inside of */
img {
	max-width: 100%;
}

a {
	color: inherit; 	/* Inherit means the item will take on the value that was defined for whatever element they're placed in */
}

#wrapper{
	/* CSS can do basic math with the calc() function, and you can call variables in that math. Here we say the wrapper has to be as wide as the browser window, minus the width of the border image on both sides. */
	width: calc(100% - ( 2 * var(--border-image-width)) );
	margin: 0px auto; 									/* center the wrapper */
	background-color: rgba(236,249,250,1);

	border-image-source: url('/assets/border.webp');	/* the location of the border image */
	border-image-width: auto;							
	border-image-slice: 0 222 0 222;					/* slice determines what part of the image is used for the border on each side. here we say there are no top and bottom borders, and the left and right borders are just the full width of the image*/
	border-image-repeat: repeat;						/* the border image is repeated along the length of the container*/
	border-image-outset: 111px;							/* the border image normally goes exactly inside the container. this specifies how far outside the container to move it, in this case exactly half the full image width */
}

/* ###########################    HEADER STYLING   ############################ */

header {
	border: 8px double #325e64; 					/*The border attribute is actually short for border-width, border-style, and border-color. Because of that, it only works if you specify all three of those in that order. */
	background-color: rgba(249,255,252,1);		
	padding: 1em;
	padding-right: var(--header-image-width); 	/* this makes the text stay away from the header image */
	position: relative;							/* the header needs a position value that is not the default so that the stuff inside it can use the position of the header as a reference */
	min-height: 280px;							/* make the header always at least this tall, this makes sure the header image gets to display with at least a certain size */
}

#headerimg {
	max-height: 110%; 			/* make the image a maximum of 10% taller than the size of its parent element, in this case the header */
	max-width: var(--header-image-width); /* cap the maximum width for when screens get slim enough that the header text starts wrapping around */
	position: absolute; 		/* makes it sit in the spot you specify while ignoring anything else that might already be there, using the closest parent element with a non-default position attribute as reference. */
	right: 2%;					/* top-right-bottom-left attributes specify the distance from that respective edge of the reference element */ 
	bottom: -10%; 				/* a negative value will make it move outside the edge of the reference element */

}

/* em values are relative to font size and allow text to scale well for users that have custom font size settings */
header h1{
	font-size: 3em;
}

header p{
	margin: 1em 0.3em 2em;
}

nav {
	font-size: 1.5em;
	margin: 0.5em 0;
}

nav a{
	padding: 0.2em 0.3em;	 /* puts extra space around the link text that will also get the hover color */
	text-decoration: none;	 /* Removes the default underline for links */
}

/* This bit takes effect when someone hovers over a link inside nav or selects it with tab targeting*/
nav a:hover, nav a:focus{
	background-color: #97e1a7;	
	transition: 0.5s ease;
}

/* ###########################    CONTENT STYLING     ############################ */

main {	
	padding: 0 3px; /* put space at the sides to account for the stem of the border image */
}

/*  put a translucent background on the text so it stays readable over the border image.*/
main p{
	background-color: rgba(236,249,250,0.9);
	padding: 1.2em 1.5em 0.8em; 	/* padding instead of margin so that the background covers it */
	margin: 0;
}

h2{	
	background-color: rgba(236,249,250,0.9);
	font-size: 1.8em;
	padding: 0.5em 0.8em 0; 	/* don't add padding on the bottom of the h elements because there's already padding on the p elements and padding doesn't overlap like margins do */
	margin: 0;
}

/* put extra padding above the first p element to make space for the header image 
h2:first-of-type{
	padding-top: calc(0.4em + 50px);
}*/

/* style the socials images */
.socials {
	width:42px;
	height:42px;
	margin: 0 0.5em;
}

/* ###########################    GALLERY STYLING   ############################ */

.gallery-container {
	position: relative; 		/* this allows elements of the gallery to be positioned using the position of the container as reference */
	background-color: #DCECEB;
	padding: 15px 5px; 			/* padding will also substract from the percent width of child elements, so in practice this also puts some space between the buttons and the images */
	margin: 0 auto;
}

.button-wrapper {
	max-width: calc(100% - 2 * var(--gallery-button-width));	/* fullwidth minus space for the buttons. */
	margin: 0 auto; 											/* center it */
	overflow: hidden; 											/* hide things that go beyond the set width */
}

.gallery{
	display: flex; 						/* this makes the images line up horizontally */
	transition: transform 0.5s ease; 	/* set an animaton for whenever the gallery is moved */
}

.gallery-item{
	flex: 0 0 auto; 		/* do not change the size of the gallery items to put them next to each other */
	height: var(--gallery-image-height);
	width: var(--gallery-image-width);
	padding: 0 var(--gallery-image-spacing);	/* set the space between images. 
	This needs to be padding and not margin because stupid javascript is failing to grab css attributes directly even though it should be able to do that but I can still use .offsetWidth to grab the element width including borders and padding */
}


/* this applies to all image items that are somewhere inside a .gallery-item element, even if there's other boxes in between */
.gallery-item img{
	height: 100%; 			/* make images cover the entire rectangle */
	width: 100%;
	object-fit: cover;		/* crop the images to preserve the aspect ratio */
	cursor: pointer;		/* change the cursor when it's over this element to make it look clickable */
}

/* we put an extra box around the variant images so that they will still respect the padding between gallery items after we set their position to absolute */
/* we specify that we mean a .gallery-box inside a .gallery each time so that these things don't apply to the popover*/
.gallery .gallery-box{
	position: relative; 	/* setting this as relative means the images in the gallery-box element will use this element as reference for positioning, because it is the nearest parent with a position attribute set. */
	height: 100%; 			/* make the box as big as the .gallery-item element */
	width: 100%;
}

.gallery .gallery-box img{
	position: absolute; 	/* this makes the images in the box stop politely avoiding each other and just sit exactly on top of each other instead */
}

.gallery .gallery-box .hover{
	opacity: 0;				/* set the hover variant to be invisible by default */
	transition: 0.5s ease;	/* set an animation for when it changes */
}

.gallery .gallery-box .hidden{
	display: none;			/* set images that should only show up once in the lightbox to be completely hidden by default */
}

.gallery .gallery-box:hover .hover, .gallery .gallery-box:focus .hover{
	opacity: 1;				/* set the hover variant to become visible when the box is hovered over or selected */
}

button {
  position: absolute; 			/* 'absolute' uses the first parent element with a non-default position as reference, so the buttons use the position of the gallery-container element two layers up as reference, and not the button-wrapper element that they're directly inside of. That means although it's called the button-wrapper, we're actually putting the buttons outside of it lol */
  top: 50%; 					/* put the top edge of them halfway from the top */
  transform: translateY(-50%); 	/* then shift them half their own size upwards so that they're actually in the middle */
  width: var(--gallery-button-width);
  height: 70%;
  color: white;
  background-color: rgba(90,137,140,0.7);
  font-weight: bold;
  font-size: 40px;
  border: none;
  border-radius: 10px;			/* rounds the edges */
  cursor: pointer;  			/* change the cursor shape when it's over the buttons */
  user-select: none; 			/* these make sure users can't accidentally select the buttons like text */
  -webkit-user-select: none;
  transition: 0.15s ease;		/* set the animation */
}

button:hover, button:focus{
	background-color: rgba(90,127,140,1); /* make the button color deeper when hovered over */
}

/* Position the buttons to the sides of the gallery */
.next {	right: 0px; }
.prev {	left: 0px; }


/* ###########################    POPOVER STYLING     ############################ */

/* turn off interactions with the rest of the site while the lightbox is open so you can't accidentally click something else*/
#wrapper:has(* #lightbox:popover-open){
	pointer-events: none; 
}

#lightbox{
	pointer-events: auto; 		/* make sure you can still click stuff inside the lightbox */
	position: fixed; 			/* do not move the lightbox with the browser window */
	z-index: 1; 				/* place the lightbox on top of other elements */
	width: 95%; 
	height: 100%; 
	padding: 0;
	background-color: white;
	border: 8px double #325e64;
	
	overflow: auto; 				/* enable scroll if needed */
	overscroll-behavior: contain; 	/* prevent the page behind the lightbox from scrolling too */
}

#lightbox p{
	background: none; 	/* don't apply the colored text background from the main page inside the lightbox */
	padding: initial;	/* don't apply the corresponding padding in the lightbox either */
}

#lightbox img{
	max-width: calc(100% - var(--popover-text-width)); /* make sure there's room for the text next to the images */
	float: left; 			/* this makes the images scoot over to the left and allow other elements to wrap around them */
	margin-right: 1em; 		/* leave some space between the image and text */
}

/* put some space below each image in the lightbox, excluding the last one so that there's no dead space at the bottom of the lightbox*/
#lightbox img:not(:last-of-type){
	margin-bottom: 0.5em;
}

#lightbox .comments{
	display: block;			/* make the comments visible */
	margin: 55px 1.5em 1em; /* make sure the text is below the close button and leave some space on the right */
}

/* style the lightbox close button different from the gallery buttons */
#lightbox button{
	position: sticky; 	/* make sure it's always on screen even if you scroll down the lightbox */
	transform: none; 	/* this has to be specified because the gallery buttons do have a transform on them */
	top: 0px;
	float: right;
	width: 50px;
	height: 50px;
	border-radius: 2px;
}

/* just making double sure the comment text only displays when it's inside the lightbox even though it's stored next to the images in the gallery so that there's no chance of it randomly messing things up */
.comments{
	display: none;
}

/* ###########################    RESPONSIVENESS     ############################ */

/* these changes apply on both tablets and phones */
@media screen and (max-width: 1080px){
	
	/* make the border image take up less space */
	#wrapper{
		width: calc(100% - 111px);
		border-image-width: 111px;
		border-image-outset: 111px 55px;
	}	
		
	/* adjust the padding to match the smaller border image*/
	main{
		padding: 0 2px; 
	}
		
	/* make the popover full width */
	#lightbox{
		width: 100%;
	}
	
	/* make the header image go below the text without overflow bc idk how to make that happen nicely at this scale */
	#headerimg{
		position: relative;
		bottom: 0;
		right: 0;
		max-width: 80%; /* Limit the size of the header image at this scale so the total header doesn't become massive */
		float: none;
	}
	
	/* reset the extra padding on the right side of the header and align things center */
	header{
		padding: 0 1em 0;
		text-align: center;
	}
	
	/* make the header more condensed */

	header h1{
		margin: 0.5em;
	}
	
	header p{
		margin: 1em;
	}
}


/* these are additional changes that apply on phones only */
@media screen and (max-width: 720px){

	/* remove the image border entirely */
	#wrapper{
		width: 100%;
		border-image: none;
	}
	
	/* the screen is now so thin that the header image can take up the full width without stretching the length */
	#headerimg{
		max-width: 100%;
	}
	
	/* remove padding but leave a little room at the bottom of the page */
	main{
		padding: 0 0 0.8em;
	}
	
	/* restore the text padding to default and put a regular margin back now that we're not messing with text backgrounds or overlapping headers anymore */
	main p, h2, h2:first-of-type{
		background-color: initial;
		padding: initial;
		margin: 0.8em;
	}
	
	/* aligning the headings center looks better on tiny screens imo */
	h2{
		text-align: center;
	}

	/* make images take up the full popover */
	#lightbox img{
		max-width: 100%;
		float: none;
		margin: 0;
		padding: 0;
	}
	
	/* adjust margins for the comments accordingly*/
	#lightbox .comments{
		margin: 0.8em 1em 1em;
	}
	
	/* make the image previews smaller */
	.gallery-item{
		width: 300px;
		height: 450px;
	}

}

/* ###################### ID-SPECIFIC GALLERY STYLING ###################### 

/* You need to manually add more of these each time you have a gallery that needs custom dimensions. */
/* FOR REFERENCE: the default width and height are listed all the way at the top of the file. At time of writing, that's 600px tall and 400px wide. */

/* makes the images in these galleries uncropped */
#proverbs .gallery-item img, #caspurr .gallery-item img {
	object-fit: scale-down;
}

/* makes the proverbs images wide instead */
#proverbs .gallery-item{
	height: 200px;
	width: 500px;
}

/* makes the caspurr images less tall */
#caspurr .gallery-item{
	height: 450px;
}

/* You'll probably need to specify different custom sizes for on phones */
@media screen and (max-width: 720px){
	
	/* make proverbs images smaller on phones */
	#proverbs .gallery-item{
		width: 320px;
	}	
	
	#caspurr .gallery-item{
		height: 300px;
	}
}