body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.top-image-container {
  position: relative;
  width: 100%;
  height: 110vh;
  overflow: hidden;
}

#top-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  filter: blur(20px); /* Initial blur effect */
  transition: filter 2s ease; /* Transition effect for blur */
}

.content {
  padding: 20px;
}


body {
  font-family: Afek, sans-serif; /* Default font family */
}

.large-header {
  font-family: "font37", Times, serif; /* Specify font family for large headers */
}

.small-header {
  font-family: blender, sans-serif; /* Specify font family for small headers */
}

.column {
  font-family: blender, serif; /* Specify font family for columns of text */
}


.image-container img {
  max-width: 100%; /* Ensure the image does not exceed the container width */
  max-height: 100%; /* Ensure the image does not exceed the container height */
}
body, html {
  margin: 0;
  padding: 0;
  height: 70%;
}

.slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  text-align: center;
}

.header {
  margin-bottom: 50px;
}

.large-header {
  font-size: 48px;
  animation: enlarge 5s forwards;
}

.small-header {
  font-size: 24px;
  opacity: 0;
  animation: fadeIn 10s forwards;
}

.rectangle {
  width: 900px;
  padding: 40px;
  background-color: #D47D65;
}

.column {
  text-align: center;
}

.clouds {
  width: 100%;
  height: 100%;
  background: url('cloud.png') repeat-x;
  animation: floatClouds 60s linear infinite;
}

@keyframes enlarge {
  from {
    font-size: 24px;
  }
  to {
    font-size: 68px;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes floatClouds {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Adjust to column if needed */
  height: 100vh; /* Ensure the container fills the viewport */
}

.rectangle {
  display: flex; /* Use flexbox for columns */
  flex-direction: row; /* Align columns horizontally */
  justify-content: space-between; /* Distribute space between columns */
  width: 800px;
  padding: 20px;
  background-color: #D47D65;
}

.column {
  flex: 1; /* Allow columns to expand equally */
  text-align: right; /* Center text horizontally */
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.background {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* הזזת הרקע אחורה לאחור */
  animation: flicker 0.5s infinite; /* Adjust flicker speed as needed */
  background: 
    linear-gradient(to bottom, #FFFFFF 50%, transparent 10%),
    linear-gradient(to right, #D47D65 20%, transparent 10%);
  background-size: 10% 5px, 1px 50%;
}

@keyframes flicker {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 2px 2px;
  }
  10% {
    background-position: 0 0;
  }
}

body, html {
  margin: 0;
  padding: 0;
}

.image-row {
  display: flex;
  justify-content: center; /* Center images horizontally */
  align-items: center;
  overflow: hidden; /* Hide overflowing images */
}

.bottom-image {
  animation: moveRightToLeft 10s linear infinite; /* Adjust animation duration as needed */
}

@keyframes moveRightToLeft {
  0% {
    transform: translateX(100%); /* Start from the right side */
  }
  100% {
    transform: translateX(-100%); /* Move to the left side */
  }
}
body, html {
  margin: 0;
  padding: 0;
}

.image-row {
  display: flex;
  justify-content: center; /* Center images horizontally */
  align-items: center;
  overflow: hidden; /* Hide overflowing images */
}

a {
  display: inline-block; /* Make the anchor tag a block element */
  margin: 0.2cm; /* Adjust margin between images */
  transition: transform 0.2s, box-shadow 0.2s; /* Add transition for transform and box-shadow */
}

a:hover {
  transform: translateY(-2px); /* Move the image up slightly on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.bottom-image {
  /* Additional styles for bottom images */
}

img {
  width: 900px; /* Adjust image width */
  height: auto;
}