@import url("https://fonts.googleapis.com/css?family=Rubik|Bitter");
@import "flexboxgrid";
@import "colors";
@import "typography";
@import "animation";
@import "layout";
@import "base";
@import "modal";
@import "about";
@import "gallery";

@media (max-width: 47.99em) {
  body .container {
    padding: $vertical-rhythm * 4 $vertical-rhythm;
  }

  nav {
    // Hide menu links between logo and hamburger menu
    div:not(:first-child):not(:last-child) {
      display: none;
    }

    div.nav-toggle a {
      display: inline-block;
    }
  }
}

@media (max-width: 25em) {
  body .container {
    padding: $vertical-rhythm * 4 $vertical-rhythm;
  }

  nav {
    div.logo,
    div.nav-toggle {
      max-width: 50% !important;
    }
  }
}

nav {
  position: absolute;
  z-index: 100;
  bottom: 0;
  width: 100%;
  height: $vertical-rhythm * 2;
  background-color: $white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
  text-align: center;

  h3 {
    margin: 0;
    font-family: $font-body;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  img {
    display: inline-block;
    max-width: 10em;
    max-height: 2.5em;
    vertical-align: middle;
  }

  .logo,
  .nav-toggle {
    visibility: hidden;
  }

  .nav-toggle a {
    display: none;
  }
}

.nav-fixed {
  position: fixed;
  top: 0;
  bottom: auto;
}

.nav-full {
  position: fixed;
  top: 0;
  right: -100vw;
  bottom: 0;
  width: 100vw;
  height: 100%;
  transform: translate(0, 0);
  transition: .25s ease-out;
  background-color: $black;

  a {
    color: $white;

    &:hover {
      color: $accent;
    }
  }
}

.nav-full.active {
  transform: translate(-100vw, 0);
}

main {
  transition: .25s ease-in;
  background-color: $white;

  &.active {
    transform: translate(-100vw, 0);
  }
}

.container {
  max-width: 43.75rem; // 700px
  margin: auto;
  padding: $vertical-rhythm * 4 0 $vertical-rhythm * 4;
}

p {
  margin-bottom: $vertical-rhythm;

  code {
    font-family: $font-code;
  }
}

h1,
h2,
h3 {
  margin-bottom: $vertical-rhythm;
  font-family: $font-header;
  letter-spacing: 2px;
  line-height: 1.45;

  a {
    text-decoration: none;
  }
}

.home-logo {
  margin-bottom: $vertical-rhythm;
}

.posts-list {
  margin: 0 0 $vertical-rhythm;
}

.sub-header,
time {
  @include size(p);
  margin-bottom: $vertical-rhythm;
  color: $storm;
}

.content {
  width: 100%;
  text-align: left;

  time {
    margin-left: 3px;
  }

  a {
    background-image: linear-gradient($accent, $accent);
    background-repeat: repeat-x;
    background-position: 0 95%;
    background-size: 1px 2px;
    text-decoration: none;
    text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white,
    .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white,
    .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white,
    .03em .075em $white, -.03em .075em $white, .06em .075em $white,
    -.06em .075em $white, .09em .075em $white, -.09em .075em $white,
    .12em .075em $white, -.12em .075em $white, .15em .075em $white,
    -.15em .075em $white;

    &:hover {
      color: $accent;
    }
  }
}

.highlight {
  margin: 10px 0;
}

.pagination {
  margin: 50px 0 0;

  &:nth-child(2) {
    float: right;
  }
}

.full {
  top: 0;
  bottom: 0;
  height: 100vh;
}

.blog {
  display: flex;
  min-height: 100vh;

  h2 {
    margin-bottom: 0;
  }

  h3 {
    margin: 0 0 $vertical-rhythm * 2;
    font-family: $font-body;
  }
}

.contact {
  width: 100%;
  padding-bottom: $vertical-rhythm * 2;
  background-color: $smoke;

  form {
    margin-top: $vertical-rhythm;
  }

  .contact-submit {
    position: relative;
  }

  #form-submit {
    display: block;
    width: 50%;
    margin: 0 auto;
  }

  #form-thankyou {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

input {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: $smoke;
  background-color: $white;
  color: $black;

  &[type="submit"] {
    transition: .2s ease-out;
    background-color: $storm;
    color: $white;

    &:hover {
      background-color: $accent;
      color: $white;
      cursor: pointer;
    }
  }
}

textarea {
  @extend input;
  min-height: $vertical-rhythm * 4;
  overflow: auto;
}