@import "./reset"
@import "../../themes/hugo-theme-lowtech/assets/styles/link"

$size-small: 700px

html
  color: grey

a
  color: grey

html, body
  height: 100%
  overflow: hidden

body
  border: 1rem solid grey
  padding: 1rem

  @media screen and (max-width: $size-small)
    border-width: .5rem
    padding: .5rem
    overflow: auto

footer
  font-size: 10px
  @media screen and (max-width: $size-small)
    text-align: center
.content
  display: flex

  @media screen and (max-width: $size-small)
    flex-direction: column


.info
  flex-basis: 350px
  flex-grow: 0
  flex-shrink: 0
  padding: 1rem
  position: relative
  @media screen and (max-width: $size-small)
    padding: .5rem .5rem 2rem .5rem
    text-align: center
    margin: 0 auto
    flex-basis: inherit

.links
  position: fixed
  bottom: 1.5rem
  left: 3rem
  width: 350px
  display: flex
  flex-direction: column
  padding-bottom: 2rem
  a
    padding-top: 1rem

  @media screen and (max-width: $size-small)
    position: relative
    padding-bottom: 0

.portfolio
  display: flex
  flex-wrap: wrap
  justify-content: center
  overflow: auto
  padding: 0
  list-style-type: none
  background-color: white
  height: calc(100vh - 4rem)
  flex: auto


  @media screen and (max-width: $size-small)
    overflow: hidden
    height: 100%

  ul
    list-style-type: none
    margin: 0
    padding: 0

  .categories
    display: flex
    justify-content: center
    flex-wrap: wrap
    margin: 2rem 3rem
    text-align: left
    width: 100%

    li
      display: inline
      margin: 0 1rem
      a
        padding: .5rem
        display: block

        &.actif
          font-weight: bold

  .projets
    display: flex
    justify-content: center
    flex-wrap: wrap

  .projet
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.5rem
    
    .item
      max-width: 600px
      width: 100%
      height: auto
      margin: 1.5rem 1rem

      @media screen and (max-width: $size-small)
        margin: 2rem .5rem

  .item
    display: inline-block
    background: green
    width: 280px
    height: 280px
    margin: 1rem
    position: relative

    @media screen and (max-width: $size-small)
      margin: .5rem

    &:hover .description
      opacity: .9

    .description
      position: absolute
      top: 0
      left: 0
      bottom: 0
      right: 0
      background: white
      border: 1rem solid grey
      opacity: 0
      padding: 1rem
      text-align: center
      display: flex
      flex-direction: column
      justify-content: center

      h2
        margin-top: 0