@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');


body {
	margin: 0;
	padding: 0;
	font-family: var(--futura);
	font-weight: 600;
	font-style: normal;
	display: flex;
	align-items: center;
	height: 100%;
	height: 100vh;
	cursor: pointer;
	overflow: hidden;
	/* background: url('Assets/Test/galaxy.svg'); */




  /* background-color: rgba(0, 0, 0, 0.4); */
  background-image: url('Assets/galaxy.svg');
  /* background-color: #000000; */
  background-blend-mode: multiply;
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 

}



* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  cursor: url('Assets/cursor50.png'), auto;
  height: 100%; /* Full height for the page */
  margin: 0;
  font-family: 'Dela Gothic One', sans-serif;
  /* background: #ffF; */
}

canvas {
    position: absolute; /* Ensures the canvas fills the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1; Keeps the canvas as the background layer */



    /* background: url('Assets/backgroung.svg');
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;  */
}



h1 {
  text-align: center;
  color: #000000;
  font-size: 3rem;
  z-index: 2;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* z-index: 2; */
  background: url(Assets/03_ComicPanels.svg);
	background-repeat: no-repeat;
	background-position: center center;

  align-self: center;
  width: 100%;
  height: 100vh
  /* Full viewport height */
}

p {
    font-family: "Funnel Display", sans-serif;
    font-size: 28px;
	z-index: 2;
    max-width: 600px; /* Fixed width */
  width: 75%; /* Flexible for smaller screens */
  margin : 0px 0px 40px 0px; /* Center align and add space */
  text-align: center; /* Center text alignment */
  font-size: 1.2rem; /* Adjust font size */
  line-height: 1.5; /* Improve readability */
  color: #000000; /* Slightly lighter black for softer feel */
}

div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
}

button {
  font-family: 'Dela Gothic One', sans-serif;
  z-index: 1;
  font-weight: bold;
  cursor: url('Assets/hand50.png'), auto;
  background: transparent;
  padding: 1.5rem 6rem;
  transition: all 0.2s ease;
  color: #000000;
  font-size: 2rem;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 10px 10px 0px 0px hsla(0, 0%, 0%, 1);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  border: solid 6px #000000;
}

button:hover {
  box-shadow: 0px 0px 0px 0px hsla(0, 0%, 0%, 1);
}

@media (max-width: 620px) {
  h1 {
    margin-top: 2rem;
  }

  section {
    flex-direction: column;
  }

  button {
    margin-bottom: 2rem;
  }
}

.image-container {
  position: relative;
  width: fit-content; /* Adjust based on image dimensions if necessary */
  height: fit-content;
}

.default-image,
.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ensures both images occupy the same size */
  height: 100%; /* Adjust this if needed for SVG consistency */
}

.default-image {
  z-index: 1; /* Ensure it's on top by default */
}

.hover-image {
  z-index: 2; /* Bring this to the front on hover */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth fade effect */
}

.image-container:hover .hover-image {
  opacity: 1; /* Make visible on hover */
}

.image-container:hover .default-image {
  opacity: 100; /* Hide the default image */
}