body {
    background-color: #000;
    color: #ffcc00;
    font-family: 'Arial', sans-serif;
    text-align: center;
}
.outer-container {
    display: flex;
}

.container {
    /* grid-template-columns: repeat(30, 20px);
    grid-template-rows: repeat(70, 20px); */
    gap: 2px;
    margin: 20px auto;
    flex: 1; /* Allow the grid container to grow and take available space */
    display: grid;
    grid-template-columns: repeat(30, 20px);
    grid-gap: 10px;
}

.overlay {
    /* Styling for the overlay container */
    flex: 1; /* Allow the overlay to grow and take available space */
    background-color: rgba(0, 0, 0, 0); /* Semi-transparent black background */
    display: flex;
    justify-content: top;
    align-items: top;
}

.content {
    /* Styling for the content inside the overlay */
    background-color: #ffffff00; /* White background for the content */
    padding: 20px;
    border-radius: 10px;
}

.p-content {
    color: #2e0530; /* Text color */

}


.cell {
    width: 20px;
    height: 20px;
/*    background-color: rgba(51, 51, 51, 0.5); /* RGBA value with 0.5 alpha (transparency) */*/
    background-color: #FFFFFD;
    border: 1px solid #FFFFFD;
}

.alive-yellow {
    background-color: #ffcc00; /* Yellow */
}


.alive-red {
    background-color: #ff0000; /* Red */
}

/* CSS */
.darktext {
    color: #FFFFFD; /* Text color */
    background-color: #333; /* Background color (dark color for the box) */
    padding: 5px; /* Padding around the text inside the box */
    display: inline-block; /* Make the box only as wide as the text */
}




.flying-object {
    width: 160px;
    height: 160px;
    position: absolute;
    top: 50%; /* Initial vertical position */
    left: -50px; /* Initial horizontal position (off the screen) */
    background-image: url('imgs/S7hN.gif'); /* Add your image path here */
    background-size: cover;
}

.flying-text {
    width: 160px;
    height: 90px;
    position: absolute;
    top: -90%; /* Initial vertical position */
    left: 0px; /* Initial horizontal position (off the screen) */
}

.static-object {
    width: 20vw; /* 20% of the viewport width */
    aspect-ratio: 1 / 1; /* Ensures a 1:1 aspect ratio (width:height) */
    position: fixed; /* Position the object fixed on the screen */
    top: 10vh; /* 10% of the viewport height from the top */
    left: 10vw;
    background-image: url('imgs/6.png'); /* Add your static image path here */
/*    background-image: url('imgs/eidon_logo.jpeg');*/
    background-size: cover;
}

#harrypotterobamasonic10inu {
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top:-1em;
} 





#dollarsCounter, #generationsCounter {
    margin-top: 10px;
    font-size: 18px;
    color: #ffcc00;
    transition: color 0.3s ease; /* Smooth color transition */
}

.flashing-border {
    border: 2px solid;
    animation: flash-border 1s infinite; /* Flashing border animation */
}

@keyframes flash-border {
    0%, 100% {
        border-color: #ffcc00;
    }
    50% {
        border-color: #ff00ff;
    }
}

.flashing-text {
    animation: flash-text 0.5s infinite; /* Flashing text color animation */
}

@keyframes flash-text {
    0%, 100% {
        color: #ffcc00;
    }
    50% {
        color: #ff00ff;
    }
}

.content-area {
    margin-left: 5%;
    margin-right: 5%;
    background-color: rgba(0, 0, 0, 0.6);
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.img-background {
    background-image: url("imgs/eidon_logo.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
}
.alpha-darken-bg {
    background-color: rgba(70, 30, 30, 0.829);
}
a {
    background-color:rgba(255, 255, 255, 1);;
}
.header-img {
    max-height: 18px;
}
div.content-area {
    padding: 1%;
}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.top-nav {
    font-weight: bold;
}
#harrypotterobamasonic10inu {
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top:-1em;
} 

:root {
    --width: 300px;
    --x-speed: 13s;
    --y-speed: 7s;
    --transition-speed: 2.2s;
}

.el { 
    /* width: var(--width); */
    /* height: var(--width); */
    height: 50px;   
    z-index: 20;
}

.x {
    animation: x var(--x-speed) linear infinite alternate;
}
.y {
    animation: y var(--y-speed) linear infinite alternate;
}

@keyframes x {
100% {
    transform: translateX(calc(100vw - var(--width)));
}
}
@keyframes y {
100% {
    transform: translateY(calc(100vh - var(--width)));
}
}
button {
    background-image: linear-gradient(to right, #015ad1, #1748bc);
    border-radius: 50px;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    padding: 10px 25px;
    transition: all 0.1s ease-in-out;
}

button.redpill{
    background-image: linear-gradient(to right, #d10101, #bc1717);
    border-radius: 50px;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    padding: 10px 25px;
    transition: all 0.1s ease-in-out;
}

button:active {
    opacity: 0.8;
}

button:focus {
    outline: none;
    box-shadow: 0 0 1px 2px #015ad1;
}

.modal-wrapper {
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all 0.3s ease-in-out;
z-index: -1;
}

.modal-wrapper.open {
opacity: 1;
z-index: 999;
}

.modal {
background-color: rgb(0, 0, 0);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 380px;
max-width: 95%;
}

.modal-header {
background: #015ad1;
background-image: linear-gradient(to right, #015ad1, #1748bc);
color: #fff;
padding: 15px 0;
}

.modal-header h3 {
margin: 0;
}

.modal-body {
padding: 15px 20px;
}

.modal-body h4 {
margin: 0;
}

.modal-body p {
letter-spacing: 0.5px;
line-height: 24px;
margin: 10px 0 0;
}

.modal-footer {
background-color: #eee;
padding: 15px 0;
}

@font-face { 
font-family: "Nise-Sega"; src: url(NiseSega.html); 
}

#HarryPotterObamaSonic10Inu {
font-family: "Nise-Sega";
font-weight: 100;
}

.HowToBuy, .ca {
font-size:1.3rem;
}
.addy{
color:turquoise;
}