/* color palatte

orangecicle #FAB863
deep marine #2B3B4F
lavender #FBE6FC
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: auto;    /* (centers the div) */
  padding: 40px 40px;
  overflow: auto; /* (expands height of div to accomodate everything in header) */
  /* text-align:center; */ /* (centers text to the right of pic when in destop view) */
}
.column-content-wrap {
  max-width:950px;
  margin:0 auto;
  padding: 40px 40px;
  /* overflow: auto; */
  /* display: block; */
}

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


/* Header and Footer
----------------------*/
header, footer {
  background: #FAB863;
  color: #2B3B4F;
  display: block;
}
/*----header----*/
header h1, header h2 {
  color: #2B3B4F;
  margin:0;
}
.profile-img {
  border-radius:10%;
}


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


/* My Links
----------------------*/
.links {
  background: #4CC07C  ;
  /* overflow: auto; */
  /* display: inline-block; */
}
h3 ~ p {
  margin:0;
}

/* Youtube Links
----------------------*/
.youtube {
  background:#A52A2A;
  display: inline-block; /* allows background color to display */
  width: 100%; /* expands background to acomodate iframe contents */
}
p + h3 {
  margin-top:30px;
}
.education {
  margin:0;
  background: #FBE6FC
}

/* App Links
----------------------*/
.apps {
  background:#F2D0A4;
  display: inline-block; /* allows background color to display */
  width: 100%; /* expands div and background to sit nicer in space */
}
p + h3 {
  margin-top:30px;
}
.h3 {
  margin:0;
}



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

@media (min-width: 900px) {
  /*this applies to all ports above 900px, we split into two columns*/
  iframe {
    width: 560px;
    height: 315px; 
  }
  .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;
  }
  iframe {
    width: 300px; 
    height: 169px;
  }
}