/* Background animation */
@keyframes backgroundAnimation {
    0% {
        background-position: 0% 0%;
    }
    68% {
        background-position: 10% 50%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* Particle effect */
@keyframes particleAnimation {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Body styles with animated background */
body {
    background: linear-gradient(85deg, #000000, rgba(66, 173, 10, 0.58), #000000, #00c65c);
    background-size: 128% 620%;
    animation: backgroundAnimation 15s ease infinite;
    color: #ffffff;
    font-family: "Courier New", Courier, monospace;
    text-align: center;
    margin: 0;
    padding: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevent scrollbars caused by particles */
}

/* Particle effect overlay */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(252, 0, 0, 0.1) 20%, rgb(116, 37, 37) 80%);
    opacity: 0.5;
    pointer-events: none;
}

/* Particle effects */
.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.5);
    pointer-events: none;
    animation: particleAnimation 5s infinite;
}

html {
	padding: 0;
	margin: 0;
	font-size: 13px;
	background: #000;
	color: lime;
	font-family: 'Source Code Pro', monospace;
}

img {
	max-width: 100%;
}

.page {
	padding: 24px;
}

.page h1:first-child {
	margin-top: 0;
}

.header-image {
	height: 200px;
	margin: auto;
	display: block;
}

.wrapper {
	margin: auto;
	margin-top: 24px;
	width: 753px;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #FF3, /* Inner yellow */
      0 0 10px #F90, /* Mid orange */
      0 0 18px #F00, /* Outer red */
      0 0 25px #F00, /* Extra outer red */
      0 0 35px #F00, /* Extra extra outer red */
      0 2px 2px rgba(0, 0, 0, 0.5); /* Faint shadow to create depth */
  }
  20%, 24%, 55% {        
    text-shadow:
      0 0 6px #FF3,
      0 0 14px #F90,
      0 0 24px #F00,
      0 0 34px #F00,
      0 0 44px #F00,
      0 2px 2px rgba(0, 0, 0, 0.5);
  }
}

#asciiArt {
    white-space: pre-wrap;
    font-family: 'Slant', 'Courier New', monospace;
    font-size: 10px;
    transform-style: preserve-3d;
    transform: translateZ(0);
    animation: flicker 1s infinite alternate; /* Apply the flicker animation */
}

.char {
    display: inline-block; /* Treat each character as a block for individual manipulation */
    transition: color 0.5s; /* Smooth color transition for each character */
    opacity: 0.8; /* Slightly reduce opacity for a smoky effect */
}

.container {
    text-align: center;
    color: #EFC900;
}


.menu {
	text-align: center;
	margin-bottom: 4px;
	margin-top: 44px;
    position: relative;
    left: 50px;
}

.menu a {
	color: lime;
}

.main {
    height: 480px;
    width: 753px;
    background-image: url('bg.jpg');
    position: relative;
    z-index: 40;
}

.main iframe, .main video {
    border: none;
    position: absolute;
    top: 35px;
    left: 7px;
    width: 739px;
    height: 439px;
    z-index: 1; /* Set the stacking order for the iframe */
}

.main video {
    display: block;
    margin: auto;
    margin-top: 2px; /* Adjust the top margin as needed */
    width: 720px; /* Adjust the width as needed */
    height: 430px; /* Adjust the height as needed */
    z-index: 2; /* Set the stacking order for the video to appear over the iframe */
}

/* You can remove the existing styles for .main ivid and .main iframe */
.main ivid, .main iframe {
    border: none;
    position: relative; /* Adjust the positioning as needed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main img {
    border: none;
    position: absolute;
    top: 35px; /* Match the top position of the video */
    left: 7px; /* Match the left position of the video */
    width: 739px; /* Match the width of the video */
    height: 439px; /* Match the height of the video */
    z-index: 2; /* Ensure the GIF appears above the background */
}

/* Retro-style button */
button {
    background-color: #dedede; /* Bright green, typical of old monitors */
    color: black; /* Text color */
    position: relative;
    border: 2px solid #545454; /* Lime border for that classic glow */
    border-radius: 1px; /* Slightly rounded corners */
    padding: 10px 16px; /* Padding for button size */
    left: -100px;
    top: 550px;
    font-family: 'Source Code Pro', monospace; /* Monospace font for the retro feel */
    font-size: 12px; /* Larger font size for readability */
    text-transform: uppercase; /* Uppercase text for that old-school touch */
    outline: none; /* Remove default focus outline */
    cursor: pointer; /* Cursor to indicate clickable */
    box-shadow: 0 0 10px #ffffff; /* Glowing effect */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

/* Hover effect */
button:hover {
    background-color: #ffffff; /* Darker green on hover */
    box-shadow: 0 0 15px lime; /* Stronger glow effect on hover */
}

/* Active/click effect */
button:active {
    background-color: #007700; /* Even darker green when the button is clicked */
    box-shadow: 0 0 5px lime; /* Dim glow effect when the button is clicked */
}



h1, h2, h3, h4, h5 {
	font-size: 12px;
}

h1 {
	border-bottom: 1px solid lime;
}

h2 {
	border-bottom: 1px dotted lime;
}

a {
	color: red;
}