/* 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." */

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

body {
  background: url('bg.jpg') no-repeat center center fixed;
  background-size: cover;
  font-family: Papyrus, fantasy;
  color: black;
  text-align: center;
}

/* headline image */
.headline {
  width: 80%;
  max-width: 800px;
  margin: 20px auto;
  display: block;
  border: none;
}

/* layout wrapper for side + main */
.page-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin-top: 0px;
  flex-wrap: wrap; /* responsive */
}

/* navigation / side box */
.side-box {
  width: 250px;
  min-height: 430px;
  background-image: url('navigation.jpg'); /* replace with your image */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: black;
}

.side-box h3 {
  margin-top: 0;
}

.side-box a {
  color: blue;
  text-decoration: none;
  font-weight: bold;
}

.side-box a:hover {
  text-decoration: underline;
}

/* main content box */
.main-box {
  background-color: white;
  padding: 20px;
  border-radius: 20px;
  width: 700px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-align: left;
}