@import "rails-sass-images"

*
  margin: 0
  padding: 0

body
  color: #333
  background: #f8f8f8
  background-image: inline("noise.png")
  text-align: center
  font: 15px Cuprum, sans-serif
  text-shadow: 1px 1px 0 white

.person
  padding: 10px

.images
  width: 220px
  height: 220px
  position: relative
  margin: 70px auto 80px auto

.mask
  position: absolute
  top: 0
  left: -8px
  +hidpi-inline("mask.png")

.photo
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border-radius: 50%
  background-size: 100% 100%
  box-shadow: 1px 1px 0 white

.images
  perspective: 400px
  cursor: pointer
.mask, .photo
  backface-visibility: hidden
  transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1)
.photo
  transform: rotateY(-180deg)

.name
  font-weight: normal
  font-size: 46px

@import "rails-sass-images"

@mixin no-tap-highlight
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0)

*
  margin: 0
  padding: 0

body
  color: #333
  background: #f8f8f8
  background-image: inline("noise.png")
  text-align: center
  font: 15px Cuprum, sans-serif
  text-shadow: 1px 1px 0 white

.person
  padding: 10px

.images
  width: 220px
  height: 220px
  position: relative
  margin: 70px auto 80px auto

.mask, .photo
  cursor: pointer
  +no-tap-highlight

.mask
  position: absolute
  top: 0
  left: -8px
  +hidpi-inline("mask.png")

.photo
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border-radius: 50%
  background-size: 100% 100%
  box-shadow: 1px 1px 0 white

.images
  perspective: 400px
.mask, .photo
  backface-visibility: hidden
  transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1)
.photo
  transform: rotateY(-180deg)

.name
  font-weight: normal
  font-size: 46px

Fix no tap highlight on mobile
Fix no tap highlight on mobile
