/* Dis the CSS file for the main page or sum*/

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  color: whitesmoke;
}

.container {
  display: flex;
  height: 100vh; /* full viewport height */
}

/* side panels with wallpaper */
.side {
  width: 400px; /* width of the wallpaper sections */
  background-image: url('wallpaper.jpg'); /* uploaded Neocities image */
  background-repeat: no-repeat;
  background-size: cover;  /* fills the side section */
  background-position: center;
}

/* center section */
.center {
  flex: 1; /* takes remaining space */
  background-color: greenyellow;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.center h1,
.center h2,
.center p,
.center ol,
.center li {
  background-color: green; /* dark green background behind text */
  padding: 5px 10px;           /* some padding for readability */
  border-radius: 5px;           /* optional: rounded corners */
  /* display: inline-block;        /* fits background to text width */
  margin: 3px 0;                /* spacing between text blocks */
}

/* styled ordered list */
ol {
  list-style-position: inside; /* numbers stay with text */
  padding-left: 0;             /* remove extra indentation */
  margin: 20px 0;              /* space above/below list */
}

ol li {
  margin: 10px 0; /* spacing between list items */
}