html {
  font-size: 16px;
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #f0f0f0;
}

header {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0.5rem;
max-width: 75rem;
margin: -2.5rem auto 1rem auto;
}

h2 {
  font-size: 5rem;
  text-align: center;
}

a {
color: #770077;
text-decoration: none;
}

button {
background-color: #99d9d9;
border-radius: 0.5rem;
cursor: pointer;
}

.Slogan {
text-align: center;
font-size: 2rem;
font-weight: 900;
margin-top: -4rem;
}

.MovieSearchForm {
margin: 0.5rem 0.5rem 1rem 0.5rem;
text-align: center;
}

#Search {
width: 15rem;
font-size: 1.125rem;
border-radius: 0.5rem;
padding: 0.375rem;
}

#SearchButton {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0 0 0.5rem;
padding: 0.375rem;
}

.Navigation {
display: flex;
justify-content: space-evenly;
}

.UpsideDownTriangle {
display: inline;
}

.DropdownContent {
display: none;
position: absolute;
width: 11rem;
background-color: #f9f9f9;
border-radius: 0.5rem;
padding-top: 1rem;
padding-left: 1rem;
box-shadow: 10px 5px 5px rgb(0, 0, 0, 0.2);
margin-bottom: 1rem;
z-index: 1;
}

.Dropdown:hover .DropdownContent {
display: block;
}

.Dropdown {
padding-bottom: 1rem;
}

.NavMove {
margin-right: 0.5rem;
font-weight: 700;
}

h1 {
font-size: 2.5rem;
text-align: center;
}

.HomePage {
background-image: url("/images/Seattle-Beach-GG-Web.webp");
background-position: center;
background-size: cover;
}

.HomePageContent {
max-width: 75rem;
margin: 0 auto 1rem auto;
padding: 0.25rem 0 0.25rem 0;
text-align: center;
background-color: rgba(240, 240, 240, 0.25);
border-radius: 0.5rem;
}

.MainLinks {
max-width: 37.5rem;
margin: 0 auto 1rem auto;
text-align: left;
}

.HomePageAbout,
.SeattleMovieMainLinks,
.SeattlePeopleMainLinks,
.SeattleFunFactsMainLinks {
margin: 1rem 1rem;
}

.HomePageAbout {
font-size: 1.5rem;
font-weight: 600;
}

.SeattleMoviesMainHeader,
.SeattlePeopleMainHeader,
.SeattleFunFactsMainHeader {
font-size: 1.25rem;
font-weight: 900;
}

.SeattleMoviesMain,
.SeattlePeopleMain,
.SeattleFunFactsMain {
font-weight: 900;
}

.SFStartQuizButton{
font-size: 1.5rem;
max-width: 20rem;
padding: 0.5rem 1rem;
margin: 1rem 0;
box-shadow: 0.625rem 0.3125rem 0.3125rem rgb(0, 0, 0, 0.4);
}

.SFQuizBackground {
background-color: rgba(240, 240, 240, 0.65);
max-width: 37.5rem;
margin: 0 auto 0.75rem auto;
padding-bottom: 0.25rem;
border-radius: 0.5rem;
display: none;
}

.SFQuizHeader {
padding-top: 0.75rem;
}

.SFQuizHeader,
.AnswerText {
margin: 1rem 1rem;
text-align: left;
}

.SFQuiz {
text-align: left;
margin: 0 1rem 1rem 1rem;
}

.SFQuizButton {
width: 10rem;
margin: 1rem auto 0 auto;
}

.AboutPageContent {
text-align: center;
}

.SecondHeader {
text-align: center;
margin-bottom: 1rem;
}

.SecondHeaderButton {
font-weight: bold;
}

.Contact {
text-align: center;
margin-bottom: 1rem;
}

.MoviesPageHeader,
.ActorsPageHeader,
.AthletesPageHeader {
font-size: 2.5rem;
text-align: center;
}

.MoviesTable,
.MovieRuntimeTable,
.MovieGrossTable,
.ActorsTable,
.MusiciansTable,
.AthletesTable {
margin: auto;
border-spacing: 0;
}

.MoviesColumnHeader1,
.MoviesColumnHeader2,
.MovieRuntimeColumnHeader1,
.MovieRuntimeColumnHeader2,
.MovieGrossColumnHeader1,
.MovieGrossColumnHeader2,
.ActorsColumnHeader1,
.ActorsColumnHeader2,
.MusiciansColumnHeader1,
.AthletesColumnHeader1,
.AthletesColumnHeader2 {
font-size: 1.5rem;
text-align: center;
}

tr:nth-child(even) {
background: #ccc;
}

.MovieTitlesContent,
.MovieTitlesRContent,
.ActorsNameContent,
.AthletesNameContent  {
padding: 0.75rem 10rem 0.75rem 10rem;
text-align: center;
}

.MovieYearContent,
.MovieRuntimeContent,
.MovieGrossContent,
.ActorsBirthdateContent,
.SportPlayed {
padding: 0.75rem 5rem 0.75rem 5rem;
text-align: center;
}

.WatchedButton {
width: 10rem;
margin: 0 auto;
}

.WatchedText {
text-align: center;
}

.MovieTitle,
.PeopleName,
.CityPageHeader {
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: left;
}

.StateCitiesLinks {
text-align: center;
}

.PopsicleText {
text-align: center;
font-size: 1.25rem;
}

.SeattleFFImage {
text-align: center;
}

.PopsicleSculpture {
max-width: 48%;
height: auto;
}

#ImageAnswer {
text-align: center;
margin: 0.5rem 0 0.7rem 0;
}

.subheader {
  text-align: center;
}

footer {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0.5rem;
max-width: 75rem;
margin: 0 auto 1rem auto;
}

.FollowFooter {
text-align: center;
padding-top: 1.5rem;
}

.SocialMediaInfo {
  text-align: left;
  margin: 1rem 1rem;
}

.TwitchLogoImage {
  width: 3%;
}

.InstagramLogoColorImage {
  width: 3.5%;
}

.XLogoImage {
  width: 3.25%;
}

.NavFooterList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 1rem;

}

li {
  list-style-type: none;
}

.MainPageManualAds {
  text-align: center;
  margin-bottom: 1rem;
}



body {
  max-width: 75rem;
  margin: 0 auto;
}

label {
  cursor: pointer;
}

.HomePage {
  max-width: 100%;
  height: auto;
}

.movieResult {
  margin-bottom: 2rem;
}

.MovieCity {
  font-weight: 600;
}

.numberOfSearcResults {
  font-weight: 600;
  margin-top: -0.5rem;
}

.NumberOfSearcMovieResultsCity {
  font-weight: 600;
  margin-bottom: 1rem;
}

.SeafilmzWebsiteMediaDataLinks {
  margin-top: 2rem;
  font-weight: 600;
}

.CityFactLinks {
  margin-top: 1rem;
}

.BoldCity, .portsTeams, .StateStyle, .Greeting {
  font-weight: 600;
}

.MovieTitleLink {
  font-weight: 800;
}

/*.MovieTitleYear {
  margin-bottom: 0.25rem;
}*/

.MainLinks {
  font-size: 1.125rem;
}

.SortText {
  margin: 0.5rem;
}

.SortTriangle {
  display: inline-block;
  font-size: 1rem;
}

.MovieCountTable {
  padding-bottom: 0.5rem;
  margin: auto;
}

.MovieTotalRuntimeTable {
  margin: 0.5rem auto 0.5rem auto;
}

.MovieAvgRuntimeTable {
  margin: 0 auto 0.5rem auto;
}

.MovieTotalGrossTable {
  margin: 0 auto 0.5rem auto;
}

.MovieMainFacts,
.PeopleMainFacts,
.CityMainFacts {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  margin: 0 auto 1rem auto;
  /*border: 0.25rem solid white;
  border-radius: 1rem;*/
}

.MovieDataDesc,
.PeopleDataDesc,
.CityDataDesc {
  font-weight: 600;
}

.MovieData,
.PeopleData,
.CityData {
  padding: 0.5rem;
}

.MovieDataActor,
.MovieDataDirector,
.MovieDataFilmLocations {
  display: block;
  padding: 0.5rem;
}

.MovieTitle,
.MovieFacts {
  margin-left: 2.4rem;
}

.CityDataPointOfMany {
  padding-bottom: 0.5rem;
}

.SFMovieSort,
.SFActorSort,
.SFAthleteSort,
.SFMovieSortButton,
.SFActorSortButton,
.SFAthleteSortButton,
.MovieTextCenter,
.ActorTextCenter,
.AthleteTextCenter {
  text-align: center;
}

.MovieSortOption,
.ActorSortOption,
.AthleteSortOption {
  margin-bottom: 1rem;
}

.AtorsCountTable {
  margin: 0 auto 0.5rem auto;
}

.MusiciansTable {
  margin-bottom: 2rem;
}

.MusiciansCalledContent {
  padding: 1rem;
}

.AthletesCountTable {
  margin: 0.5rem auto 0.5rem auto;
}

.PeoplesCountTable {
  margin: 0.375rem auto 0.5rem auto;
}

.MovieTheaters {
  padding-bottom: 0.5rem;
}

.SMTList {
  list-style: none;
  text-align: center;
}

.SMTElements {
  margin-bottom: 1rem;
}

.AboutDescription {
  max-width: 1000px;
  margin: auto;
}

.YearReleasedGraph {
  display: block;
  margin: 1rem auto 1rem auto;
  width: 75%;
}

.SFAthleteDatavizTitles {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: -0.25rem;
}

.Subheader {
  text-align: center;
  font-size: 1.875rem;
  margin-top: -1rem;
}

.BuiltWith,
.StreamingServices {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.BuiltWithTool,
.StreamingServicesName {
  margin-bottom: 1rem;
}

.BuiltWithMoreInfo {
  text-align: center;
}

.ServicesContent {
  text-align: center;
}

/*Mobile Code Using Media Queries*/
@media screen and (max-width: 75rem) {
  .SeattleFFContent,
  .CityPageContent {
    padding: 1rem;
  }
}

@media screen and (max-width: 38.75rem) {
  .MovieTitlesContent,
  .MovieTitlesRContent,
  .ActorsNameContent,
  .AthletesNameContent {
    padding: 0.75rem 5rem 0.75rem 5rem;
  }
  .MovieYearContent,
  .MovieRuntimeContent,
  .MovieGrossContent,
  .ActorsBirthdateContent,
  .SportPlayed {
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
  }
}

@media screen and (min-width: 31.25rem) {
  .MobileNav {
    display: none;
  }
}

@media screen and (max-width: 31.25rem) {
  .Navigation {
    display: none;
  }
  .MobileMenu {
    display: inline-block;
    cursor: pointer;
    padding-bottom: 0.5rem;
  }
  .Bar1 {
    background-color: orange;
    width: 2rem;
    height: 0.395em;
    display: block;
    margin: 0 0 0.2rem 1rem;
    border-radius: 0.5rem;
    transition: 0.3s;
  }
  .Bar2 {
    background-color: orange;
    width: 2rem;
    height: 0.395em;
    display: block;
    margin-left: 1rem;
    margin-bottom: 0.2rem;
    border-radius: 0.5rem;
    transition: 0.3s;
  }
  .Bar3 {
    background-color: orange;
    width: 2rem;
    height: 0.395em;
    margin-left: 1rem;
    display: block;
    border-radius: 0.5rem;
    transition: 0.3s;
  }
  .change .Bar1 {
    transform: rotate(-45deg) translate(-6px, 5px);
  }
  .change .Bar3 {
    transform: rotate(45deg) translate(-8px, -8px);
  }
  .change .Bar2 {
    opacity: 0;
  }
  .MobileNav {
    padding-left: 1rem;
    padding-bottom: 0.05rem;
    display: none;
    transition: 0.3s;
  }
  .change {
    display: block;
  }
  .HomePageContent {
    margin-top: -1rem;
  }
  .MoviesPageHeader,
  .ActorsPageHeader,
  .AthletesPageHeader {
    font-size: 1.75rem;
    text-align: center;
  }
  .MoviesColumnHeader1,
  .MoviesColumnHeader2,
  .MovieRuntimeColumnHeader1,
  .MovieRuntimeColumnHeader2,
  .MovieGrossColumnHeader1,
  .MovieGrossColumnHeader2,
  .ActorsColumnHeader1,
  .ActorsColumnHeader2 {
    font-size: 1.25rem;
  }
  .TwitchLogoImage {
    width: 10%;
  }
  .InstagramLogoColorImage {
    width: 11.5%;
  }
  .XLogoImage {
    width: 10.75%;
  }
  .NavFooterList {
    padding-left: 0.33rem;
  }
}

@media screen and (max-width: 23.125rem) {
  .MovieTitlesContent,
  .MovieTitlesRContent,
  .ActorsNameContent,
  .AthletesNameContent {
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
  }
  .MovieYearContent,
  .MovieRuntimeContent,
  .MovieGrossContent,
  .SportPlayed {
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
  }
  h2 {
    font-size: 3rem;
    padding-top: 1rem;
  }
  .Slogan {
    font-size: 1.5rem;
    margin-top: -2.5rem;
  }
}

@media screen and (max-width: 18.125rem) {
  .MovieTitlesRContent {
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
  }
  .MovieRuntimeContent {
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
  }
}