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

body {
  margin:0;
}

button:hover {
  cursor:pointer;
}

/* title section */
#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, 35%;
  background-position: right;
}

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


/* overview section */
#overview {
  display:flex;
  flex-direction:row;
  align-items: center;

  width: 96%;
  padding-left: 2%;
  padding-right: 2%;

  padding-top: 3em;
  padding-bottom: 3em;

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

#overview #text {
  color:white;/* rgb(226, 212, 208);*/
  width: 100%;
  height: 100%;
  padding: 20px;

  border: 10px double black;

  font-size: 1.25em;
}

#overview h1 {
  /*margin-left: 10%;*/
  text-align: center;
}

#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%;
  
  height: 500px;
  display: flex;
  flex-direction: row;
}

#skin-differences #skin-difference-info {
  width: 30%;
  
  background-color: rgb(109.3, 94, 89.3);
  color: white;
}

.info-blurb {
  padding: 5%;
}

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

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

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