.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}



.mulish-accent {
  font-family: "Mulish", sans-serif;
  font-weight: 600;
  font-style: normal;
}



ul {
    list-style-type: none; /* Removes bullet points */
    margin: 0;
    padding: 0;
    overflow: hidden; 
    display: flex; /* Uses Flexbox for horizontal layout */
    justify-content: center; /* Centers the menu items */
}

li a {
    display: block; 
    color: black;
	font-size: 18px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; 
    transition: background-color 0.3s; 
}

/* Change the background color of links on hover */
li a:hover {
    background-color: #fff7; 
}




img {
display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;	
}

.image-container {
    display: flex;
    justify-content: space-around; /* Distributes space evenly */
    gap: 10px; /* Adds space between images */
}

.image-container img {
    width: 33%; /* Makes each image take up roughly a third of the container */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures images cover their space nicely without stretching */
}


h1 {
	font-size: 50px;
	font-family: sans-serif;
	color: #00bfff;
		font-weight: 700;
	text-shadow: 0 0 8px #000;
	-webkit-text-stroke-width: 1px; /* Specify the width of the outline */
	-webkit-text-stroke-color: #000; /* Specify the color of the outline */
}



h2 {
	font-size: 36px;
	font-family: sans-serif;
	background-color: #fff7;
	backdrop-filter: blur(40px); /* */
	-webkit-backdrop-filter: blur(40px);
	color: #ff9966;
	font-weight: 700;
	
	-webkit-text-stroke-width: 1px; /* Specify the width of the outline */
	-webkit-text-stroke-color: #000; /* Specify the color of the outline */
}

p {
	font-size: 20px;
	font-family: Mulish;
}

li {
	font-family: Mulish;
	font-weight: 700;
}

 


body {
  overflow-x: hidden;
}

img.animated {
  --s: 250px;   /* the size of the image */
  --b: 8px;     /* the border thickness*/
  --g: 14px;    /* the gap */
  --c: #ff9966; /* the color */
  
  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s)/2) solid #0000;
  outline-offset: calc(var(--s)/-2);
  cursor: pointer;
  transition: .3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

img + img {
  border-radius: 50%;
}

img + img + img {
  border-radius: 25%;	
}


th, .columnName {
	font-family: Mulish;
	font-weight: 700;
	font-size: 18px;
}

caption {
	font-family: sans-serif;
	font-size: 30px;
	margin-top: 10px;
	margin-bottom: 20px;
	background-color: #fff7;
}

td, tr {
	text-align: center;
	font-family: Mulish;
	border: 1px solid black;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #fff7;
}

div.paragraph {
	background-color: #fff7;
}

div.section {
	background-color: #fff7;
	font-size: 20px;
}


.video-container {
    width: 100%;
}
video {
    display: block; /* Makes the video a block-level element */
    margin-left: auto;
    margin-right: auto;
}



container {
  /* Ensure the container is relatively positioned to contain the absolutely positioned image */
  position: relative;
  width: 100%;
  height: 200px; /* Adjust height as needed */
  overflow: hidden; /* Keeps the image within the container bounds initially */
}

.animated-image {
  position: absolute;
  right: 0; 
  top: 15px; /* Adjust vertical position as needed */
  width: 200px;
  
  /* Animation properties */
  animation-name: slideIn;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1; /* Ensures it runs only once */
}

@keyframes slideIn {
  /* 0% is the start state. The image is initially at the far right. */
  0% {
    transform: translateX(0); /* The image's right edge aligns with the container's right edge */
  }
  /* 100% is the end state (the stop point). */
  100% {
    transform: translateX(-200px); /* Moves the image 300px to the left from its start position */
    /* Adjust -300px to your desired stop point (e.g., -50vw for a specific viewport position) */
  }
}



body {
  overflow-x: hidden;
}