@font-face {
  font-family: 'EuclidSquare';
  src: url('../fonts/EuclidSquare-Bold-WebS.woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

:root {
  /* Colors */
  --brand-blue: hsl(219, 82%, 56%);
  --brand-green: hsl(156, 68%, 50%);
  --brand-green-dark: hsl(156, 68%, 30%);
  --link-blue: hsl(219, 82%, 68%);
  --black: hsl(0, 0%, 7%);
  --gray-dark: hsl(0, 0%, 12%);
  --gray: hsl(0, 0%, 50%);
  --gray-light: hsl(0, 0%, 80%);
  --white: hsl(0, 0%, 90%);

  --primary: var(--brand-green);
  --secondary: var(--brand-blue);

  /* Typography */
  --heading: 'EuclidSquare', sans-serif;
  --body: 'Poppins', sans-serif;
  --accent: 'Source Code Pro', monospace;

  /* Padding */

  /* Transitions */
  --transition-default: .2s ease;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading);
}

h1 {
  font-size: 2.8125rem;
}

h2 {
  font-size: 2.25rem;
}

p, a, li {
  font-family: var(--body);
}

code, pre {
  font-family: 'Source Code Pro', monospace;
}

.btn {
  background-color: var(--primary);
  border-radius: .5rem;
  color: var(--gray-dark);
  display: inline-block;
  font-weight: 600;
  padding: .75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  transition: var(--transition-default);

  &:hover {
    background-color: var(--brand-green-dark);
  }

  &.btn--secondary {
    color: var(--gray-light);
    background-color: var(--dark-light);
    border: solid 3px var(--gray-light);
    padding: .625rem 1.5rem;

    &:hover {
      color: var(--gray);
      border-color: var(--gray);
    }
  }

}

.back-btn {
  align-items: center;
  display: inline-flex;

  &:hover {
    a {
      text-decoration: underline;
    }
  }

  svg {
    margin-right: .25rem;

    path {
      stroke: var(--link-blue);
    }
  }

  a {
    color: var(--link-blue);
    font-weight: 600;
    text-decoration: none;

  }
}

body {
  background-color: var(--black);
}

header, footer {
  align-items: center;
  display: flex;
  height: 80px;
  padding: 1.5rem;
}

header {
  border-bottom: solid 3px var(--gray-dark);
  justify-content: space-between;

  .wordmark {
    color: var(--white);
    font-family: var(--heading);
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition-default);

    &:hover {
      color: var(--gray);
    }

    .wordmark__word {
      display: block;

      &:first-of-type {
        margin-bottom: -6px;
        margin-left: -3px;
      }
    }
  }

  .menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: right;
    height: 50px;
    margin-right: -.45rem;
    position: relative;
    width: 50px;

    &:hover {
      .menu-icon__bar {
        background-color: var(--gray);
      }
    }

    &.open {
      .menu-icon__bar {
        &:first-of-type {
          top: 50%;
          transform: translate(-50%, -50%) rotate(45deg);
        }

        &:last-of-type {
          top: 50%;
          transform: translate(-50%, -50%) rotate(-45deg);
        }
      }
    }

    .menu-icon__bar {
      background-color: var(--white);
      height: 3px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: var(--transition-default);
      left: 50%;
      width: 2.25rem;

      &:first-of-type {
        top: 40%;
      }

      &:last-of-type {
        top: 60%;
      }
    }
  }
}

.main-nav-menu {
  align-items: center;
  background-color: var(--gray-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  position: fixed;
  left: -100vw;
  top: 80px;
  transition: .3s ease-out;
  width: 100%;
  z-index: 1;

  &.open {
    left: 0;

    .main-nav-menu__link {
      transform: translate(0%, 0%) !important;
    }
  }

  .main-nav-menu__nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    width: 100%;


    .main-nav-menu__link {
      color: var(--gray-light);
      font-family: var(--heading);
      font-size: 2.25rem;
      text-decoration: none;
      transform: translate(-50rem, 0%);
      margin-bottom: .625rem;
      position: relative;

      &:hover {
        text-decoration: underline;
      }

      &:first-of-type {
        margin-top: -.35rem;
      }

      &:nth-of-type(1) {
        transition: var(--transition-default);
      }

      &:nth-of-type(2) {
        transition: .3s ease-out;
      }

      &:nth-of-type(3) {
        transition: .4s ease-out;
      }

      &:nth-of-type(4) {
        transition: .5s ease-out;
      }

      &:nth-of-type(5) {
        transition: .6s ease-out;
      }
    }
  }
}

.main-heading {
  color: var(--primary);
  padding-bottom: 3rem;
  padding-top: 3rem;
  text-align: center;
}

main {
  min-height: calc(100vh - 11.5rem);
  margin-bottom: 1.5rem;

  @media screen and (min-width: 600px) {
    min-height: calc(100vh - 13rem);
    margin-bottom: 3rem;
  }
}

.home-hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 6rem 1.5rem;
  text-align: center;

  @keyframes textShine {
    0% {
      background-position: 0% 50%;
    }

    100% {
      background-position: 100% 50%;
    }
  }

  .home-hero__heading {
    color: var(--white);
    background: linear-gradient(
      to right,
      var(--brand-blue) 20%,
      var(--link-blue) 50%,
      var(--brand-green) 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100% auto;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    margin-bottom: 1.5rem;
    max-width: 475px;

    @media screen and (min-width: 950px) {
      max-width: unset;
    }
  }
}

.generic-content-block, .contact-block {
  padding: 1.5rem 1.5rem;
}

.generic-content-block {
  background-color: var(--gray-dark);
  border-radius: .75rem;
  color: var(--gray);
  margin: 0 1.5rem 1.5rem;
  max-width: 37.5rem;

  @media screen and (min-width: 600px) {
    margin: 0 auto 6rem;
    padding: 3rem;
  }

  .generic-content-block__content {
    h2 {
      color: var(--gray-light);
      margin-bottom: 1rem;
    }

    p {
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 1.5rem;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    li, a, code {
      font-size: 1rem;
      line-height: 1.8;
    }

    a {
      color: var(--link-blue);
    }
  }
}

.contact-block {
  align-items: center;
  display: flex;
  flex-direction: column;

  .contact-block__heading {
    color: var(--gray);
    margin-bottom: 1.5rem;
    text-align: center;
  }
}

article {
  color: var(--gray-light);
  margin: 0 auto 1.5rem;
  max-width: 37.5rem;
  padding: 0 1.5rem;

  .main-heading {
    text-align: left;
    text-wrap: balanced;
  }

  .post-meta {
    font-family: var(--accent);

    svg  {
      margin-right: .5rem;

      path {
        stroke: var(--gray-light);
      }
    }

    .post-meta__publish-date,
    .post-meta__tags,
    .post-meta__read-time {
      align-items: center;
      display: flex;
      margin-bottom: .5rem;
    }
  }

  .post-body {
    margin-bottom: 3rem;
  }

  .project-body {
    h2:first-of-type {
      margin-top: 0;
    }
  }


  h2, h3, h4, h5, h6 {
    color: var(--white);
    margin-bottom: 1rem;
    margin-top: 3rem;
  }

  .heading-anchor {
    display: none;
  }

  ul, ol, p, pre {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
  }

  a, code {
    font-size: 1rem;
    line-height: 1.8;
  }

  a {
    color: var(--link-blue);
  }

  code {
    color: var(--brand-green);
  }

  pre {
    background-color: var(--gray-dark);
    border-radius: .75rem;
    padding: 1.5rem;
    overflow-x: scroll;
  }
}

.card-list {
  display: flex;
  flex-direction: column;
  margin: 0 auto 1.5rem;
  max-width: 50rem;
  padding: 0 1.5rem;

  .card {
    background-color: var(--gray-dark);
    border-radius: .75rem;
    color: var(--white);
    margin-bottom: 1.5rem;
    padding: 1.5rem;

    &:last-of-type {
      margin-bottom: 0;
    }

    .card__info {
      align-items: left;
      display: flex;
      flex-direction: column;
      margin-bottom: 1.5rem;

      .tag-list {
        color: var(--gray);
        display: flex;
        font-family: var(--accent);
        margin-top: 1rem;

        .pill {
          border: solid 1px var(--gray);
          border-radius: .5rem;
          font-size: .75rem;
          font-weight: 600;
          margin-right: .5rem;
          padding: .375rem .5rem;

          &:last-of-type {
            margin-right: 0;
          }
        }
      }

      @media screen and (min-width: 600px) {
        margin-bottom: 1rem;
        align-items: center;
        flex-direction: row;

        & .tag-list {
          margin: 0 0 0 1.5rem;
        }
      }
    }

    .card__buttons {
      .btn {
        margin-bottom: .5rem;
        width: 100%;

        &:last-of-type {
          margin-bottom: 0;
        }
      }

      @media screen and (min-width: 394px) {
        .btn {
          margin-bottom: 0;
          margin-right: .5rem;
          width: calc(50% - .25rem);

          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
}

.music-list {
   align-items: center;
   display: flex;
   flex-direction: column;
   margin: 0 1.5rem 1.5rem;

   .music-list__release {
      margin-bottom: 3rem;
      max-width: 37.5rem;
      width: 100%;

      &:last-of-type {
        margin-bottom: 0;
      }

      @media screen and (min-width: 600px) {
        &:last-of-type {
          margin-bottom: 3rem;
        }
      }

      .release-iframe-wrapper {
        height: 0;
        left: 0;
        padding-bottom: 100%;
        position: relative;
        width: 100%;

        iframe {
          border: 0;
          border-radius: .75rem;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
      }
   }
}

footer {
  border-top: solid 3px var(--gray-dark);
  color: var(--gray-light);
  display: flex;
  font-family: var(--body);
  justify-content: space-between;

  .social-links {
    align-items: center;
    display: flex;

    .social-links__social-link-icon {
      margin-right: 1rem;

      &:last-of-type {
        margin-right: 0;
      }

      &:hover {
        svg path {
          fill: var(--gray);
        }
      }

      svg path {
        fill: var(--gray-light);
        transition: var(--transition-default);
      }
    }
  }
}