@import "tachyons/css/tachyons";
@import "syntax";

.header ul {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

/* menu icon */

.header .menu-icon .navicon {
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #ebdbb2;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 6px;
}

.header .menu-icon .navicon:after {
  top: -6px;
}

/* menu btn */
.header .menu-btn:checked ~ .menu-icon {
  .navicon {
    background: transparent;
  }
  .navicon:before {
    transform: rotate(-45deg);
  }
  .navicon:after {
    transform: rotate(45deg);
  }
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) {
  .navicon:before,
  .navicon:after {
    top: 0;
  }
}

.header .menu-btn:checked ~ ul {
  max-height: 240px;
}

@media screen and (min-width: 30em) {
  .header ul {
    clear: none;
    float: right;
    max-height: none;
  }
}

.w3-theme-l5 {
  color: #000 !important;
  background-color: #f7fcf5 !important;
}
.w3-theme-l4 {
  color: #000 !important;
  background-color: #e4f4dc !important;
}
.w3-theme-l3 {
  color: #000 !important;
  background-color: #c9e9ba !important;
}
.w3-theme-l2 {
  color: #000 !important;
  background-color: #aedd97 !important;
}
.w3-theme-l1 {
  color: #000 !important;
  background-color: #94d274 !important;
}
.w3-theme-d1 {
  color: #fff !important;
  background-color: #69bf3e !important;
}
.w3-theme-d2 {
  color: #fff !important;
  background-color: #5da937 !important;
}
.w3-theme-d3 {
  color: #fff !important;
  background-color: #519430 !important;
}
.w3-theme-d4 {
  color: #fff !important;
  background-color: #467f29 !important;
}
.w3-theme-d5 {
  color: #fff !important;
  background-color: #3a6a22 !important;
}

.w3-theme-light {
  color: #000 !important;
  background-color: #f7fcf5 !important;
}
.w3-theme-dark {
  color: #fff !important;
  background-color: #3a6a22 !important;
}
.w3-theme-action {
  color: #fff !important;
  background-color: #3a6a22 !important;
}

.w3-theme {
  color: #fff !important;
  background-color: #79c753 !important;
}
.w3-text-theme {
  color: #79c753 !important;
}
.w3-theme-border {
  border-color: #79c753 !important;
}
.w3-hover-theme:hover {
  color: #fff !important;
  background-color: #79c753 !important;
}
// HERO
#hero {
  text-shadow: 2px 2px 3px black;
}

// POSTS
.main-content {
  a {
    @extend .link, .near-black, .ph1, .br2, .w3-text-theme;
  }

  p code {
    @extend .ph1, .blue, .fw5;
  }

  div.highlight pre.chroma {
    @extend .br2, .overflow-x-scroll;
  }

  dl {
    @extend .ph5;
  }
  dt {
    @extend .b;
  }
  dd p {
    @extend .ma0;
  }
}
footer {
  a {
    @extend .link, .near-white, .underline;
  }
}

// Title font
@font-face {
  font-family: "BerkshireSwash-Regular";
  src:
    url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
    url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
      format("svg"),
    url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
    url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
      format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

.berkshire-swash {
  font-family: "BerkshireSwash-Regular";
}

// TABLES
table {
  @extend .w-100, .mw8, .center, .pv2;
  tr {
    @extend .stripe-dark;
  }
  th {
    @extend .w3-theme-l4;
  }
  th,
  td {
    @extend .ph3, .pv2;
  }
}