#dailyCSSImage.page
  .page__head
    h1 Calendar
    h4 Daily CSS Images :: Day 09
  .page__body
    .calendar
      .back
        .hole
      .day
        .top
          .card
            div 1
        .bottom
          .card
            div 1

@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700,700i|Space+Mono')

body
  font-family: 'Space Mono', monospace
  background-image: linear-gradient(to top, #ccc, #eee)

  
$blue: #2196F3
  
.calendar
  position: relative
.back
  position: absolute
  top: -140px
  left: -100px
  width: 200px
  height: 40px
  background-color: #ccc
  border-radius: 10px 10px 0 0
  box-shadow: inset 0 2px 0 0 rgba(#000,.1),inset 0 3px 0 0 rgba(#fff,.2)
.hole
  position: absolute
  top: 50%
  left: 50%
  width: 16px
  height: 16px
  background-color: #fff
  border-radius: 50%
  box-shadow: 0 2px 0 0 rgba(#000,.2)
  transform: translate(-50%,-50%)
.day
  perspective: 300px
  width: 200px
  height: 200px
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  
.card
  position: relative
  display: block
  width: 200px
  height: 100px
  background-color: $blue
  font-size: 8rem
  font-weight: 700
  line-height: 100px
  text-align: center
  color: #fff
  
.top .card > div
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,0%)
  
.bottom .card > div
  position: absolute
  left: 50%
  transform: translate(-50%,-50%)
    
.top
  position: relative
  height: 100px
  border-radius: 10px 10px 0 0
  overflow: hidden
  transform-origin: 50% 100%
  transform: rotateX(-30deg)
  box-shadow: 0 4px 10px rgba(0,0,0,.3)
  z-index: 2
  & > .card
    border-radius: 10px 10px 0 0
    box-shadow: inset 0 2px 0 0 rgba(#000,.3),inset 0 3px 0 0 rgba(#fff,.2)
  &:after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100px
    z-index: 3
    background-image: linear-gradient(to bottom, transparent, transparent 80%, rgba(0,0,0,.2))
  
.bottom
  position: relative
  height: 100px
  overflow: hidden
  transform-origin: 50% 0
  transform: rotateX(20deg)
  box-shadow: 0 4px 10px rgba(0,0,0,.3)
  border-radius: 0 0 10px 10px
  z-index: 4
  & > .card
    border-radius: 0 0 10px 10px
    box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.2)
  
/** Simple Page Style */
.page
  height: 100vh
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  &__head
    flex: 0 1 auto
    text-align: center
    padding: 1rem 0
    h1
      font-family: 'Lobster Two', cursive
      font-size: 4rem
      font-style: italic
      margin: 0
      color: #333
    h4
      font-size: 16px
      font-weight: 400
      margin: 0.5rem 0 0
      color: #777
  &__body
    flex: 1
    display: flex
    justify-content: center
    align-items: center