body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(bathroom.jpeg);
  z-index: -1;
}

body {
  background-image: url(bathroom.jpeg);
  background-attachment: fixed;
  color: #b9c9c6;
  font-family: sans-serif;
  font-size: 0.875em;
  }

a:link {
  color: #34a36e;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #34a36e;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: green;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #34a36e;
  text-decoration: none;
}
  
h1 {
  background-color: #1a1a1a;
  color: red;
  font-family: "Google Sans Code", monospace;
  }

.bbh-bartle-regular {
  font-family: "BBH Bartle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

// <weight>: Use a value from 300 to 800
// <uniquifier>: Use a unique and descriptive class name

.google-sans-code-<uniquifier> {
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.title {
  box-sizing: border-box;
  width: 70%;
  background-color: black;
  color: #b9c9c6;
  font-family: "BBH Bartle";
  text-align: center;
  font-weight: bold;
  font-size: 3em;
  margin: auto;
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 0px;
}

.label {
 box-sizing: border-box;
 width: 70%;
 color: #b9c9c6;
 font-family: "Google Sans Code", monospace;
 text-align: left;
 font-size: 1.1em;
 margin: auto;
 background-color: #1a1a1a;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 8px;
 padding-top: 5px;
}

.block {
  box-sizing: border-box;
  width: 70%;
  background-color: black;
  color: #b9c9c6;
  text-align: left;
  font-size: 1em;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 30px;
  padding-right: 30px;
}



.links {
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace;
  width: 70%;
  background-color: black;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

#divider {
 display: block;
 width: 70%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 0px;
}

#wire {
  display: block;
  background-color: black;
  width: 70%;
  margin: auto;
  margin-top: 0px;
  padding: 0px;
}

#filmnav {
 box-sizing: border-box;
 display: block;
 background-color: black;
 width: 70%;
 text-align: center;
 margin: auto;
 margin-top: 0px;
}

.outro {
  width: 40%;
  background-color: black;
  font-size: 1em;
  text-align: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}


.sidenav {
  width: 80px;
  position: fixed;
  z-index: 1;
  bottom: 20px;
  left: 10px;
  background: #000;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.1em;
  color: #34a36e;
  display: block;
}

.sidenav a:hover {
  color: white;
}

.main {
  box-sizing: border-box;
  margin-left: 140px; /* Same width as the sidebar + left position in px */
  margin-right: 140px;
  font-size: 1em; /* Increased text to enable scrolling */
  padding: 0px 10px;
}