h1 {
  /* uses Lucidia console for the font */
  font-family: "Lucida Console", "Courier New", monospace;
  color: white; /* Changes font to white */
  font-size: 2.5rem;
  /* makes the text very bold */
  font-weight: 800;
}

.container-header {
  background-color:#FCD29F;
  border: 5px solid #7FD8BE;
  border-radius: 10px; /* rounds the corners of the border */
  padding: 40px 40px;
  display: flex; /* uses flexbox to put items side by side in a row */
  
}

.header-row {
	flex: 3; /* takes up 3 parts of the flexbox space */
}

.nav-row {
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bolder;
  flex: 1; /* takes up 1 part of the flexbox space */
}

.container-movies {
  /*height: 400px;
  background-color: #eee;
  padding: 80px;
  border: 5px solid #7FD8BE;
  background-color:#FCD29F;*/
  
  display: grid; /* uses grid to layout the movie items */
  gap: 20px;
  padding: 20px;
  max-width: 1200px;  /* stops the container from getting wider than 1200px */
  margin: auto;
  justify-content: center;
  grid-template-columns: 1fr; /* makes 1 column that takes up all the space */
  text-align: center;
  background-color: #FCD29F; 
  border-radius: 10px; /* rounds the corners of the container */
  
}

.movie-one {
  
  margin-bottom: auto; /* pushes the bottom margin to fill available space */
  border: 8px solid #7FD8BE;
  padding : 20px;
  border-radius: 7px;
    
}

.movie-two {
  
  margin-bottom: auto; /* pushes the bottom margin to fill available space */
  border: 8px solid #7FD8BE;
  padding : 20px;
  border-radius: 7px;
}

.movie-three {
  
  margin-bottom: auto; /* pushes the bottom margin to fill available space */
  border: 8px solid #7FD8BE;
  padding : 20px;
  border-radius: 7px;
  
}

h3 {
  font-family: Chalkduster, fantasy;
  
}

h2 {
  font-family: Chalkduster, fantasy;
}

p {
  display: block; /* paragraph takes up all width space */
  font-family: Chalkduster, fantasy;
  font-weight: 300;
  
  
}

.container-about {
	border: 5px solid #7FD8BE;  
  padding: 20px 40px;
  background-color: #FCD29F;
  margin: 30px auto 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* makes 1 column */
  line-height:1.65;
  letter-spacing:1px; /* Add space between letters */

}

.about-one {
  order: 2;
}

.about-two {
  order:2;
}

.about-three {
  order: 2;
}

/* tablet */
/* when the screen is 600px or wider */
@media (min-width: 600px) {
    .container-movies {
       grid-template-columns: 1fr;
    }
  	.container-about {
      grid-template-columns: 1fr;
  }
}
  
/* desktop*/
/* When the screen is 900px or wider, switch to a 3-column layout */
@media (min-width: 900px) {
    .container-movies {
        grid-template-columns: repeat(3, 1fr);
  
    }
 
    .container-about {
        grid-template-columns: 1fr; /* keeps it at 1 column */
  	} 
  }