/*
TODO: I don't know what to do with the responsive rules 
TODO: Center icon
TODO: Move icon up

*/


/* GLOBAL STYLES */

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* BODY STYLES */
.content-body {
/*  margin-top: 75px;*/
}

/* HEADER SECTION LANDING PAGE*/
.landing-header {
  font-family: 'Delius', cursive;
  font-size: 4em;
  margin: 20px 0 90px;   /* Daph's edit: adjusted bottom margin to create space between header and image */;
  text-align: center;

}

.landing-header-container {
  border: solid 3px #000000;
  width: 85%;
  margin: 25px auto -30px auto;
}

/* BACK ARROW */

.back-arrow {
  margin-top: 1em;
}

/* MAIN CONTENT -- SECTION LANDING PAGE */
.landing-content {
  font-size: 1.8em;
  padding-left: 15px;
  margin-top: 5em; /* Daph's edit - slightly adjust margin */
}


.landing-content-middle-paragraphs{  /* quick hack to solve a minor problem, will optimize when time allows */
  font-size: 1.8em;
  padding-left: 15px;
}

.special-link{
  color: #337ab7;
}

.landing-content-container {
  text-align: left;
  color: #000;
  font-family: 'Hind', sans-serif;
  width: 85%;
  border: solid 3px #000000;
  margin: 25px auto 75px auto;  
  padding: 15px 15px 40px;
}

/*IMAGE SECTION LANDING PAGE 
Daph's edits: 
1. removed relative size, gave width of 170px
2. cropped extra whitespace around image
3. changed display to block
4. gave it left and right auto margins
5. gave it -100px top margin to make it on top of divider line */

.landing-image {
  display: block;
  width: 170px;
  height: auto;
  margin:-100px auto;   
}

/*BUTTON "CONTINUE TO LESSONS" SECTION LANDING PAGE */
.landing-button {
  font-family: 'Hind', sans-serif;
  font-size: 1.8em;
  border: solid 2px #000000;
  border-radius: 15px;
  padding: 10px 15px;
  text-align: center;
  background-color: #dddddd;
  color: #000000;
  display: block;
  width: 45%;
  margin: auto;
}

.landing-button:hover {
  text-decoration: none;

}

/* BUTTON WRAPPER */
.landing-wrapper {
  text-align: center;
  margin: 4em 0 0;
}


/* RESPONSIVE RULES */

@media only screen and (max-width: 600px) {


  .landing-header-container,
  .landing-content-container {
     width: 100%;
     border-left: 0;
     border-right: 0;
  }
  .landing-content {
    font-size: 1.2em;
    margin-top: 8em;
  }

  .landing-content-middle-parapraphs {
    font-size: 1.2em;
  }
 
  .landing-button {
    font-size: 1.3em;
    width: 80%;
  }

}