/* Step 1 — variables & base rules */
:root{
  /* colors & images */
  --background-color: #d7ceb1;
  --content-background-color: #d7ceb1;
  --sidebar-background-color: #ffffff;
  --body-bg-image: url("/fotos/watercolor.jpg");
  --header-image: url("/fotos/background2014.jpg");

  /* typography */
  --font: Verdana, sans-serif;
  --heading-font: Georgia, serif;
  --font-size: 12px;
  --text-color: #352711;
  --sidebar-text-color: #1a5b8c;

  /* links */
  --link-color: #313933;
  --link-color-hover: #262020;

  /* layout */
  --margin: 40px;
  --padding: 40px;
  --border: 5px solid #605151;
  --round-borders: 30px;
  --sidebar-width: 160px;
  --page-max-width: 1100px;
}

/* reset & box model */
*,
*::before,
*::after { box-sizing: border-box; }

/* page baseline */
html, body { height: 100%; }
body{
  margin: 0;
  padding: var(--margin);
  font-family: var(--font);
  font-size: var(--font-size);
  color: var(--text-color);
  line-height: 1.2;
  background-color: var(--background-color);
  background-image: var(--body-bg-image);
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  display: flex;              /* center container horizontally */
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

#mainContent {
  padding: 20px;
  border-radius: 8px;
  max-width: 1200px;
  margin:20px auto;
}

ul {
  list-style-type: none;
}

main {
  overflow-y: auto;
  padding: var(--padding);
  background-color: rgba(255, 255, 255, 0.8);
  background: rgba(215, 206, 177, 0.8);
  border: var(--border);
  border-radius: var(--round-borders);
}

#footer .box {
  margin-top: 20px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white */
  border: 1px solid #ccc;
  border-radius: 5px;
}
/* utility */
.hidden { display: none !important; }

/* links */
a, a:visited { color: var(--link-color); text-decoration: underline; }
a:hover, a:focus { color: var(--link-color-hover); text-decoration: none; }