* {
  font-size: 16px;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

body {
  width: 62.5rem;
  margin: 0 auto;
}

main {
  background-color: #f0f0f0;
  border-radius: 3rem;
}

h1 {
  font-size: 5rem;
  text-align: center;
  color: #3d0158;
}

a {
  text-decoration: none;
  color: #3856e7;
}

.websiteHeaderText {
  font-size: 5rem;
  color: #3d0158;
}

.fullWebsiteName {
  font-size: 2rem;
  text-align: center;
  margin-top: -3rem;
  color: #3d0158;
}

h2 {
  font-size: 2rem;
  text-align: center;
  padding: 1rem 1rem 0 1rem;
  color: #582bcd;
}

.graphs {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.chart {
  width: 12.5rem;
  height: 17.5rem;
}

.actorHeightGraph {
  padding: 0 1rem 0 1rem;
}

.actorWeightGraph {
  padding: 0 1rem 0 1rem;
}

.actorWeightHeightGraph {
  padding: 0 1rem 0 1rem;
}

.femaleActorHeightGraph {
  padding: 0 1rem 0 1rem;
}

.femaleActorWeightGraph {
  padding: 0 1rem 0 1rem;
}

.femaleActorWeightHeightGraph {
  padding: 0 1rem 1rem 1rem;
}

.buttonWrapper {
  text-align: center;
  margin-top: 0.5rem;
}

.actorActionRadios,
.femaleActorActionRadios {
  display: flex;

  justify-content: center;
  flex-wrap: wrap;
  width: 50rem;
  margin: 1rem auto 0 auto;
}

.actorActionFacts,
.femaleActorActionFacts {
  width: 17.5rem;
  margin: 1rem auto;
}

.actorActionText {
  padding-left: 3rem;
  background-color: white;
  border: solid black;
  border-radius: 3rem;
}

li {
  list-style-type: none;
}

.birthday,
.age,
.height,
.weight {
  margin-bottom: 1rem;
}

ul,
li {
  width: 25rem;
  margin: 0 auto;
}

.BuiltWithTool {
  margin-bottom: 1rem;
}

.lastTool {
  padding-bottom: 1rem;
}

.whyBuilt {
  width: 25rem;
  margin: 0 auto;
  padding: 0 0 1rem 1rem;
}

footer {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  padding: 3rem;
}

.logoImage {
  width: 3rem;
}

.socialMediaLink {
  font-size: 1.5rem;
}

@media screen and (max-width: 31.25rem) {
  body {
    width: 17.5rem;
    margin: 0 auto;
  }
  h1 {
    font-size: 3rem;
    text-align: center;
  }
  .actorActionRadios,
  .femaleActorActionRadios {
    display: flex;
    flex-direction: column;
    width: 17.5;
    margin: 0 auto;
    padding: 0 3rem;
  }
  .buttonWrapper {
    text-align: left;
    width: 17.5;
    padding: 0 3rem;
  }
  .whyBuilt {
    width: 17.5rem;
    margin: 0 auto;
    padding: 0 2rem 1rem 2rem;
  }
}