body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #8363c7; /* this is the backgrond color of the page */
  /* opacity: 0.3; this will make all the child elements have a lower
  opacity as well, so best not to use this here */
  background-image: url("moon-bkg.jpg");
  background-attachment: fixed;
}
        
* {
  box-sizing: border-box;
}
/* Style the header */
        
header {
  background-color: #FFB6C1; /* pinku */
  padding: 30px; /*the "Hi, I'm SM Walrath!" got taller when I increased
  this number, but not wider - maybe because it just gets as wide as the
  window is */
  text-align: center;
  font-size: 35px;
  color: #d11fa2; /* this is the header's font color - magenta */
  border-style: dotted;
  border-width: thick;
}
        
/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}
        
   
/* Style the list inside the menu - where the text sits */
nav ul {
  list-style-type: none;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto; /* when i took this away it took the
   bkg color off the navbar lmao */
  background-color: #333;
  position: sticky; /* doesn't work :/ */
  /* position: fixed; - this makes it stick to the top of the 
  screen??? no thank you */
  top: 0;
  width: 100%;
}

li a {
  display: block;
  color: white;
  text-align: center; /* this didn't do anything -- unless 
  the text already was centerered -- though it didn't 
  appear so */
  padding: 14px 16px; /* changing this from 12 and 25 to 14 and 
  16 made one of the list items go next to the 1st li; this changes
  the padding for the website tabs */
  text-decoration: none;
}

li {
  float: left; /* if you omit float here, it shows the nav bar as 
  vertical and centered, while the section takes up the width of 
  the website */
}

/* Change the link color on hover */
li a:hover {
  background-color: #111; /* changes the color when the person
  hovers over it */
}

.active {
  background-color: #04AA6D; /* colors whatever tab on the website
  the person is currently on */
}
  
/* i took the article off, it was originally here */

/* I moved the footer internally, and inline for padding */
        
/* Responsive layout - makes the menu and the content (inside the 
section) sit on top of each other instead of next to each other */
@media (max-width: 100px) {
section {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}}