//variables
$background-purple: #3d385a;
$subtle-white: #f9f9f9;
$subtle-grey: #f2f2f2;
$masked-grey: #333;
$blue: #6495ed;

$open-sans: 'Open Sans', sans-serif;

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  background-color: $background-purple;
}

// page container
.container {
  width: 100%;
  height: 100%;
}

// tutorial start
.tutorial {
  width: 80%;
  margin: 30px auto 0 auto;
 
  background-color: $subtle-white;
  
.slider {
  width: 100%;
  height: 300px;
  background-color: $blue;
}
  
.information {
  width: 100%;
  padding: 20px 50px;
  margin-bottom: 30px;
  font-family: $open-sans;
  h1 {
    color: $masked-grey;
    font-size: 1.5rem;
    padding: 0px 10px;
    border-left: 3px solid $blue;
  }
  h3 {
    color: darken($subtle-grey, 7%);
    font-size: 1rem;
    padding: 0px 10px;
    border-left: 3px solid $blue;
  }
  p {
    padding: 10px 0px;
  }
}
  
  // initial ul
  ul {
    font-size: 0;
    list-style-type: none;
    
    // initial li
    li {
      font-family: $open-sans;
      font-size: 1rem;
      font-weight: 400;
      color: $masked-grey;
      
      display: inline-block;
      padding: 15px;
      position: relative;
      
       // secondary ul
        ul {
          display: none;
        }
      
      // initial li:hover
      &:hover {
        cursor: pointer;
        background-color: $subtle-grey;
        
        // secondary ul visibility change
        ul {
          display: block;
          margin-top: 15px;
          
          width: 200px;
          left: 0;
          
          position: absolute;
          
          // secondary li
          li {
            display: block;
            background-color: darken($subtle-white, 7%);
            span {
              float: right;
              color: $subtle-white;
              background-color: $blue;
              padding: 2px 5px;
              text-align: center;
              font-size: .8rem;
              border-radius: 3px;
            }
           
            // secondary li:hover
            &:hover {
              background-color: darken($subtle-white, 10%);
              span {
                background-color: darken($blue, 5%);
              }
            }
          }
        }
      } 
    }
  }
}