/* 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 {
  background-image: url(gifs/star.gif);
  color: black;
  background-size: 200px 200px;
  background-repeat: repeat;
  background-position: center; /* centers the background image */
  background-color: #fbfbeb; /* shows behind the image */
  min-height: 100vh;
  font-family: Helvetica;
  padding: 20px;
}

@media (max-width: 550px) {
  #inner {
    flex-direction: column; /* stacks them vertically on mobile */
  }
  #sidebar, #main {
    width: auto; /* let them fill full width when stacked */
  }
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#container {
  max-width: 600px;       /* won't exceed 600px but can shrink */
  width: auto;            /* shrinks on small screens */
  background-color: #f4f8ed;
  padding: 5px;
  padding-right: 15px;
  margin: 50px auto;      /* auto left/right centers it */
  border: 2px solid white;
  outline: 2px solid #f4f8ed;
  outline-offset: 5px;
  box-sizing: border-box;
}

#inner {
  display: flex;
  gap: 10px;
  margin: 5px;
}

#sidebar {
  width: 150px;
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1;
}

.box {
  margin: 5px;
  padding: 5px;
  border: 2px solid black;
  background-color: #D4E4FC;
  box-sizing: border-box;
  width: 100%;
}