@import "bourbon";
@import "neat";
$base-font-family: 'Libre Baskerville', serif;
$heading-font-family: 'Archivo Narrow', sans-serif;
$subtle-border: 1px dashed tint(gray, 50%);
$primary-color: adjust-hue(coral, -125deg);
@mixin element-border($border-width: 1px, $border-color: gray, $padding: 1em) {
  border: $border-width solid tint($border-color, 50%);
  padding: $padding;
}

/////
.old-school {
  border: 4px solid gray;
  border-radius: 3px;

  ul li {
    /* float: left; */
    /* width: calc(100% / 6); */
    
    /* @include span-columns(2); */

    border: 1px solid tint(gray, 70%);
    padding: 1em;
    text-align: center;
    
    &:last-of-type {
      @include omega;
    }
  }
}

.new-school {
  border: 4px solid orange;
  border-radius: 3px;

  ul {
    /* display: flex; */
    /* flex-wrap: wrap; */
    justify-content: space-around;
    text-align: center;
    
    & li {
      border: 1px solid tint(orange, 50%);
      flex: 1 0 auto;
      padding: 1em;
      
      /*&:not(:last-of-type) {
        margin-right: 1.5em;
      }*/
    }
  }
}

.flex-content {
  border: $subtle-border;
  padding: 3px;
  display: flex;
  margin-top: 1em;
  text-align: center;

  li {
    @include element-border(1px, $primary-color);
    flex: 1;
    font-family: monospace;
  }
}

.flex-direction {
  &.column {
    flex-direction: column;
  }
}

.flex-justification {
  border: $subtle-border;
  height: 200px;
  padding: 3px;
  justify-content: flex-start;
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  
  align-items: flex-start;
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
  /* align-items: stretch; */ //default
  
  li {
    flex-grow: unset;
  }
  
 /* li:nth-child(2) {
    align-self: flex-end;
    background-color: $primary-color;
    color: white;
  }*/
}

.flex-order {
  @for $i from 1 through 6 {
    li:nth-child(#{$i}) {
      order: #{$i}; //by default each flex-item has an order value of 0
    }
  }

   li:nth-child(3) {
    background-color: $primary-color;
    color: white;
    order: 0;
  }
}

.flex-grow {
  li:nth-child(2) {
    background-color: $primary-color;
    color: white;
    flex-grow: 4;
    //default value is 0
    //this child will take up twice as much space as the others.
  }
}

.flex-basis {
  li {
    flex-shrink: 0;
    flex-basis: 40%;
    //This defines the default size of an element before the remaining space is distributed.
  }
  
  li:nth-child(2) {
    background-color: $primary-color;
    color: white;
    flex-shrink: 1;
    //This defines the ability for a flex item to shrink if necessary.
  }
}

.flex-shrink {
  li {
    /* flex-basis: 800px; */
    flex: 1 0 500px;
  }
  
  li:nth-child(2) {
    background-color: $primary-color;
    color: white;
    flex-shrink: 1;
  }
}

.flex-shorthand {
  flex-wrap: wrap;
  
  li {
    flex: 1;
  }
  
  
  li:nth-child(2) {
    flex: 6;
  }
}
/////

body {
  font-family: $base-font-family;
  line-height: 1.5;
}

.wrapper-container {
  background-color: $primary-color;
  
  h1 {
    color: adjust-hue($primary-color, -60%);
  }
  
  p {
    color: white;
  }
}

a {
  border-bottom: 1px solid $primary-color;
  font-family: $heading-font-family;
  font-size: 1.1em;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
  transition: border-bottom-width .15s;
  
  &:hover,
  &:active {
    border-bottom-width: 5px;
  }
}

img {
  max-width: 100%;
  margin-bottom: 2em;
}

pre {
  background-color: tint(gray, 95%);
  border-radius: 3px;
  font-family: monospace;
  font-size: 1.25em;
  line-height: 1.5;
  margin-top: 1em;
  overflow-y: scroll;
  padding: 1em;
  border: 1px solid tint(gray, 75%);
}

.container {
  @include outer-container;
  color: #666;
  padding: 3em;
}

.leadin {
  font-size: 1.75em;
  line-height: 1.6;
  margin: 6em 0;
  
  h1 {
    font-size: 1.35em;
    margin-bottom: .5em;
  }
  
  p {
    margin-bottom: 1em;
  }
}

.leadin,
p {
  max-width: 800px;
}

section {
  margin-top: 6em;
}

h1,
h3,
p {
  margin-bottom: .75em;
}

h1,
h3 {
  color: $primary-color;
  font-family: $heading-font-family;
  font-weight: bold;
}

h1 {
  font-size: 1em;
  letter-spacing: 1px;
  margin-bottom: 0;
  text-transform: uppercase;
}

h3 {
  color: #666;
  font-size: 2em;
  font-weight: normal;
  letter-spacing: .35px;
  line-height: 1.3;
  margin-bottom: 1em;
}

nav {
  font-family: monospace;
  padding: 3em;
  position: relative;
  
  &:before {
    @include position(absolute, 0 null null 0);
    background: tint(gray, 65%);
    content: "nav";
    padding: .25em;
  }
  
  ul {
    @include clearfix;
    border: $subtle-border;
    padding: 2px;
    position: relative;
    
    &:before {
      @include position(absolute, 0 null null 0);
      background: tint(gray, 65%);
      content: "ul";
      padding: .25em;
    }
  }
  
  li {
    position: relative;
    
    &:before {
      @include position(absolute, 0 0 null null);
      background: tint(gray, 85%);
      content: "li";
      padding: .25em;
    }
  }
}

.external-links {
  li {
    font-size: em(14);
    line-height: 1.33;
    margin-bottom: 1em;
    
    &:not(:last-of-type) {
      margin-right: $gutter;
    }
    
    p {
      margin-top: .5em;
    }
  }
}

footer {
  background-image: url("https://media.giphy.com/media/aRIJMeRvt0g6s/giphy.gif");
  border-top: 6px solid $primary-color;
  border-radius: 3px;
  background-size: 25%;
  display: flex;
  justify-content: center;
  margin-top: 3em;
  height: 290px;
}