/* ALL DEVICE WIDTH START */
/* Galaxy S5          - 360 x 640     - in em    = 22.5 x 40       -*/
/* Galaxy S9          - 360 x 740     - in em    = 22.5 x 46.25     -*/
/* Pixel 2            - 411 x 731     - in em    = 25.688 x 45.688       -*/
/* Pixel 2XL          - 411 x 823     - in em    = 25.688 x 51.438       -*/
/* iPhone 5/SE        - 320 x 568     - in em    = 20 x 35.5       -*/
/* iPhone 6/7/8       - 375 x 667     - in em    = 23.438 x 41.688       -*/
/* iPhone 6/7/8+      - 414 x 736     - in em    = 25.875 x 46       -*/
/* iPhone X/XS        - 375 x 812     - in em    = 23.438 x 50.75       -*/
/* iPad               - 768 x 1024    - in em    = 48 x 64       -*/
/* iPad Pro           - 1024 x 1366   - in em    = 64 x 85.375       -*/
/* DEVICE WIDTH END */

/* ALL HEADING SIZES START*/
/* Rank: 1   -   h1   -   DEFAULT: font-size: 2em      -   PIXEL-HEIGHT: 32px */
/* Rank: 1   -   h2   -   DEFAULT: font-size: 1.5em    -   PIXEL-HEIGHT: 24px */
/* Rank: 1   -   h3   -   DEFAULT: font-size: 1.17em   -   PIXEL-HEIGHT: 18.72px */
/* Rank: 1   -   h4   -   DEFAULT: font-size: 1em      -   PIXEL-HEIGHT: 16px */
/* Rank: 1   -   h5   -   DEFAULT: font-size: .83em    -   PIXEL-HEIGHT: 13.28px */
/* Rank: 1   -   h6   -   DEFAULT: font-size: .67em    -   PIXEL-HEIGHT: 10.72px */
/* HEADING SIZE END */

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

body {
  line-height: 140%;
  font-family: Arial;
  /* background: #dcdcdc; */
}





/* HEADER STYLING SEPARATES LIST INLINE BLOCK COLOR FROM HEADER COLOR */
header {
  background: #fff;
  /* height: 3em; */
}

/* THE HEADER BELOW ACTUALLY NEEDS TO BE FOR LARGER WIDTHS THAT ARE MOSTLY OR ALL NON-MOBILE */
/* THIS NEEDS TO BE MOBILE HEADER ONCE I WORK OUT TRANSITIONS AND EM SIZES FOR THE TOGGLE BUTTON */
/* MOBILR NAV BAR START */

/* MOBILE NAV BAR END*/

/* TURNS LIST BLOCK ITEMS INTO FLEX ITEMS BUT MOBILE IS TOO NARROW FOR THIS */
header ul {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-evenly;
  align-items: center;
  background: #242582;
  height: 4em;
  border-bottom: .125em solid black;
}

/* REMOVES BULLET FROM LIST ITEMS */
header ul li {
  list-style: none;
}

/* REMOVES UNDERLINE FROM LINKS THAT ARE THE LIST ITEMS --- NOTE!!! THE TEXT IS HIDDEN SINCE IT SHOULD NOT BE ON MOBILE */
header ul li a {
  text-decoration: none;
  color: #fff;
}

header ul li a:hover,
header ul li a:focus {
  color: #F64C72;
}
/* END HEADER */



/* MAIN CONTENT */

/* HEADING 1 IS IN A BLOCK OF ITS OWN */
.main-heading {
  padding: 2em 0;
  /* background: red; */
  background: #fff;
  border-bottom: .125em solid black;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  /* color: #553D67; */
}

/* THIS POSITIONS HEADING 2 AND ALL PARAGRAPHS */
.main-content {
  width: 90%;
  margin: 0 auto;
}

/* HEADING 2 NEEDED A DIFFERENT BORDER BOTTOM PIXEL */
.minor-heading {
  /* color: #553D67; */
  padding: 1em 0;
  /* background: orange; */
  background: #fff;
  border-bottom: .09em solid black;
  text-align: center;
}

/* MAIN CONTENT PARAGRAPHS ARE BIGGER ON MOBILE SEE SIZE AND LEADING */
.main-content-p {
  padding: 0 .5em 1em .5em;
  /* background: yellow; */
  /* color: #553D67; */
  background: #fff;
  text-align: justify;
  text-indent: 1em;
  font-size: 1.125em;
  line-height: 120%;
}

/* THE BELOW TWO HELP ME SEE WHICH IS THE FIRST AND LAST */
.main-content-p:first-of-type {
  padding-top: 1em;
  color: red;
}

.main-content-p:last-of-type {
  color: red;
  padding-bottom: 0;
}
/* END MAIN CONTENT SECTION */



/* RETURN HOME SECTION */

/* BACK TO PORTFOLIO MENU IS TOO WORDY */
.return-home-section {
  display: flex;
  justify-content: space-around;
  /* background: red; */
  background: #fff;
  width: 70%;
  padding: 2em;
  /* padding-bottom: 4em; */
  /* border-bottom: .1em solid black; */
  margin: 0 auto;
  font-weight: bold;
}

/* THIS SECTION REMOVES TEXT DECORATIONS */
.return-home-section a {
  text-decoration: none;
  color: blue;
}

/* THIS SECTION DECORATES HOVER AND FOCUS FOR ACCESSIBILITY AND UX */
.return-home-section a:hover,
.return-home-section a:focus {
  color: red;
}
/* END RETURN HOME SECTION */






/* SIMPLY USED FOR HEIGHT SPACING */
/* .blue-spacer {
  background: yellow;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 1em;
  padding: 0;
  height: 100vh;
} */






/*START FOOTER - HOLDS ICON ATTRIBUTION, SOCIAL MEDIA ICONS AND COPYRIGHT  */
footer {
  text-align: center;
  width: 100%;
}

/* STYLES FLATICONS ATTRIBUITION WITHIN THE FOOTER */
.flaticon-attr {
  /* background: #fff; */
  padding: .75em .5em;
  width: 75%;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 1em;
  border: .125em solid black;
  border-radius: 1em;
  font-size: 1em;
  letter-spacing: .0125em;
  line-height: 1.25em;
  /* color: #fff; */
  font-style: italic;
}

.flaticon-attr a {
  text-decoration: none;
  color: blue;
}

.flaticon-attr a:hover,
.flaticon-attr a:focus {
  text-decoration: underline;
  color: red;
}

/* STYLES SOCIAL MEDIA ICONS WITHIN THE FOOTER */
/* THIS BAR SPANS BLUE TO FIT SOCIAL MEDIA ICONS */
.blue-social-width {
  border-top: .125em solid black;
  width: 100%;
  background: #99738E;
}


.social-icons-flex {
  padding: 1em 0;
  display: flex;
  justify-content: space-around;
  background: #99738E;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

/* STYLES COPYRIGHT WITHIN THE FOOTER */
.copy-right {
  border-top: .125em solid black;
  border-bottom: .125em solid black;
  padding: 1em 0;
  text-align: center;
  background: #99738E;
  color: white;
  width: 100%;
  margin: 0 auto;
  text-transform: uppercase;
  font-weight: bold;
  /* margin-bottom: 1em; */
}
/* END FOOTER */









/* START MEDIA- QUERIES */

/* START IPAD WIDTH MQ */
/* iPad               - 768 x 1024    - in em    = 48 x 64       -*/
@media all and (min-width: 48em) {


  .main-heading,
  .main-content,
  .minor-heading,
  .main-content-p,
  .flaticon-attr {
    max-width: 42em;
  }

  .flaticon-attr {
    /* background: red; */
    padding: 1.5em .75em;
  }

  .social-icons-flex {
    max-width: 40em;
  }

  .return-home-section {
    /* background: red; */
    max-width: 42em;
  }

}

/* END MEDIA QUERIES */