@import url('https://fonts.cdnfonts.com/css/copperplate-gothic-std');

:root {
	--text: #B2C28C;
	--line: #96A36C;
	--accent: #593E3F;
	--bg: black;
	--fill: #1C1717;
}

/* Custom Cursor */
@keyframes rwdcur114634 {
0%,16.566666666667%,100% {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABx0lEQVRYhcWX3ZWCMBBGbyhJaGLfYhPYhQ+cbUKqsBBjIdtE9sEMxJhf4OzOOTlGCPNdZz4CMk2TBZZhx9egImrX5aJ7Pp9M07QcUHNd8iPEATqAFgi/QmpG7QVQgNVaA3A6nbher75Y/uICgB2xpTVyshkil9ivXAmgE5H7/Q4k2tF7oxAt4rBWQMpFshI3NzFBgohITekluuDCdCUublJRhRZzduGBKohIPMA+aL81FwCfOoSw42pGdaGqCrURLdViJBEyC6S/Zk3i4KUCQyJvLD5aIAnVjMKs4ucfHd2s3oAjUWpNFCAEEbHUjikQ8stbvJAF8JLn94lMSBdTUFUAaka1QoigApWDqAKQqIFoMWATgPghB8GefaAFBFBbIcI2FAEyt1EOwqfJAlVXIAEShfjWmp646UKPVBumkGx5nwD4clD+E9x8XtMGkAMRMYAZGIN5Shw2mHAAFUtkgrlx4oV9av9LpR9SHcNakd5BXI7QEiPGnG3dcRk3t1bW79qKwzARwfB8z9oW+R6D2FSW2qfdAOoG1m+H4d2Mm/uSgwhNmoM4xIQ1b0I+hL/20LugFD7E8Pr4U/0ltNZW/pX/D4GDAPgFL6IidzqgXNwAAAAASUVORK5CYII=) 0 0, auto;}
16.666666666667%,33.233333333333% {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABxElEQVRYhcWX0XHDIAyGP3KdKPYSfSNLOFvkwdcl4ikySJxBsgR9MEowBSx8tNUdF8cR0mfpBxzGcXRAOFTmBr1vyQ6Px4NxHFex3bCMXOJWyQGMtdYBHI9HLpdLmGhxmDA1AQVOO+9wu90AiCthpnVArUli7TyhdNZaIF+JVJKSuQGn8Qsd1BC1bSnZIYxbbEfnR2MLAXADZCHOK79mK2EFYCZMCYI5H+gO7l6xjyQBxFIQ7lobWmdJMf0or/TeV8BMa2GKKKUCfSZuyj6SVGuVuyhZEiJnW1DJFsQ8ZoLT03J62uJmJUlqtKABKK+OqTxXupeDUvfK72zkNisSTy8VceDm6J6YqgKgWKI7BFgFUAPxawAtIGItbAKkdji/TLNnR0RTBFJXILPVJiG+rKUjrfxYI2rBbAR7HeUAnx4qPEBzq6D6XM+tZ0k0AUN0nUsOO0TYg0kFmqPr2Sff2KfavdnAuzoz74p0HuLcIpcIMaVs5+/LuHpf8c+1rroFsDxhnDD+vePdFvmegthVFu1p14O5ggvbMbMW4+6+lCBikZYgmohQ8yYUQoS+TVfBloUQ/fLxp/lfZq118q/8fwg8BMA3+aoXnQN/AwUAAAAASUVORK5CYII=) 0 0, auto;}
33.333333333333%,49.9% {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABwUlEQVRYhcWW0XGDMAyGP2eOThGyRN88RTJFeaBdAqbIIHGm6B7uQy0wYGQTfK3ufIZESN/9kgx0XeeBeB0yf90X4/R8Pum6bhajdhIVACAF4a+/a29AM2B2Adzvd1IQZggkCwi5r6XCCTClEDWlH3NIYDOAtRaA8/lM27ajk78mHtwptQpQBNGHC7cGEWUOQ4VA3lrrrbV+OaK+nxoz3o+U5pSAYLMnbjPQmT3AP144RzTJfFyOj+9WcQUXGvaix1zZSoEYLlbi863DDIwLgGZylsR7VdAAVhCpERXb6oNcaXIAOsSNwyqUAOQhFBO+LahSAH06hrW/JDRgNIhigFKImlMwMznlNAgqnwM581vH9iPsooYHH5/gsUpZBZQx2mzMGWVGleISbIAkIb6spSHddMseKS5BJthYDoD3ANUwjaFbP7MPQAORZAADcF1cbyWHnWMoQVKB3OLaheSJI2JmVb5qxEQdx6RIEyBuNXJJI6Y624ffZfXBV/wPH8WxuUTC5f8NU1nkPgXxkiylb7sLmB58XA7HvBlfrosGsWxSDaJKEwqM9iKKIWLfqlOQsxji8rv9af7R4k/+/yEIEAA/yl0nc+g90BEAAAAASUVORK5CYII=) 0 0, auto;}
50%,66.566666666667% {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABvUlEQVRYhcWX0ZHCIBRFD5Zk0sT+UUXswo/MNmGqsBCxJfYjEAHhATHjvhlHJIR7eNwXIvM8WyD8fDVOz+eTeZ7DPmunMoh0bRcAQAqhllWoJBb2fwp0ut/vlCAk4SPEYc2AkiC8yNGp3zSCttVaA3A+n7ler68Lk2sMgAG1rPfZCRu2o4mXaO5inEIRcTuG+EbJB63iEUAV4hLfqBZUTqhHHHgf7NJKbTvUggpXbpxpx8ycUpzSDrcC0ZgeFHjbmt54AwhZekp0cJl5dD5NJYA6RMPqH2AlqBqADJEY0+9/TxZaALqqIw2fpBJUs2Nr1UFm9T4jFqxJ+nw0ZQC2sitmAif8cRnWIBA8wY73iS6AkGUvROqFKoBQRhJESCMCNWegAJKF+NWagbzzU480G6Yy2XaUA/w4qIFXGZaqoMuxJRAvBrAAU9IuicMOE46gchOZpG2ceObYiKI7A1L47BheGRkcxOUILW/EnLOt6/efmxvrx5e2btdzwGQE0+vu9TH6nYPYlZbW024EdQMbbochNuPufZEgUpNKEIeY0MNIB1EIEY49tApqEUKM69dX9bfQWlv/r/x/CBwEwB/RNCAs1LglOQAAAABJRU5ErkJggg==) 0 0, auto;}
66.666666666667%,83.233333333333% {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABpklEQVRYhcWW3ZGDIBRGDykp2sS+UYXpIg/ONhGrsJAlLbEPQkQCF0Q3ywwDQb3fyeXjh3EcLRDWj5bL8/lkHMdwrArCDst7vm0GAEhB5ALbIf+spSjAaq0BuF6v3O/3UAw1oULx14fB+FEAShBvH50kHgLIEA/XMTJAPDU1oJv0qglECJMO2iLsyyUKxDzPwLsx1a0u4KHpCRxutdZWa23jfSK1AuyA/WGpezUl2qIx1YTyQGZaxno55i6AMkTHxhc+A3sgLoXnKuuJqU6gNDUlABkiMqb/53u8UAMgQxQy0bk2B1ULIC5REsG9oAIlQVQDOKNlM0GDAXcBhCx7MvEXAIcg4mkoAgjLSIIIaUSg6gxkQJIQ31rTkTZd7JFqwxSCvXZMgC8H1bEuQ3MUQALxYgATMET9nDg0mLAHlQpkor5x4qUd+7SrFazZMawZ6RzE7Qwtb8SUs60b9/XBekewwoHUtA+YhGD83J3Um98piKa01J52PagH2HA6DFszNs+LBBGbVII4xYQ1N6EQInz31FVQKiFEvzQf1X+V8Lb9PwQOAuAXBWQaEhzKRv0AAAAASUVORK5CYII=) 0 0, auto;}
83.333333333333%,99.9% {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABuElEQVRYhcWX0ZWDIBBFL5YUbWL/qMJ0kQ/PNhGrSCEhLbEfApJZQFQ2O+dwokiY65sHIUzTZIHQ7Lg0PhRKa20vlwu32y102tE9nFHyCym41Lja6ABerxfTNMUT/kqWU+ZMcgAFWK01ADklQvSAaZPYR2dHeDweQF4JetfW/ibJYVEAO2LVDFkl7u5CvL0vibz/laQALCcqQ5jy5BKgRqkuvimW48pahp5k+IRqRtWWKUm/pxw+4XPZRxjY54+ggJCyrAQEFc4a8q0EuyFYlfNv7pWojRr6qn0iV4at0nSpTgm5uU+4OKJCDcAuCBl+weSg9hooWw4Sb+8VsWCN6PNRq0BIklOCs8uwJcRfA5yCkF7YBHiCzRioBBHTFIGqFciAJCG+taYn7XzpkWrDbEwWVgfAl4OKjxG5VbB7H8+tZ59oBkZxnUsOB0w4gEpNZMS1cck39ql2RytY1TG8Hx1m4NoilzdiytnW9ft2d2P9+FzpDu0DJpFQPo8O0OE+BXFIltpfuwHUHWxcDsO7GQ/XpQQhTVqCaGLCmvNgDBGPbboKtiKGGJaPj+YPobW2/l/5/xA4CIAfbHgYst2dt28AAAAASUVORK5CYII=) 0 0, auto;}
}


body { 
	color: var(--text);
	font-family: 'Courier New', monospace;
	animation:rwdcur114634 0.6s linear infinite forwards; /* Custom Cursor */
}

* { 
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-color: var(--text) var(--line) }

*::-webkit-scrollbar { width: 20px; }
*::-webkit-scrollbar-track { background: var(--line); }
*::-webkit-scrollbar-thumb { background-color: var(--text); border: transparent; }

img { max-width: 100% }

nav {
	float: left;
	width: 15%;
	height: 100vh;
	position: relative;
	background-color: var(--bg);
}

nav div {
	height: fit-content;
	width: fit-content;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: -1.5vw;
	text-align: right;
}

nav a {
	display: block;
	margin: 10px 0;
	padding: 0;
	font-size: 1.5em;
	font-family: Copperplate Gothic;
	text-decoration: none;
	color:#DDEDB9;
	filter: drop-shadow(1px 1px 0 var(--accent)) 
			drop-shadow(-1px 1px 0 var(--accent)) 
			drop-shadow(0 -1px 0 var(--accent)) 
			drop-shadow(1px 0 var(--accent));
}

nav a:hover, nav a:focus {
	color: var(--accent);
}

main {
	float:left;
	width: 82%;
	height: 100vh;
	padding: 2em;
	overflow-y: scroll;
	background-image: url(img/bg3.png);
}

.container { max-width: 1500px }

section {
	margin: 2em 0;
	padding: 1em 2em;
	background-color: var(--fill);
	border: 2px solid var(--line);
}

.stripe {
	float: left;
	width: 3%;
	height: 100vh;
	background-color: var(--line);
}

hr {
	border: none;
	border-top: 5px solid var(--line);
}

header {
	font-size: 2em;
	margin-bottom: 2rem;
	color: #DDEDB9;
	filter: drop-shadow(1px 1px 0 var(--accent))
			drop-shadow(-1px 1px 0 var(--accent))
			drop-shadow(0 -1px 0 var(--accent))
			drop-shadow(1px 0 var(--accent));
}

h2, h3, h4, h5, h6, p, table, details, cite, blockquote, img {
	margin: 1rem 0;
	font-family: Copperplate Gothic;
}

h1 {
	font-size: 3em;
	font-family: Copperplate Gothic;
}

ul, ol, dl {
	margin: 1rem 0 1rem 2rem;
}

ul ul, ol ol { 
	margin: 0 0 0 2rem;
}

p, table,  ul, ol, dl {
	font-size: 1rem;
	font-family: 'Courier New', monospace;
}

a { 
	color: var(--accent);
	padding: 2px;
}

p a:hover { 
	color: var(--fill);
	background-color: var(--accent);
}

h6 { font-size: 1em; }
h5 { font-size: 1.25em; }
h4 { font-size: 1.5em; }
h3 { font-size: 1.75em; }
h2 { font-size: 2em;
	text-align: center;
	background-color: var(--accent);
	border: 2px solid var(--line);
	padding: 5px;
	font-family: Copperplate Gothic;
}

blockquote {
	background-color: var(--accent);
	color: var(--fill);
	padding: 1em;
}

blockquote a, blockquote code {
	color: var(--text);
}

cite { 
	display: block;
	text-align: right;
}

code, details, pre {
	background-color: var(--bg);
}

code { 
	font-family: 'Courier New', monospace; 
	padding: 2px;
}

details, pre {
	padding: 1em;
}

pre { overflow-x: auto; }

details p { margin: 1rem 0 1rem 2rem; }

table {	border: 5px solid var(--line); }
tr, td, th { border: 2px solid var(--line); }
td, th { padding: 3px }

figcaption { 
	text-align: center;
	margin: -0.5em 1em 1em 1em;
}

footer { 
	font-size: 1em;
	text-align: center;
	background-color: var(--accent); 
	margin-top: 2em;
	padding: 5px;
}

footer a { color: var(--text); }

.divider {
	width: 100%;
	height: 40px;
	background: #2E252B;
	border: 1px solid #7D8071;
	margin: 20px 0;
	position: relative;
	display: flex;
    justify-content: left;
    align-items: center;
}
p-div {
	margin-left: 20px;
}

.flex-box {
    display:flex;
    flex-wrap:wrap;
    margin: -1em;
	align-items: flex-start;
}

.interactive-element {
	transition: transform 0.2s ease-out;
	/* Ensure smooth transitions for all properties */
	will-change: transform;
}

.interactive-element:hover {
	transform: scale(1.05);
}

.interactive-bookmark {
	transition: transform 0.2s ease-out;
	/* Ensure smooth transitions for all properties */
	will-change: transform;
}

.interactive-bookmark:hover {
	transform: translateY(10px);
}

.interactive-banner {
	transition: transform 0.2s ease-out;
	/* Ensure smooth transitions for all properties */
	will-change: transform;
}

.interactive-banner:hover {
	transform: translateX(-10px);
}

.flex-box section {
	margin: 1em;
	}

.full { flex: 1 1 100%;}
.half { flex: 1 1 calc(50% - 2em); }
.third { flex: 1 1 calc(33% - 2em); }
.twothird { flex: 1 1 calc(66% - 2em); }
.quarter { flex: 1 1 calc(25% - 2em); }
.threequarter { flex: 1 1 calc(75% - 2em); }

@media screen and (max-width: 800px){

	nav, main, .stripe {
		float: none;
		width: 100%;
		height: fit-content;
	}
	
	nav { padding: 2vw }
	
	nav div {
		height: fit-content;
		width: 100%;
		position: static;
		-ms-transform: translateY(0);
		transform: translateY(0);
		text-align: right;
	}
	
	nav img {
		z-index: -1;
		position: absolute;
		left:0;
		max-height: 100%;
	}
	
	nav a {
		display: inline-block;
		margin: 5px;
	}
	
	nav a::after { content: " ↗"; }
	
	main { 
		overflow: auto;
		padding: 2em 1em;
	}
	
	header { 
		text-align: center;
		font-size: 1.5em;
	}
	
	section { padding: 0 1em; }
	
	.stripe { height: 30px; }
	
	*::-webkit-scrollbar { width: 10px; }

}

/*lightbox*/
#lightbox {
	position: fixed;
	z-index: 1000;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
}

#lightbox.active {
	display: flex;
	justify-content: center;
	align-items: center;
}

#lightbox img {
	max-width: 90%;
	max-height: 80%;
	padding: 4px;
	background-color: black;
	border: 2px solid #969985;

}


	/*Gallery Grid*/

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
  gap: 1em;
  padding: 1em;
  width: 70%;
  margin: 0 auto;
  cursor: pointer;
  /*background: white;*/
}

.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}