/* color palatte
steel blue #4281A4
green #48A9A6
white #E2DED9
Tan #D4B483
pink #C1666B

cream #FAF2DD
redwood #7C606B
night sky #424C55
ocean #68B0AB
root beer froth #F2D0A4
------------------*/



/* Global styles
----------------------*/

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing:border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
  /*set the primary font*/
  font-family: 'Open Sans', sans-serif;
  /*make sure there is no white border at edge of window*/
  margin: 0;
}
h1, h2 {
  /*use a slightly more stylized font for my name and major headings*/
  font-family: 'Forum', cursive;
  font-weight: 400;
}
h1 {
  font-size: 80px;
}
h2 {
  font-size: 40px;
  margin-top: 0px;
}
a {
  /*make my links a little turquoise rather than plain blue*/
  color: #68B0AB;
}

/*use a content wrapper to provide formatting for each individual section*/
.content-wrap {
  max-width:950px;
  margin:0 auto;
  padding: 40px 40px;
  overflow: auto;
}

.btn {
  text-decoration:none;
  background: #F2D0A4;
  color: white;
  padding: 10px;
  display: inline-block;
}


/* Header and Footer
----------------------*/
header, footer {
  background: #7C606B;
  color: #FAF2DD;
}
/*----header----*/
header h1, header h2 {
  color: #F2D0A4;
  margin:0;
}
.profile-img {
  border-radius:10%;
}

/*make the button position itself in the right location*/
.download-btn-wrapper {
  clear:left;
  display:block;
  text-align: center;
  /*the content-wrap class this sits in has a padding of 40px on the bottom, so we must position 40px downward*/
  position:relative;
  top: 40px;
}

/*----footer----*/
footer {
  text-align:center;
}
.contact-info a {
  padding:10px;
  display:inline-block;
}


/* Work Experience
----------------------*/
.work {
  background: #FAF2DD;
}
.job-title {
  /*get rid of all the space around these tags*/
  margin:0;
}
.company-name {
  text-transform: uppercase;
}
.dates {
  font-style: italic;
}
h3 ~ p {
  margin:0;
}
.job-description p:first-of-type {
  margin-top:0;
}
.job-description {
  margin-bottom:25px;
}

/* Education
----------------------*/
.education {
  background:#A52A2A;
}
p + h3 {
  margin-top:30px;
}
.education h3 {
  margin:0;
}

/* Portfolio
----------------------*/
.portfolio {
  background:#F2D0A4;
}
p + h3 {
  margin-top:30px;
}
.portfolio h3 {
  margin:0;
}

/* Military
----------------------*/
.military {
  background:#68B0AB;
}
p + h3 {
  margin-top:30px;
}
.military h3 {
  margin:0;
}


/* media queries
----------------------*/

@media (min-width: 900px) {
  /*this applies to all ports above 900px, we split into two columns*/
  .col-narrow {
    width: 30%;
    float:left;
  }
  .col-wide {
    width:70%;
    float:left;
    padding-left: 20px;
  }
}
@media (max-width:899px) {
  header {
    text-align: center;
  }
  .profile-img {
    width: 200px;
  }
}