@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,600);
* {
  box-model: border-box;
}


/* simple use of flex-box to create layout from <div> "grouping" tags. The key is to remember that your CSS layout solution has everything to do with the decisions you make in the HTML  */
article,
.two-col {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-box-pack: justify;
          justify-content: space-between;
}

article {
  padding: 5%;
}

header {
  padding: 0 3%;
  border-right: 1px solid silver;
  margin-right: 3%;
}

.two-col section {
  -webkit-box-flex: 1;
          flex: 1;
  /*better than declaring width if you require equal columns*/
}


/* example layout mediaquery */
@media only screen and (max-width: 768px) {
  article,
  .two-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  header {
    border-right: none;
    margin: 0;
    padding: 0;
  }
}


/**********
CSS Type & Design - "The simple stuff" 
************/

h1,
h2,
h3 {
  font-family: 'Raleway';
  margin-top: 0;
  font-weight: 300;
}

h1 {
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  font-size: .9em;
  letter-spacing: .5em;
  font-weight: 600;
  padding: 5px 10px;
  color: #696969;
  background-color: #ededed;
}

h3 {
  padding-right: .5em;
  font-weight: 600;
  font-size: .8em;
  /*  flexbox is handy here too  */
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center
}

h3 strong {
  font-size: 1.5em
}

p,
li {
  font-family: Georgia;
}

p {
  text-align: center;
}

a {
  font-family: 'Raleway';
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .2em;
  /* links can be made into decorative buttons*/
  display: block;
  text-decoration: none;
  background-color: #333;
  color: white;
  margin: 30px 0;
  padding: 10px 0;
  box-shadow: inset 0 0 0 2px white, 0 0 0 1px black;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

a:hover {
  background: white;
  color: black;
  box-shadow: inset 0 0 0 4px silver, 0 0 0 1px silver;
}

ol,
ul {
  list-style-type: none;
  padding: 0;
  margin:0;
  font-size: .85em;
  line-height: 1.5;
}

li {
  margin-bottom: 1em;
}


.two-col section:first-child h2 {
  margin-right: 2%;
}

.two-col ol strong {
  display: block;
}


/* example iPhone type design tweaking for single columns */

@media only screen and (max-width: 768px) {
  /* A fun CSS hack to convert list of skills to comma separated paragraph.   */
  .two-col ul li {display: inline;}
  .two-col ul li:after {content: ","}
  .two-col ul li:last-child:after {content: "."}
  
  
  .two-col ol li {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    margin-bottom: .2em;
  }
  
  .two-col li {
    font-size: .85em;
  }
  
  h1 {
    text-align: center;
    font-size: 3em;
    margin-bottom: 0;
  }
  h3 {
    display: block;
    text-align: center;
  }
  h3 strong {
    display: block;
    margin-top: .5em;
  }
  a {
    display: inline-block;
    width: 48%;
    margin-top: 24px;
    margin-bottom: 0;
  }
  a:nth-of-type(1) {
    margin-right: 1%;
  }
  a:nth-of-type(2) {
    margin-left: 1%;
  }
  h2 {
    background-color: transparent;
    color: silver;
    font-weight: 300;
    font-size: 2em;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 0;
  }
}