@import url('https://fonts.googleapis.com/css2?family=Poor+Story&family=Raleway:wght@500&display=swap');
/*
font-family: 'Poor Story', cursive; for H1
font-family: 'Raleway', sans-serif; for other
*/

body {
  width: 100%;
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
  background-color: lightgreen;
  text-align: center;
}
section#main {
  background-color: ForestGreen;
  border-radius: 20px;
  width: 80%; 
  margin: 0 auto;
  padding: 36px; 
  text-align: left; 
  margin-bottom: 100px;
  box-shadow: -20px 0px 20px darkgreen, 
               20px 0px 20px darkgreen,
                0px 20px 20px darkgreen, 
                0px -2px 2px darkgreen;
}
h1 {
  font-family: 'Poor Story', cursive;
  font-size: 3.3em;
  font-weight: bold;
}
h2 {
  font-family: 'Raleway', sans-serif;
}

fieldset {
  margin-bottom: 40px; 
  border-radius: 20px;
  border: 3px dashed darkgreen;
}

div#filmSection {
  display: flex; 
  flex-wrap: wrap;
}

/*
Action, Adventure, Comedy, Drama, Fantasy, Horror, Musicals, Mystery, Romance, Science Fiction, Sports, Thriller, Western
*/
.filmGenre {
  width: 25%;
  font-size: 1.4em;
}
#descYorselfStyle {
  width: 450px;
}
select {
  width: 150px;
  font-size: 1.1em;
  border: 2px groove DarkGreen;
  background-color: lightgraygrey;
}
input#job {
  width: 210px;
}
input {
  border: 2px groove DarkGreen;
  background-color: lightgraygrey;
}
textarea {
  width: 65%; 
  height: 150px;
  border: 2px groove DarkGreen;
}
input#submitButton {
  position: absolute;
  right: 0;
  bottom: -20px;
  border: 2px groove DarkGreen;
  background-color: blue; 
  color: white; 
  font-size: 1.2em; 
  padding: 10px 60px; 
  border-radius: 10px;
}
div#button {
  background-color: black; 
  width: 100%;
  position: relative;
}