styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Apply a background color to the body */
body {
  font-family: Arial, sans-serif;  /* Set a simple font */
  background-color: #f4f4f4;      /* Light grey background */
  color: #333;                    /* Dark grey text color */
  margin: 20px;                    /* Add margin around the body */
}

/* Style the header */
h1 {
  text-align: center;               /* Center-align the header text */
  color: darkblue;                   /* Green color for header */
  margin-top: 50px;                  /* Add space above the header */
  font-size: 36px;                   /* Larger font size for header */
}

/* Style the paragraph */
p {
  text-align: center;               /* Center-align the paragraph text */
  font-size: 18px;                  /* Medium font size */
  line-height: 1.6;                 /* Increase line height for readability */
  color: #555;                     /* Slightly lighter grey for text */
  margin-top: 20px;                 /* Add space above the paragraph */
}

/* Add some styling for buttons (if you want to add any later) */
button {
  display: block;                   /* Make button block-level so it spans the width */
  width: 200px;                     /* Set a fixed width */
  margin: 30px auto;                /* Center the button with auto margins */
  padding: 10px;                    /* Add padding inside the button */
  background-color: darkblue;        /* Green background for button */
  color: white;                     /* White text color */
  border: none;                     /* Remove the default border */
  border-radius: 5px;               /* Rounded corners */
  font-size: 16px;                  /* Button text size */
  cursor: pointer;                  /* Change cursor to pointer when hovering */
}

button:hover {
  background-color: skyblue;        /* Darker green when hovering */
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.box {
  width: 200px;
  height: 80px;
  background-color: lightgrey;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  border-radius: 8px;
  position: relative;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #4CAF50;
  position: absolute;
  top: -30px;  /* Adjusts the arrow position above the boxes */
}

.arrow1 {
  left: -100px;  /* Position the first arrow pointing to the left box */
}

.arrow2 {
  right: -100px;  /* Position the second arrow pointing to the right box */
}
.green-box {
  background-color: green; /* Green */
}