/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
  cursor: url('cursor.png'), auto;
}

header {
  background-color: forestgreen;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Styling for the main navigation container */
#navbar ul {
    list-style-type: none; /* Removes bullet points */
    margin: 0px;
    padding: 10;
    display: flex; /* Uses flexbox for horizontal layout */
    background-color: yellowgreen; /* Adds a background color */
    justify-content: center;
}

/* Styling for individual list items */
#navbar li a {
    display: block; /* Makes the entire link area clickable */
    color: indigo;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /* Removes default link underline */
}

/* Change color on hover */
#navbar li a:hover {
    background-color: #111;
}

.flex-container {
  display: flex; /* Makes the children sit side-by-side */
  justify-content: space-around; /* Adds space between and around items */
}
.container1, .container2 {
  flex: 1; /* Allows containers to grow and share available space equally */
}

.container1 {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh;
  width: 100%;
  background-color: mediumorchid;
  color: green;
}
.centered-content1 {
  /* Optional: Add some styling to your inner content to make it visible */
  width: 500px; /* Example fixed width for the content container */
  padding: 20px;
  border: 30px solid black;
  border-image: url('https://www.wordforest.org/wp-content/uploads/2016/12/forest-4-e1483856441969.jpg') 30 round;
  border-radius: 20px;
  text-align: center;
  background-color: violet;
  font-family:sans-serif;
}

.container2 {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh;
  width: 100%;
  background-color: mediumorchid;
  color: green;
}
.centered-content2 {
  /* Optional: Add some styling to your inner content to make it visible */
  width: 300px; /* Example fixed width for the content container */
  padding: 20px;
  border: 30px solid black;
  border-image: url('https://www.wordforest.org/wp-content/uploads/2016/12/forest-4-e1483856441969.jpg') 30 round;
  border-radius: 20px;
  text-align: center;
  background-color: violet;
  font-family:sans-serif;
}