global.scss

$ease: cubic-bezier(0.77, 0, 0.175, 1);
$transition: all $ease 0.25s;
$body-font: 'Inter', sans-serif;
$accent-font: 'overpass mono', monospace;

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

:root {
  --plyr-color-main: #00ffcc;
}

::selection {
  background: pink;
}

html {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow-x: hidden;
}

body {
  background: #111;
  font-family: $body-font;
  overflow-x: hidden;
  
}

// .page-enter-active,
// .page-leave-active {
//   transition: opacity 0.5s;
// }
// .page-enter,
// .page-leave-to {
//   opacity: 0;
// }

// .home-enter-active,
// .home-leave-active {
//   transition: opacity 0.5s;
// }
// .home-enter,
// .home-leave-active {
//   opacity: 0;
// }

// .layout-enter-active,
// .layout-leave-active {
//   transition: opacity 0.5s;
// }
// .layout-enter,
// .layout-leave-active {
//   opacity: 0;
// }

// #__nuxt, #__layout {
//   height: auto;
//   min-height: 100%;
//   width: 100%;
//   max-width: 100vw;
//   position: relative;
// }


.hi {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 219px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  cursor: none;
}

.main--wrapper {
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  display: grid;
  grid-template-rows: 1fr auto;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.95;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #111;
  pointer-events: none;
}

header,
section,
article,
footer,
.page--wrapper div nav {
  display: grid;
  grid-template-columns: 2rem repeat(2, 1fr) 2rem;
  grid-template-rows: auto;
  grid-template-areas: 'aside-l content content aside-r';
  align-items: baseline;
  z-index: 0;
  width: 100%;
  max-width: 2500px;
  justify-content: center;
  margin: 0 auto;

  @media (min-width: 1024px) {
    grid-template-columns: 0.5fr 1.5fr 1.5fr 0.5fr;
  }
}

header,
section,
footer,
article {
  .container {
    padding: 4rem 0;
    grid-area: content;
  }
}

.page--wrapper div nav {
  .container {
    padding: 4rem 0;
    grid-area: content;
  }
}

header {
  // padding: 0 2rem;
  padding: 2rem 0 0;
  align-items: center;
  height: auto;

  @media (min-width: 64rem) {
    min-height: 100vh;
  }
}

footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

.scroll {
  // outline: 10px solid pink;
}

h1 {
  letter-spacing: 0.2rem;
  font-weight: 300;
  color: white;
  font-size: clamp(2rem, calc(8vw - 2rem), 3.5rem);
  line-height: clamp(2.625rem, calc(10vw - 2rem), 4.125rem);
  margin-bottom: clamp(2rem, calc(8vw - 2rem), 4rem);
  max-width: 24ch;

  section.content & {
    margin-bottom: clamp(2rem, calc(8vw - 2rem), 4rem);
  }

  span {
    &:hover {
cursor: se-resize;
    }
    
  }
}

h2 {
  letter-spacing: 0.2rem;
  font-weight: 300;
  color: white;
  font-size: clamp(2rem, calc(8vw - 2rem), 3rem);
  line-height: clamp(2.125rem, calc(10vw - 2rem), 4.125rem);
  margin-bottom: clamp(1.5rem, calc(8vw - 2rem), 2rem);
}

a.cta {
  position: relative;
  color: white;
  text-decoration: none;
  font-weight: 100;
  border-bottom: 1px solid cyan;
  padding-bottom: 0.25rem;
  transition: $transition;
  margin-bottom: 2rem;

  &:hover {
    border-bottom: 1px solid pink;
  }

  &:visited {
    color: white;
  }
}

p {
  color: white;
  // max-width: 65ch;
  margin-bottom: 1.25rem;
  font-size: clamp(1rem, calc(8vw - 2rem), 1.5rem);
  line-height: clamp(1.625rem, calc(10vw - 2rem), 2.5rem);
  font-weight: 300;
  letter-spacing: 0.1rem;
  max-width: 75ch;;

  &.large {
    // font-size: 2rem;
    // line-height: 4.5rem;/img/metrics.5128634c.png
    font-size: clamp(2rem, calc(8vw - 2rem), 4rem);
    line-height: clamp(3rem, calc(10vw - 2rem), 6rem);
    margin: 4rem 0 0;
    font-weight: 200;
    letter-spacing: 0.2rem;
  }

  &.small {
    font-size: clamp(1rem, calc(8vw - 2rem), 1.25em);
    line-height: clamp(1.625rem, calc(10vw - 2rem), 2.25rem);
  }

  &:last-of-type:not(:only-of-type) {
    margin-bottom: 0;
  }

  a {
    position: relative;
    color: white;
    text-decoration: none;
    font-weight: 100;
    border-bottom: 1px solid cyan;
    padding-bottom: 0.25rem;
    transition: $transition;

    &:hover {
      border-bottom: 2px solid pink;
    }

    &:visited {
      color: white;
    }
  }

  .nuxt-content & {
    max-width: 85ch;
  }
} 

ul {
  list-style: none;
  margin-bottom: 2rem;

  & + * {
    margin-block-start: 12rem;
  }
  
  li {
    font-size: clamp(1rem, calc(8vw - 2rem), 1.25em);
    line-height: clamp(1.625rem, calc(10vw - 2rem), 2.25rem);
    color: white;
    padding: 0.5rem;

    &::marker {
      display: inline-block;
        content: "-";
        color: pink;
      }

  }

  
}

section.content h1 a {
  display: none;
}

section#skills {

  @media (min-width: 64rem) {
    // height: 100vh;
  }

}

.split {
  display: flex;
  flex-direction: column;

  @media (min-width: 64rem) {
    flex-direction: row;
    gap: 6rem;
    justify-content: space-between;
  }

  .content {
    @media (min-width: 64rem) {
      width: 40%;
    }
  }

  .details {
    @media (min-width: 64rem) {
      width: 50%;

      ul {
        max-width: 100%;;
      }
    }
  }
}


section#work .container > * + *:not(:first-of-type) {

  margin-block-start: 12rem;

  @media (min-width: 1024px) {

    // &:first-of-type {
    //   margin-block-start: 8rem;
    // }
  
  }
}

section.work--sample {
  position: relative;
  display: flex;
  flex-direction: column;

    // @media (min-width: 1024px) {
    //   display: grid;
    //   grid-template-columns: repeat(2, 1fr);
    //   grid-template-rows: auto;
    //   grid-template-areas:
    //     'header content'
    //     'work work';
    // }

    .copy {
      display: flex;
      flex-direction: column;

      @media (min-width: 1024px) {
        flex-direction: row;
      }
    }

    .intro {
      grid-area: header;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding-right: 2rem;
      flex: 1 0 50%;

      h2 {
        // max-width: 62ch;
      }
    }

    .details {
      grid-area: content;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .work {
      grid-area: work;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // flex: 1 0 100%;
      width: 100%;
      height: auto;
      gap: 1rem;
      margin-top: 4rem;

      .image {
        display: inline-flex;
        width: 100%;

        img {
          width: 100%;
          max-width: 100%;
          height: auto;
        }

        &--full {

          img {

          }
        }

        &--half {
          @media (min-width: 1024px) {
            max-width: calc(50% - 0.5rem);
          }
        }

        &--third {
          @media (min-width: 1024px) {
            max-width: calc(33.333% - 0.7rem);
          }
        }
      }
    }

    .plyr__video-embed {
      position: relative;
      left: auto;
      right: auto;
      width: 100%;
      height: auto;

      iframe {
        width: 100%;

        @media (min-width: 1024px) {
          min-height: var(--minHeight);
          min-width: var(--minWidth);
        }
      }
    }

    &__split {
      flex-direction: column;
      align-items: flex-start;

      @media (min-width: 1024px) {
        flex-direction: row;
      }

      .copy {
        @media (min-width: 1024px) {
          width: 50%;
            flex-direction: column;
          }
      }   
      
      .work {
        @media (min-width: 1024px) {
            margin-top: 0;
            width: 50%;
          }
      }

      .image {

        &--full {
          padding: 0 30%;
          // max-height: 600px;
        }
      }

      .plyr__video-embed {
        margin-bottom: -15%;
        margin-top: -9%;
      }
    }
}

ul {
  &.columns {
    list-style: none;
    columns: 2;
    max-width: 100%;

    @media (min-width: 48rem) {
    columns: 3;
    }

    li {
      font-family: 'Inter', sans-serif;
        font-size: clamp(1rem, calc(8vw - 2rem), 1.5rem);
        line-height: clamp(1.625rem, calc(10vw - 2rem), 2.5rem);
        font-weight: 300;
        letter-spacing: 0.1rem;
      color: white;
    }
  }
}

small {
  font-family: $accent-font;
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
  color: white;

  &::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: -1.5rem;
    width: 1rem;
    height: 1px;
    background-color: #c4c4c4;
  }

  footer & {
    margin-bottom: 0;
    &::before {
      display: none;
    }
  }
}

.tags {

  &--wrapper {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1rem 0;
    width: 85ch;
    border-top: 1px solid #2C3539;

    .tag {

      a {
        position: relative;
        color: white;
        text-decoration: none;
        font-weight: 100;
        border-bottom: 1px solid cyan;
        padding-bottom: 0.25rem;
        transition: $transition;
    
        &:hover {
          border-bottom: 2px solid pink;
        }
    
        &:visited {
          color: white;
        }
      }
    }
  }
}


// #player {


//   iframe {
//     position: relative;
//   }
// }

.plyr--video {
  width: 100%;
  height: auto;
}