/**
 * Main stylesheet of the project.
 */

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

h1 {
  font-size: 3.4em;
  margin-bottom: 0.4em;
  text-shadow: 1px 1px 1px black;
  color: dimgray;
}

h2 {
  font-size: 1.2em;
  margin-bottom: 1.2em;
  text-shadow: 1px 1px 1px grey;
}

h3 {
  font-size: 1.2em;
  text-shadow: 1px 1px 1px black;
}
p {
  font-size: 0.8em;
  margin-bottom: 1em;
}

#main-content {
}

/*
 * styles shared by all sections inside div main-content
 */
#main-content section {
  overflow-y: scroll;
  min-height: 100vh;
  padding-top: 0%;
  padding-bottom: 7%;
  color: #FAFAFA; 
  box-shadow: inset 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/*
 * style of first section inside div main-content
 */
#main-content section:first-child {
  box-shadow: none;
}

/*
 * styles applied on every section container
 */
#main-content section .container {
  opacity: 0;
  transform: translateX(-10%);
  transition: opacity ease 0.8s, transform ease 0.8s;
  
  
}
#main-content section .container p {
  font-weight: normal;
}

/*
 * styles applied on every section container when active
 */
#main-content section.active .container {
  opacity: 1;
  transform: translateX(0);
}


.container {
  position: relative;
  height: 100%;
}



/**
 * Styles used only by large devices
 */
@media (min-width: 613px) {
  #main-content section {
    padding-right: 40px;
    padding-left: 40px;
  }
}

/**
 * Styles used only by small devices
 * 612px is an appropriate breakpoint for this project,
 * it may vary acording to interactions and usability
 */
@media (max-width: 612px) {
  #main-content section {
    padding-right: 20px;
    padding-left: 20px;
  }
}