@import url('https://fonts.googleapis.com/css?family=Roboto:400,700')
@import fonts

$color-accent: #00BCD4
$color-liked: #EC407A
$color-text: #263238

body
  font-family: 'Roboto', sans-serif
  color: $color-text
h1
  text-align: center
  padding: 50px 0

table
  max-width: 1200px
  width: 100%
  margin: 0 auto
  border: 1px solid $color-text
  border-radius: 0 0 5px 5px
  border-collapse: collapse
  margin-bottom: 2rem

  // position: relative
  // max-height: 70vh
  // overflow-y: auto
thead
  th
    position: sticky
    top: 0
    background: rgba(#fff,.9)
  tr:last-of-type
    th, td
      border-bottom: 2px solid $color-text
tbody
  tr
    transition: all .2s linear
  tr:nth-of-type(even)
    background: rgba($color-accent,.1)

  tr:hover
    background: rgba($color-accent,.5)
    color: darken($color-accent, 30%)

tbody tr.like
  background: rgba($color-liked, .3)
tfoot
  background: #f1f1f1
  text-align: right
  td
    padding-right: 30px
th
  padding: 15px
td
  padding: 12px

.overlay-notification
  display: none //flex
  justify-content: center
  align-items: center
  opacity: 0
  position: fixed
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  width: 250px
  height: 250px
  background: rgba(#fff,.9)
  border-radius: 20px
  font-size: 3rem
  transition: .3s ease-in-out all

.overlay-notification.visible
  display: flex
  opacity: 1

.columns
  max-width: 1200px
  display: flex
  margin: 0 auto
  padding-bottom: 25px
  justify-content: center
  button
    border: 1px solid $color-text
    padding: 4px 10px
    border-radius: 10px
    margin: 0 5px
    font-weight: bold
    transition: .3s all ease-in-out
    background: rgba($color-text,0)
    &.active
      background: $color-text
      color: #fff