.molengo-regular {
  font-family: "Molengo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  color: #000000;
  font-family: "Molengo", sans-serif;
  font-weight: 500;
  background-size: 2%;
  align-items: center;
  align-content: center;
  margin: 0%;
}

html {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
  background-color: rgb(34, 34, 40);
  min-height: 100vh;
  height: auto;
}

h1 {
  text-align: center;
  font-size: 250%;
  text-shadow: 3px 3px 10px rgb(213, 150, 150);
}

h3 {
  text-align: center;
  font-size: 200%
}

h4 {
  text-align: center;
  font-size: 275%
}

h2 {
  text-align: center;
  font-size: 225%
}

a {
  text-align: center;
  align-self: center;
  align-content: center;
}

.page {
  max-width: 1000px;
  margin: auto;
  align-items: top;
  align-content: top;
  height: auto;
  display: flex;
  color: #ffffff;
  font-family: "Molengo", sans-serif;
  font-weight: 400;
  background-color: rgb(72, 72, 79);
  box-shadow: 2px -2px 10px rgba(223, 223, 223, 0.254);
}

.main {
  font-family: "Molengo", sans-serif;
  font-weight: 500;
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 5%;
  margin-bottom: 0%;
  height: auto;
  max-width: 960px;
  min-height: 100vh;
  vertical-align: top;
  text-align: center;
  align-items: center;

}

p {
  font-size: 125%;
  text-align: center;

}

.bottom {
  margin-left: auto;
  padding-left: 2%;
  margin-right: auto;
  text-align: left;
  position: absolute;
  bottom: 0; /* set the bottom to 0*/
}

.bottom a {
  text-align: center;
  align-self: center;
  align-content: center;
  align-items: center;
  align-content: center;
}

code {
  background-color: #3f3f3f;
  border: 1px solid #2e2e36;
  padding: 15px;
  margin: 20px;
  overflow-x: auto; /* Adds horizontal scroll if code is too long */
  font-family: monospace;
  font-size: 0.9em;
  line-height: 1.4;
  border-radius: 5px;
  display: block;
  white-space: pre-wrap;
}

/*
button {
  background-color: inherit;
  color: white;
  font-weight: 700;
  font-size: 4rem;
  border-radius: 2rem;
  border: none;
  padding: 1.5rem 3rem;
  box-shadow: -.5rem .8rem .8rem .3rem rgba(0,0,0, .05), 
  .5rem -.6rem .8rem .5rem rgba(255,255,255, .1);
}
*/

/* Add a white background color to the top navigation */
.topnav {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  position: fixed;
  align-items: flex-end;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 22px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ffbfbf;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #ff3434;
  color: white;
}

hr.lined {
  border: none; /* Remove default border */
  height: 1px; /* Set the thickness */
  background-color: #ffffff; /* Set the color */
  margin: 1em auto; /* Add vertical spacing */
  width: 50%; /* Control the length */
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: rgb(0, 0, 0);
  padding: 22px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: rgb(0, 0, 0);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown .active {
  background-color: #ff3434;
  color: white;
}

.dropdown .dropbtn.active {
  background-color: #ff3434;
  color: white;
}

.dropdown a.dropbtn.active {
  background-color: #ff3434;
  color: white;
}

.show {
  display: block;