.mediaViewInfo {
	--web-view-name:web;
	--web-view-id:web;
	--web-scale-to-fit:true;
	--web-scale-to-fit-type:width;
	--web-enable-scale-up:true;
	--web-scale-on-resize:true;
	--web-application:true;
	--web-enable-deep-linking:true;
	--web-page-font:Roboto Mono,Eczar-Bold
	}
	
	:root {
	--web-view-ids:web;
	--main-bg-color: #3d050cff;
    --text-color: #fff1c2ff;
    --font-family-main: 'Roboto Mono', 'Eczar-Bold';
	}
	
	* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	border:none
	}
	
	body {
        background-color: var(--main-bg-color);
		background-size:cover;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	margin: 0;
    	max-width: 100%;
    	font-family: var(--font-family-main);
		cursor: url('/../cursor/pointer.cur'), auto !important;
    }

	.text-hover {
		cursor: url('/../cursor/text.cur'), text !important; /* Custom cursor for text */
	}

	.clickable-hover {
		cursor: url('/../cursor/link.cur'), pointer !important; /* Custom cursor for clickable items */
	}

	img {
        max-width: 100%; /* Ensure images don't exceed the viewport */
		height: auto;
    }

	
	
	#web {
	/* position:absolute; */
	display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align items */
    justify-content: flex-start; /* Align to the top */
	width:100%;
	height:5912px;
	font-family:Roboto Mono,Eczar-Bold;
	background-color:#3d050cff;
	overflow:hidden;
	--web-view-name:web;
	--web-view-id:web;
	--web-scale-to-fit:true;
	--web-scale-to-fit-type:width;
	--web-enable-scale-up:true;
	--web-scale-on-resize:true;
	--web-application:true;
	--web-enable-deep-linking:true;
	--web-page-font:Roboto Mono,Eczar-Bold
	}
	
	#spoopibg {
	opacity:.3;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center;
	user-select: none;
	}
	
	#contact {
	position:relative;
	width:1619px;
	height:922.667px;
	left:231px;
	top:4824.333px;
	}
	
	#form {
	position:relative;
	width:850px;
	height:721px;
	left:769px;
	top:154.667px;
	}
	
	#button {
	position:relative;
	width:198px;
	height:71px;
	left:0;
	top:650px;
	}
	
	#Rectangle {
	fill:transparent;
	stroke:#fff1c2ff;
	stroke-width:4px;
	stroke-linejoin:miter;
	stroke-linecap:butt;
	stroke-miterlimit:10;
	shape-rendering:auto
	}
	
	.Rectangle {
	position:relative;
	width:198px;
	height:71px;
	left:0;
	top:0
	}
	
	#SEND {
	left:62px;
	top:17px;
	position:absolute;
	width:75px;
	white-space:nowrap;
	text-align:center;
	font-family:Poppins-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:23px;
	color:#fff1c2ff;
	letter-spacing:2.5px;
	text-transform:uppercase
	}
	
	#message {
	position:absolute;
	width:850px;
	height:199px;
	left:0;
	top:415px;
	}
	
	#Rectangle_o {
	fill:#fff1c2ff;
	stroke:#fff1c2ff;
	stroke-width:1px;
	stroke-linejoin:miter;
	stroke-linecap:butt;
	stroke-miterlimit:4;
	shape-rendering:auto
	}
	
	.Rectangle_o {
	position:absolute;
	width:851px;
	height:2px;
	left:0;
	top:198px
	}
	
	#Your_Message {
	opacity:.638;
	left:0;
	top:59px;
	position:absolute;
	width:160px;
	white-space:nowrap;
	text-align:left;
	font-family:Karla-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:26px;
	color:#fff1c2ff
	}
	
	#MESSAGE_q {
	left:0;
	top:0;
	position:absolute;
	width:109px;
	white-space:nowrap;
	text-align:left;
	font-family:Poppins-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:17px;
	color:#fff1c2ff;
	letter-spacing:3.0769232177734px
	}
	
	#email {
	position:absolute;
	width:850px;
	height:134px;
	left:0;
	top:194px;
	}
	
	#Rectangle_s {
	fill:#fff1c2ff;
	stroke:#fff1c2ff;
	stroke-width:1px;
	stroke-linejoin:miter;
	stroke-linecap:butt;
	stroke-miterlimit:4;
	shape-rendering:auto
	}
	
	.Rectangle_s {
	position:absolute;
	width:851px;
	height:2px;
	left:0;
	top:133px
	}
	
	#Your_Email {
	opacity:.638;
	left:0;
	top:62px;
	position:absolute;
	width:116px;
	white-space:nowrap;
	text-align:left;
	font-family:Karla-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:25px;
	color:#fff1c2ff
	}
	
	#EMAIL_u {
	left:0;
	top:0;
	position:absolute;
	width:68px;
	white-space:nowrap;
	text-align:left;
	font-family:Poppins-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:17px;
	color:#fff1c2ff;
	letter-spacing:3.0769232177734px
	}
	
	#name {
	position:absolute;
	width:850px;
	height:120.402px;
	left:0;
	top:0;
	}
	
	#Rectangle_w {
	fill:#fff1c2ff;
	stroke:#fff1c2ff;
	stroke-width:1px;
	stroke-linejoin:miter;
	stroke-linecap:butt;
	stroke-miterlimit:4;
	shape-rendering:auto
	}
	
	.Rectangle_w {
	position:absolute;
	width:851px;
	height:2.229px;
	left:0;
	top:119.174px;
	transform:matrix(1,0,0,1,0,0)
	}
	
	#Your_Name {
	opacity:.638;
	left:0;
	top:47px;
	position:absolute;
	width:89px;
	white-space:nowrap;
	text-align:left;
	font-family:Karla-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:27px;
	color:#fff1c2ff
	}
	
	#NAME_y {
	left:0;
	top:0;
	position:absolute;
	width:92px;
	white-space:nowrap;
	text-align:left;
	font-family:Poppins-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:15px;
	color:#fff1c2ff;
	letter-spacing:3.0769232177734px
	}
	
	#gunterroses {
	position:absolute;
	width:729px;
	height:730px;
	left:0px;
	top: 192.667px;
	}
	
	#contact_ {
	left:10%;
	top:0%;
	position:absolute;
	width:966px;
	height:106px;
	text-align:center;
	font-family:Eczar-Bold,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:80px;
	color:#fff1c2ff
	}
	
	#about {
	position:absolute;
	width:1618.909px;
	height:1447.012px;
	left:231px;
	top:3321.47px;
	}
	
	#aboutdesc {
	left:896.909px;
	top:270.012px;
	position:absolute;
	width:723px;
	height:1177px;
	line-height:50px;
	margin-top:-11px;
	text-align:left;
	font-family:RobotoMono-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:28px;
	color:#fff1c2ff
	}
	
	#abouttheartist {
	left:172.075px;
	top:0;
	position:absolute;
	width:1171px;
	height:106px;
	text-align:center;
	font-family:Eczar-Bold,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:80px;
	color:#fff1c2ff
	}
	
	#foliothing {
	position:absolute;
	width:822px;
	height:1132px;
	left:0;
	top:228.512px;
	}
	
	#nav {
	position:absolute;
	width:1708.667px;
	height:140px;
	left:117px;
	top:0;
	}
	
	#Component_18 {
	position:absolute;
	width:272.091px;
	height:41.108px;
	left:1436.576px;
	top:59.892px;
	}
	
	#social-instagram_-_simple-line {
	fill:#fff1c2ff
	}
	
	.social-instagram_-_simple-line {
	overflow:visible;
	position:absolute;
	width:41px;
	height:41px;
	left:231.424px;
	top:.108px;
	transform:matrix(1,0,0,1,0,0);
	}
	
	#YouTube-Icon-White-Logowine {
	fill:#fff1c2ff
	}
	
	.YouTube-Icon-White-Logowine {
	position:absolute;
	width:57.961px;
	height:40.836px;
	left:0;
	top:.107px;
	transform:matrix(1,0,0,1,0,0);
	}

	#tumblr-white-icon {
	fill:#fff1c2ff
	}
	
	.tumblr-white-icon {
	position:absolute;
	width:23.183px;
	height:40.943px;
	left:133.788px;
	top:0;
	transform:matrix(1,0,0,1,0,0);
	}
	.social-instagram_-_simple-line,
	.YouTube-Icon-White-Logowine,
	.tumblr-white-icon {
    		transition: opacity 0.3s ease; /* Smooth transition for opacity */
	}

	.social-instagram_-_simple-line:hover,
	.YouTube-Icon-White-Logowine:hover,
	.tumblr-white-icon:hover {
    		opacity: 0.8; /* Reduced opacity on hover */
			cursor: url('/../cursor/link.cur'), pointer !important;
	}
	
	#mordecaihsu {
	left:0;
	top:56px;
	position:absolute;
	width:478px;
	white-space:nowrap;
	text-align:left;
	font-family:Poppins-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:15px;
	color:#fff1c2ff;
	letter-spacing:2.5px;
	text-transform:uppercase
	}
	
	#spoopilogowhite {
	position:absolute;
	width:80.606px;
	height:140px;
	left:830.783px;
	top:0;
	}
	
	#spoopilogowhite_bc {
	position:absolute;
	width:80.606px;
	height:140px;
	left:0;
	top:0;
	}
	
	#gallery {
	position:absolute;
	width:1646.484px;
	height:2041.861px;
	left:201.425px;
	top:1147.018px;
	}

	#gallery img {
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	#gallery img:hover {
		transform: scale(1.05); /* Makes the image slightly larger */
		opacity: 0.9; /* Slightly dims the image */
		cursor: url('/../cursor/link.cur'), pointer !important;
	}

	body.modal-open #gallery img:hover {
		transform: none;
		opacity: 1;
		cursor: url('/../cursor/pointer.cur'), auto !important;
	}
	
	#pfp {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:750px;
	height:422px;
	left:0;
	top:181.964px;
	cursor: pointer;
  	transition: 0.3s;
	}


	
	#ethanbg1 {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:876.969px;
	height:202.291px;
	left:769.516px;
	top:181.964px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#kritzposter {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:378.6px;
	height:569.395px;
	left:769.516px;
	top:1425.75px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#theoryqf {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:470.484px;
	height:616.11px;
	left:1176px;
	top:1425.75px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#osiantranches {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:750px;
	height:421.094px;
	left:0;
	top:642.928px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#maxophlog-min {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:876.969px;
	height:493.295px;
	left:769.516px;
	top:397.405px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#noahwallp {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:750px;
	height:421.094px;
	left:0;
	top:1102.985px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#technostray_1-min {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:876.969px;
	height:493.295px;
	left:769.516px;
	top:910.804px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#spoopipfp-min {
	filter:drop-shadow(0px 3px 6px #00000029);
	position:absolute;
	width:750px;
	height:421.875px;
	left:0;
	top:1563.043px;
	cursor: pointer;
  	transition: 0.3s;
	}
	
	#illustrations {
	left:308.283px;
	top:0;
	position:absolute;
	width:874px;
	height:106px;
	text-align:center;
	font-family:Eczar-Bold,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:80px;
	color:#fff1c2ff
	}
	
	#n_D_animation_reel {
	left:201px;
	top:496px;
	position:absolute;
	width:405px;
	height:152px;
	line-height:55px;
	margin-top:-5px;
	text-align:center;
	font-family:RobotoMono-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:45px;
	color:#fff1c2ff
	}
	
	#video {
	box-sizing:border-box;
	margin:0;
	padding:0;
	position:absolute;
	width:1067px;
	height:600px;
	left:701px;
	top:272px;
	}
	
	#title {
	position:absolute;
	width:106px;
	height:657px;
	left:64px;
	top:118px;
	overflow:visible
	}
	
	#email_br {
	transform:translate(0px,0px) matrix(1,0,0,1,-109,168) rotate(-90deg);
	transform-origin:center;
	left:50px;
	top:95px;
	position:fixed;
	overflow:auto;
	width:240px;
	white-space:nowrap;
	text-align:left;
	font-family:Poppins-Regular,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:13px;
	color:#fff1c2ff;
	letter-spacing:3.0769232177734px;
	text-transform:uppercase
	}
	
	#spoopinatural {
	position:fixed;
	transform:translate(0px,0px) matrix(1,0,0,1,-275.5,275.5) rotate(-90deg);
	transform-origin:center;
	left:75px;
	top:93px;
	overflow:auto;
	width:658px;
	height:106px;
	text-align:center;
	font-family:Eczar-Bold,Roboto Mono,Eczar-Bold;
	font-style:normal;
	font-weight:400;
	font-size:80px;
	color:#fff1c2ff
	}
	

	.rectangle-input textarea {
		width: 100%; 
		min-width: 850px;
		height: 100px; 
		padding: 1px;
		resize: vertical; 
		background-color: transparent;
		color:#fff1c2ff;
		resize: none;
		cursor: url('/../cursor/text.cur'), text !important;
	}

	.rectangle-input textarea::placeholder {
		color: #fff1c2ff; 
		opacity: 0.4;
	}

	.rectangle-input input[type="text"],
	.rectangle-input input[type="email"] {
		width: 100%; 
		min-width: 850px; 
		height: 40px; 
		padding: 1px; 
		background-color: transparent; 
		color:#fff1c2ff; 
		cursor: url('/../cursor/text.cur'), text !important;
	}
	
	.rectangle-input input[type="text"]::placeholder,
	.rectangle-input input[type="email"]::placeholder {
		color: #fff1c2ff; 
		opacity: 0.4;
		cursor: url('/../cursor/text.cur'), text !important; 
	}

	#button {
		display: inline-block;
	}
	
	#sendButton {
		background-color: transparent;
		border: none;
		padding: 0;
		cursor: url('/../cursor/link.cur'), pointer !important;
	}
	
	#sendButton svg.Rectangle rect {
		fill: #00000000; /* Initial fill color */
		transition: fill 0.3s ease; /* Smooth transition for fill color change */
		cursor: url('/../cursor/link.cur'), pointer !important;
	}

	#sendButton:hover svg.Rectangle {
		fill: #00000080; /* Darker fill color on hover */
		opacity: 0.45;
		cursor: url('/../cursor/link.cur'), pointer !important;
	}
	
	#sendButton div#SEND {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff1c2ff; /* Change text color as needed */
		font-size: 24px; /* Adjust font size as needed */
	}
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 9999; /* Sit on top */
	padding-top: 10px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

body.modal-open {
    overflow: hidden; /* Prevents scrolling */
    height: 100%; /* Prevents page height from changing */
}

/* Modal Content (image) */
.modal-content {
	display: flex; /* Use flexbox */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	width: 100%; /* Ensure the modal content spans the entire width of the modal */
	height: 100%; /* Ensure the modal content spans the entire height of the modal */
	overflow: hidden;
	position: absolute;
}

.modal-content img {
	max-width: 100%; /* Ensure the image fits within the modal */
	max-height: 100%; /* Ensure the image fits within the modal */
	object-fit: contain; /* Maintain aspect ratio while fitting within the container */
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: absolute;
}

#myModal3 .modal-content,
#myModal4 .modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
	position: absolute;
}

#myModal3 .modal-content img,
#myModal4 .modal-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
  
  /* Add Animation */
  .modal-content, #caption {  
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	z-index: 99999;
  }
  
  .close:hover,
  .close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: url('/../cursor/link.cur'), pointer !important;
  }

  /* Ko-fi button styles */
.kofi-widget {
    position: fixed; /* or absolute if needed */
    z-index: 500; /* Lower z-index than modal */
}

#kofiWidgetOverlay {
	z-index: 500; /* Ensure it's lower than the modal */
}
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
	.modal-content {
	  width: 100%;
	}
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
	.modal-content {
	  width: 100%;
	}
  }

  /* Media Queries for Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	#web {
		flex-direction: column;
		padding: 20px;
	}

	#form {
		max-width: 100%;
		padding: 1rem;
	}

	#button {
		width: 100%;
		max-width: 100%;
	}

	#name, #email, #message {
		width: 100%;
		max-width: 100%;
	}

	.rectangle-input textarea, .rectangle-input input[type="text"], .rectangle-input input[type="email"] {
		width: 100%;
		max-width: 100%;
		cursor: url('/../cursor/link.cur'), pointer !important;
	}

	#SEND {
		font-size: 22px;
		letter-spacing: 2px;
	}
}

/* Media Queries for Desktop (1024px and up) */
@media (min-width: 1024px) {
	#contact {
		width: 1600px;
	}

	#form {
		width: 850px;
	}

	#button {
		width: 198px;
	}
	#contact, #about, #gallery {
        flex-direction: column; /* Stack items vertically */
        width: 100%; /* Make elements full width */
    }
}

@media (max-width: 768px) {
    .gallery-item {
        width: 50%; /* 2 items per row */
    }
	#nav {
        flex-direction: column; /* Stack items vertically */
    }
    
    #contact, #about {
        width: 95%; /* Make elements wider on smaller screens */
        padding: 0 1rem; /* Adjust padding */
    }
    
    #sendButton div#SEND {
        font-size: 20px; /* Reduce font size on smaller screens */
    }
	#web {
        padding: 10px; /* Add some padding on smaller screens */
		width: 100%; /* Ensure it takes the full width */
		justify-content:space-evenly;
		align-items: flex-start;
		display: block;
    }
	#contact, #about, #gallery {
        flex-direction: column; /* Stack items vertically */
        width: 100%; /* Make elements full width */
    }
}

@media (max-width: 480px) {
    .gallery-item {
        width: 100%; /* 1 item per row */
    }
	#contact, #about, #gallery {
        flex-direction: column; /* Stack items vertically */
        width: 100%; /* Make elements full width */
    }
	#web {
        flex-direction: column; /* Stack elements vertically */
        width: 100%; /* Ensure it takes the full width */
		justify-content:space-evenly;
		align-items: flex-start;
		display: block;
    }
}

@media (max-width: 1024px) { /* Adjust the max-width as necessary */
    #web {
        flex-direction: column; /* Stack elements vertically */
        width: 100%; /* Ensure it takes the full width */
		justify-content:space-evenly;
		align-items: flex-start;
		display: block;
    }

    #contact, #about, #gallery, #video {
        width: 90%; /* Use percentage width for responsiveness */
        left: 5%; /* Center the content */
    }

    #form, #email, #name {
        width: 90%; /* Responsive input fields */
        left: 5%; /* Center them as well */
    }

    /* Adjust other specific elements as needed */
}