:root {
  --main-bg-color: #ffcad4;
  --secondary-bg-color: #fef4fc;
  --nav-bg-color: #2f1820;
  --code-bg-color: #2f1820;
  --main-text-color: #2f1820;
  --nav-text-color: #b1d0d3;
  --code-text-color: #b1d0d3;
  --headings-color: #5b2f3d
}

body {
  background-image: url("pinkMarbleBg.jpg");
  background-color: var(--main-bg-color);
  background-size: cover;
  color: var(--main-text-color)
}

header {
  color: var(--headings-color);
  text-align: center;
  margin-top: 20px;
}

#navbar {
  text-align: center;
  height: 100px;
  position: sticky;
  top: 0;
  background-color: var(--main-bg-color);
  padding-bottom: 10px;
}

#navbar h1 {
  font-size: xx-large;
  margin: 10px 0;
  padding: 10px;

}

#navbar a {
  margin: 10px auto;
  padding: 10px;
  background: var(--nav-bg-color);
  color: var(--nav-text-color);
  font-size: larger;
  border-bottom: 5px solid transparent;
  text-decoration: none;
}

#navbar a:hover {
  border-bottom: 5px solid var(--nav-text-color);
}

#main-doc {
  top: 100px;
}

section {
  background-color: var(--secondary-bg-color);
  padding-bottom: 10px;
  padding-top: 10px;
  margin: 10px auto;

}

section p {
  margin: 20px;
}

section li .code-block {
  margin-left: 0;
}

.code-block {
  background-color: var(--code-bg-color);
  width: 90%;
  padding: 20px;
  margin: 20px auto;
}

code {
  color: var(--code-text-color);
  background-color: var(--code-bg-color);
}

footer {
  text-align: center;
  width: 100%;
  background-color: var(--main-bg-color);
}

footer ul {
  list-style-type: none;
  padding: 10px;
}

#logo {
  height: 50px;
}

@media (min-width:600px) {
  /* tablets and larger */
  #navbar {
    height: 100%;
    width: 20%;
    position: fixed;
    top: 0;
    left: 0;
  }

  #navbar a {
    display: block;
  }

  #main-doc {
    position: absolute;
    top: 0;
    right: 0;
    width: 78%;
    padding-bottom: 200px;
  }

  footer {
    position: fixed;
    bottom: 0;
    height: 100px;
  }

  footer ul {
    margin-top: 0;
  }
  }