* {
  margin:0;
  font-family: Helvetica;
}

body {
  margin:0;
}

button:hover {
  cursor:pointer;
}

#title {
  display:flex;
  flex-direction:row;
  align-items: center;
  width: 100%;
  height: 500px;
  background: linear-gradient(to right, rgb(4, 2, 1), rgb(32, 12, 4), rgba(77, 34, 5, 0)),url(../imgs/background_imgs/background8.jpg);
  background-size:contain, 50%;
  background-position: right;
}

#title #text {
  margin-left:10%;
  width:50%;
  justify-self:left;
  font-size: 2em;
  color:white;
  text-align:center;
}

#overview {
  display:flex;
  flex-direction:row;
  align-items: center;
  
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
  
  padding-top: 1em;
  padding-bottom: 1em;

  background-color: rgb(51, 35, 30);
}

#overview #text {
  color: rgb(226, 212, 208);
  width: 100%;
  height: 100%;
  padding: 20px;
  
  border: 10px double black;

  font-size: 1.25em;
}

#overview h1 {
  margin-left: 10%;
}

#overview p {
  /*margin-top: 1.25em;*/
  margin-left: 2.5%;
  text-indent: 50px;
  
}


/* stats section in stats.css */
#root-FactSlides{
  width: 100%;
}

/* technology section */
#root-TechnologyStats{
  width: 100%;
}


/* skin difference focus */
#skin-differences {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#skin-differences #skin-difference-info {
  background-color: rgb(109, 94, 89);

  color: white;
}

.info-blurb {
  padding: 5%;
}

.info-blurb h2{
  margin-left: 15px;
}

.info-blurb p{
  margin-top: 10px;
  text-indent: 50px;
}

#skin-differences #root-MatchingGame {
  width: 100%;
}


/* ml data focus */
#ml-info-text{
  background-color: rgb(186, 166, 161);
  color: black;
}