/* Set the base font size for the entire body */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px; /* Set the font size to 16px (or any other size you prefer) */
}

body, h1, p, .box {
  font-weight: normal; /* Remove bold */
}

header {
  background-color: #9AA6B2;
  color: black;
  text-align: center;
  padding: 5px;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Box styles */
.box {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
  margin: 0;
  transition: background-color 0.3s ease;
}

/* Set background colors for the boxes */
.box1 {
  background-color: #BCCCDC;
}

.box2 {
  background-color: #F8FAFC;
}

.box3 {
  background-color: #D9EAFD;
}

/* Hover effect: change background color when hovered */
.box:hover {
  background-color: #FBFFE4;
}

pre {
  margin: 0; /* Removes margin */
  padding: 0; /* Removes padding */
  white-space: pre-wrap; /* Wraps text inside <pre> if it overflows */
}

/* Mobile responsive design */
@media (min-width: 600px) {
  .container {
    flex-direction: row;
  }
  .box {
    flex: 1;
    margin: 0; /* Remove margin to make them right next to each other */
  }
}