@font-face {
    font-family: 'cMyWebFont';
    src: url('webMain.woff');
}

@font-face {
    font-family: 'cMyWebFontVar1s';
    src: url('Web437_IBM_VGA_9x14.woff');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
    background-color: rgb(8, 8, 8);
    font-family: 'cMyWebFont';
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;

}

body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 0, 255, 0.1) 1px, transparent 1px);
	background-size: 50px 50px;
	z-index: 1;
}

h1 {
    color: yellow;
	font-family: 'cMyWebFont';
    font-size: 34px;
}
h2, h3, h4, h5, p, div, li, ul {
    color: #0a9e0a;
}

.scrollable {
    height: 200px; /* hmmmm*/
    overflow-y: auto;
}

.contentHeader {
    background-color: black;
    padding: 1.5%;
    margin: 2%;
    width: 35%;
	min-width: 325px;
    text-align: left;
    z-index:99 !important;
    position: absolute;
	display: block;
}



.contentHeader a {
    color: #77c023;
    margin: 3px;
    font-size: 17px;
    display: block; 
    clear: both; 
    z-index:99 !important;
}
.contentHeader a:hover {
    background-color: #dddddd00;
    color: rgb(184, 197, 69);
}
.contentHeader a.active {
    background-color: #0a9e0a;
    color: rgba(255, 255, 255, 0);
}

.contentHeader p {
    color: #f2f2f2;
    margin: 3px;
    font-size: 17px;
    display: block; 
    clear: both; 
    z-index:99 !important;
}
.contentHeader li{
    color: #f2f2f2;
    margin: 3px;
    font-size: 17px;
    display: block;
    clear: both; 
    z-index:99 !important;
}


.slideshow {
	position: relative;
	width: 100vw;
	height: 100vh;
	z-index: 2;
}

input[type="radio"] {
	display: none;
}

.slides-container {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 1000px;
}

.slide {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(0.8) rotateX(-45deg);
	transition: all 0.8s ease;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.image-stack {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	justify-content: center;
	justify-content: center;
	align-items: center;
	align-self: center;
	align-content: center;
	border: 3px solid green;
}
.slide-images-var {
	height: 80%;
	width: 30%;
	background-size: cover;
	background-position: 50%;
	opacity: 0.8;
	border: 5px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0.3em 0.3em 0.5em rgba(255, 255, 255, 0.5);
	transition: all 1s ease;	
	top: 7%;
	left: 50%;
	transform: translate(-50%, 0);
}

.slide:nth-child(1) .slide-images {
	background-image: url("../../Images/profilePic.png");
}
.slide:nth-child(2) .slide-images {
	background-image: url("../../Images/dwII.png");
}
.slide:nth-child(3) .slide-images {
	background-image: url("../../Gifs/dreamSlayerGif.gif");
}
.slide:nth-child(4) .slide-images {
	background-image: url("../../Images/TheTraveler_2.png");
}
.slide:nth-child(5) .slide-images {
	background-image: url("../../Gifs/dwGif.gif");
}
.slide:nth-child(6) .slide-images {
	background-image: url("../../Images/TryMe.jpg");
}

.slide-images {
	position: absolute;
	height: 70%;
	width: 35%;
	min-width: 500px;
	max-width: 600px;
	right: 2em;
	top: 2em;
	background-size: cover;
	background-position: 50%;
	border-radius: 0 5em 0 5em;
	opacity: 0.8;
	border: 5px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0.3em 0.3em 0.5em rgba(255, 255, 255, 0.5);
	transition: all 1s ease;
}

@keyframes imageColorShift {
	0%,
	100% {
		filter: hue-rotate(0deg) brightness(1) contrast(1);
		transform: skew(0, 0) translate(0, 0);
	}
	33% {
		filter: hue-rotate(120deg) brightness(1.2) contrast(1.3);
		transform: skew(15deg, 0) translate(-10%, 5%);
	}
	66% {
		filter: hue-rotate(240deg) brightness(0.9) contrast(1.1);
		transform: skew(5deg, 5deg) translate(-5%, 0%);
	}
}

.slide::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg,
		rgba(255, 0, 255, 0.1),
		rgba(0, 255, 255, 0.1),
		rgba(255, 255, 0, 0.1)
	);
	mix-blend-mode: multiply;
	animation: colorShift 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes colorShift {
	0%,
	100% {
		filter: hue-rotate(0deg);
	}
	33% {
		filter: hue-rotate(120deg);
	}
	66% {
		filter: hue-rotate(240deg);
	}
}

.slide::after {
	position: absolute;
	bottom: 10%;
	left: 10%;
	font-size: clamp(2rem, 8vw, 6rem);
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
	animation: glitchText 4s infinite;
	white-space: nowrap;
	pointer-events: none;
}

@keyframes glitchText {
	0%,
	100% {
		text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
		transform: translate(0);
	}
	10% {
		text-shadow: 2px 0 0 #ff00ff, -2px 0 0 #00ffff;
		transform: translate(-2px, 0);
	}
	20% {
		text-shadow: 2px 0 0 #ff00ff, -2px 0 0 #00ffff;
		transform: translate(2px, 0);
	}
	30%,
	70% {
		text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
		transform: translate(0);
	}
	80% {
		text-shadow: -2px 0 0 #ff00ff, 2px 0 0 #00ffff;
		transform: translate(2px, 0);
	}
	90% {
		text-shadow: -2px 0 0 #ff00ff, 2px 0 0 #00ffff;
		transform: translate(-2px, 0);
	}
}


#slide1:checked ~ .slides-container .slide:nth-child(1),
#slide2:checked ~ .slides-container .slide:nth-child(2),
#slide3:checked ~ .slides-container .slide:nth-child(3),
#slide4:checked ~ .slides-container .slide:nth-child(4),
#slide5:checked ~ .slides-container .slide:nth-child(5),
#slide6:checked ~ .slides-container .slide:nth-child(6),
#slide7:checked ~ .slides-container .slide:nth-child(7) {
	opacity: 1 !important;
	transform: scale(1) rotateX(0deg) !important;
	filter: contrast(1.2) brightness(1.1) saturate(1.3) hue-rotate(0deg) !important;
	z-index: 10 !important;
	animation: none !important;
}

#slide1:checked ~ .slides-container .slide:not(:nth-child(1)),
#slide2:checked ~ .slides-container .slide:not(:nth-child(2)),
#slide3:checked ~ .slides-container .slide:not(:nth-child(3)),
#slide4:checked ~ .slides-container .slide:not(:nth-child(4)),
#slide5:checked ~ .slides-container .slide:not(:nth-child(5)),
#slide6:checked ~ .slides-container .slide:not(:nth-child(6)),
#slide7:checked ~ .slides-container .slide:not(:nth-child(7)) {
	opacity: 0 !important;
	transform: scale(0.8) rotateX(-45deg) !important;
	filter: contrast(0.8) brightness(0.6) saturate(0.5) hue-rotate(360deg) !important;
	z-index: 1 !important;
	animation: none !important;
}

#slide1:checked ~ .nav-indicators .nav-dot:nth-child(1),
#slide2:checked ~ .nav-indicators .nav-dot:nth-child(2),
#slide3:checked ~ .nav-indicators .nav-dot:nth-child(3),
#slide4:checked ~ .nav-indicators .nav-dot:nth-child(4),
#slide5:checked ~ .nav-indicators .nav-dot:nth-child(5),
#slide6:checked ~ .nav-indicators .nav-dot:nth-child(6),
#slide7:checked ~ .nav-indicators .nav-dot:nth-child(7) {
	background: #00ffff !important;
	box-shadow: 0 0 10px #00ffff, inset 0 0 10px #00ffff !important;
	transform: rotate(45deg) scale(1.2) !important;
	animation: none !important;
}

#slide1:checked ~ .nav-indicators .nav-dot:not(:nth-child(1)),
#slide2:checked ~ .nav-indicators .nav-dot:not(:nth-child(2)),
#slide3:checked ~ .nav-indicators .nav-dot:not(:nth-child(3)),
#slide4:checked ~ .nav-indicators .nav-dot:not(:nth-child(4)),
#slide5:checked ~ .nav-indicators .nav-dot:not(:nth-child(5)),
#slide6:checked ~ .nav-indicators .nav-dot:not(:nth-child(6)),
#slide7:checked ~ .nav-indicators .nav-dot:not(:nth-child(7)) {
	background: transparent !important;
	box-shadow: none !important;
	transform: rotate(45deg) scale(1) !important;
	animation: none !important;
}

.nav-indicators {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 20px;
	z-index: 20;
}

.nav-dot {
	width: 15px;
	height: 15px;
	border: 2px solid #00ffff;
	background: transparent;
	transform: rotate(45deg);
	transition: all 0.3s ease;
	position: relative;
	cursor: pointer;
}

.nav-dot::before {
	content: "";
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 1px solid rgba(0, 255, 255, 0.3);
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.nav-dot:hover::before {
	opacity: 1;
	animation: pulse 1s infinite;
}


@keyframes pulse {
	0%,
	100% {
		transform: rotate(45deg) scale(1);
	}
	50% {
		transform: rotate(45deg) scale(1.3);
	}
}

.slide:nth-child(1)::after {
	content: "About";
	width: 100%;
	height: 100%;
	bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
	top: 78%;
	position: fixed;
}
.slide:nth-child(2)::after {
	content: "2026";
	width: 100%;
	height: 100%;
	bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
	top: 78%;
	position: fixed;
}
.slide:nth-child(3)::after {
	content: "2025";
	width: 100%;
	height: 100%;
	bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
	top: 78%;
	position: fixed;
}
.slide:nth-child(4)::after {
	content: "2024";
	width: 100%;
	height: 100%;
	bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
	top: 78%;
	position: fixed;
}
.slide:nth-child(5)::after {
	content: "2023";
	width: 100%;
	height: 100%;
	bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
	top: 78%;
	position: fixed;
}
.slide:nth-child(6)::after {
	content: "2022";
	width: 100%;
	height: 100%;
	bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
	top: 78%;
	position: fixed;
}

.vhs-static {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 2px,
		rgba(255, 255, 255, 0.01) 2px,
		rgba(255, 255, 255, 0.01) 4px
	);
	opacity: 0.3;
	animation: vhsStatic 0.2s steps(2, end) infinite;
	pointer-events: none;
}

@keyframes vhsStatic {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(4px);
	}
}

.btn-container {
	position:relative;
	text-align: center;
}

.magnetic-btn {
	display: inline-block;
	color: rgb(218, 218, 218);
	padding: 5px 5px;
	font-family: 'cMyWebFont';
	font-size: 1.1rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease-out;
}

@media (max-width: 480px) {
	.magnetic-btn {
		padding: 12px 24px;
		font-size: 1rem;
	}
}

@media only screen and (max-width: 768px), (max-height: 768px) {

	body { 
		overflow: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.slide::after {
		font-size: clamp(1.5rem, 10vw, 4rem);
		bottom: 15%;
		left: 5%;
	}

	.slide {
		display: flex;
		position: absolute;
		justify-content: center;
		overflow-y: visible;
		overflow-x: hidden;
	}

	.slide-images {
		background-size: cover;
		background-position: 50%;
		opacity: 0.8;
		border: 5px solid rgba(255, 255, 255, 0.5);
		box-shadow: 0.3em 0.3em 0.5em rgba(255, 255, 255, 0.5);
		transition: all 1s ease;
		top: 9%;
		left: 50%;
		transform: translate(-50%, 0);
		min-width: 91%;
		height: 27%;
		border-radius: 0 0em 0 0em;
		opacity: 0.8;
	}

	#mobileCull {
		display: none;
	}

	#mobileContentHeader {
		top: 1%; 
		height: 80%;
		max-height: 88%;
	}

	.scrollable {
		height: 50%;
	}

	.contentHeader {
		overflow-y: visible;
		overflow-x: hidden;
		opacity: 0.8;
		top: 38%;
		width: 75%;
		max-height: 40.5%;
	}
	
	.nav-indicators {
		position: fixed;
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: env(safe-area-inset-bottom, 5);
		padding-bottom: 5%;
		top: 95%;
		justify-content: center;
	}

	[class*="cont-"] {
        width: 100%;
    }

	.slide:nth-child(1)::after {
		display: none;
		width: 100%;
		height: 100%;
		bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
		top: 83%;
		position: fixed;
		
	}
	.slide:nth-child(2)::after {
		width: 100%;
		height: 100%;
		bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
		top: 2%;
	}
	.slide:nth-child(3)::after {
		width: 100%;
		height: 100%;
		bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
		top: 2%;
	}
	.slide:nth-child(4)::after {
		width: 100%;
		height: 100%;
		bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
		top: 2%;
	}
	.slide:nth-child(5)::after {
		width: 100%;
		height: 100%;
		bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
		top: 2%;
	}
	.slide:nth-child(6)::after {
		width: 100%;
		height: 100%;
		bottom: calc(env(safe-area-inset-bottom, 0) + 10%);
		top: 2%;
	}
}

/*
.ios-safari-only .slide:nth-child(1)::after {
    top: 75%;
}
.ios-safari-only .slide:nth-child(2)::after {
    top: 75%;
}
.ios-safari-only .slide:nth-child(3)::after {
    top: 75%;
}
.ios-safari-only .slide:nth-child(4)::after {
    top: 75%;
}
.ios-safari-only .slide:nth-child(5)::after {
    top: 75%;
}
.ios-safari-only .slide:nth-child(6)::after {
    top: 75%;
}

.ios-safari-only .contentHeader {
    max-height: 42%;
}
*/