styles.sass

// COLORS
$purple: #7d5ac5
$soft-purple: #aa86f1
$grayish: #fafafa
$gray: #8d8d8d
$dark-gray: #2b2929

$html: #e7572f
$css: #0b86d8
$js: #e9d227
$react: #0dc2e2
$vue: #43a579
$angular: #c73739
$api: #21bd9d
$bootstrap: #7952B3
$tailwind: #38B2AC

$white: rgb(255, 255, 255)
$black: rgb(0, 0, 0)

// SIZES
$mobile: 375px
$tablet: 768px
$desktop: 1440px

// FONTS
@import url(https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&display=swap)

$base-font-family: 'Inter', sans-serif
$base-font-size: 16px

// STYLES 
*
  padding: 0px
  margin: 0px
  box-sizing: border-box

html
  font-size: $base-font-size

body
  font-family: $base-font-family
  background-color: $grayish
  color: $dark-gray
  min-height: 100vh
  background-image: url("./images/bg-pattrn-desktop.svg")
  background-position: center center
  background-size: cover
  background-attachment: fixed

  @media only screen and (max-width: $tablet)    
    background-image: url("./images/bg-pattrn-mobile.svg")

.container
  margin: 0 auto
  padding: 2rem
  min-height: 100vh
  width: 100%
  max-width: 1200px

h1
  font-size: 3rem
  font-weight: 400
  position: relative
  margin-bottom: 2rem

  &::before
    content: ""
    position: absolute
    bottom: -3rem
    left: 0
    width: 5rem
    height: .25rem
    background-color: $purple
    border-radius: .125rem

  a
    color: $dark-gray
    text-decoration: none

    &:hover
      span
        &::after
          transform: translate(3px, -3px)  
          opacity: .2     

    span
      position: relative

      &::after
        content: ""
        position: absolute
        bottom: 1.8rem
        right: -2rem
        background-image: url("https://image.flaticon.com/icons/svg/376/376007.svg")
        background-size: contain
        width: 1.2rem
        height: 1.2rem
        opacity: .1
        transition: .3s ease

  & > span
    text-transform: uppercase
    font-size: 1.5rem
    font-weight: 400

main
  margin: 7rem 0 3rem
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
  grid-gap: 2rem

article
  background-color: $white
  border-radius: 1rem
  overflow: hidden
  box-shadow: 0px 8px 16px rgba(30, 30, 30, .12)

  figure
    position: relative
    height: 100%

    img
      width: 100%
      height: auto     

    .buttons
      display: flex
      margin: 1rem 0 .5rem
      position: absolute
      bottom: 1.5rem
      left: 1.25rem
      width: calc(100% - 3rem)

      a
        padding: 1rem
        text-transform: uppercase
        color: $white
        text-decoration: none
        width: 50%
        text-align: center
        font-weight: 500
        font-family: $base-font-family
        letter-spacing: 2px     
        background-color: $purple
        transition: .3s ease
        flex: 4
        white-space: nowrap

        &:hover
          flex: 6

      .project-button
        background-color: $soft-purple
        border-radius: 0 2rem 2rem 0
      .code-button
        background-color: $soft-purple
        border-radius: 2rem 0 0 2rem


  figcaption
    padding: 1.25rem 1.5rem 6rem

    h2
      font-size: 1.6rem
      font-weight: 500
      margin-bottom: .5rem
      line-height: 1.2

      a
        color: inherit
        text-decoration: none
      
        &:hover
          color: inherit

    p
      line-height: 1.4
      color: $gray
      margin-bottom: 1rem

    .link-source
      color: $gray
      text-transform: uppercase
      font-weight: 600
      font-size: .8rem
      text-decoration: none

.techs
  list-style: none
  margin-bottom: .5rem

  li
    display: inline-block
    font-weight: 600
    margin-right: .25rem
    text-transform: uppercase

    &.html
      color: $html
    &.css
      color: $css
    &.js
      color: $js
    &.react
      color: $react
    &.vue
      color: $vue
    &.angular
      color: $angular
    &.api
      color: $api
    &.bootstrap
      color: $bootstrap
    &.tailwind
      color: $tailwind