$panel-background: rgba(0, 0, 0, .8)

html
  width: 100%
  height: 100%
  margin: 0
  font-size: 16px

body
  position: relative
  width: 100%
  height: 100%
  margin: 0
  font-family: 'Raleway', sans-serif
  cursor: default
  overflow: hidden
  background: black

.no-select
  -webkit-touch-callout: none
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.no-click
  position: absolute
  width: 100%
  height: 100%
  display: none

a
  text-decoration: none
  color: inherit
  font-weight: bold

.square-wrapper
  position: absolute
  display: flex
  width: 100%
  height: 100%
  justify-content: center
  flex-direction: column

  .row
    display: flex
    justify-content: center
    perspective: 1000px

.square
  width: 60vmin
  height: 60vmin
  background: white
  transform-style: preserve-3d
  transition: width 1s ease-in-out, height 1s ease-in-out

.content-wrapper
  position: absolute
  display: flex
  width: 100%
  height: 100%
  justify-content: center
  flex-direction: column
  text-align: center
  color: black
  transition: opacity 1s ease-in-out
  overflow: hidden

  *
    white-space: nowrap

.links a
  padding: 8px
  font-weight: normal !important
  transition: color .3s ease-in-out, background .3s ease-in-out

  &:hover
    background: black
    color: white

.divider:before
  content: "-"

.arrow
  position: absolute
  width: 7.5rem
  height: 7.5rem
  text-align: center
  cursor: pointer
  display: flex
  flex-direction: column
  justify-content: center
  color: white
  transition: opacity 1s ease-in-out

  .home
    display: none

  &.back
    .normal
      display: none

    .home
      display: inline-block

  .icon
    width: 7.5rem
    height: 3.75rem
    font-size: 3rem
    transform: rotate(90deg)

    &:before
      content: "‹"

  .text
    text-align: center
    transition: color .3s ease-in-out, background .3s ease-in-out
    padding: 16px
    margin: -4px

  &:hover
    .text
      background: white
      color: black

  &.top, &.bottom
    left: 50%
    margin-left: -3.75em

  &.left, &.right
    top: 50%
    margin-top: -3.75em

  &.top
    top: 0

  &.left
    left: 0
    transform: rotate(-90deg)

  &.bottom
    bottom: 0

    .icon
      transform: rotate(-90deg)

  &.right
    right: 0
    transform: rotate(90deg)

  &.fake
    visibility: hidden

.page
  position: absolute
  width: 100%
  height: 100%
  box-sizing: border-box
  text-align: center

  &.top
    top: -100%
    margin-top: 2.5rem
    padding-top: 7.5rem
    padding-left: 2.5rem
    padding-right: 2.5rem
    transition: opacity 1s ease-in-out

  &.left
    left: -100%
    margin-left: 2.5rem
    padding-left: 7.5rem
    padding-top: 2.5rem
    padding-bottom: 2.5rem
    transition: opacity 1s ease-in-out

  &.bottom
    bottom: -100%
    margin-bottom: 2.5rem
    padding-bottom: 7.5rem
    padding-left: 2.5rem
    padding-right: 2.5rem
    transition: opacity 1s ease-in-out

  &.right
    right: -100%
    margin-right: 2.5rem
    padding-right: 7.5rem
    padding-top: 2.5rem
    padding-bottom: 2.5rem
    transition: opacity 1s ease-in-out

.page.top
  display: flex
  flex-flow: row wrap

  .edu
    flex: 1
    justify-content: center

    .panel
      background: none
      position: absolute
      top: 0
      width: 100%
      height: 100%
      color: black

    .logo
      width: 100%
      height: 120px
      margin-bottom: 16px

    .name
      font-size: 1.25em
      margin-bottom: 12px

    .date
      font-weight: bold
      margin-bottom: 16px

    .gpa
      font-weight: bold
      margin-bottom: 16px

.page.left
  display: flex
  flex-flow: row wrap

  .prz
    flex: 1 25%

    &:hover
      filter: none
      transform: scale(1, 1)

.page.bottom
  display: flex
  flex-flow: row wrap

  .exp
    flex: 1 50%

.page.right
  display: flex
  flex-flow: row wrap

  .prj
    font-weight: normal !important
    flex: 1 50%

.edu, .prz, .exp, .prj
  display: flex
  flex-direction: column
  justify-content: flex-end
  transition: transform .3s ease-in-out
  transform: scale(.9, .9)
  filter: grayscale(80%)

  .hidden
    display: none

  &:hover
    filter: none
    transform: scale(1, 1)

    .hidden
      display: block

    .panel
      position: absolute
      top: 0
      width: 100%
      height: 100%

  .panel
    position: relative
    background: $panel-background
    padding: 16px
    box-sizing: border-box
    display: flex
    flex-direction: column
    overflow-y: auto
    color: white

    > *
      margin: auto

    ul
      display: inline-block
      width: 60%
      list-style: none
      margin: 0
      padding: 0

      li
        text-align: left
        margin: 12px
        padding: 0 0 0 12px
        border-left: 2px solid grey

  .name
    font-weight: bold

.i-hate-ie
  display: none
  margin-top: 24px
  font-size: 0.75em
  color: red

#edu_kdmhs
  background: #98D5F4 url('img/edu/bg/kdmhs.jpg') no-repeat bottom
  background-size: contain
  .logo
    background: url('img/edu/logo/kdmhs.png') no-repeat center
    background-size: contain

#edu_ncta
  background: #958E31 url('img/edu/bg/ncta.jpg') no-repeat bottom
  background-size: contain
  .logo
    background: url('img/edu/logo/ncta.png') no-repeat center
    background-size: contain

#edu_kams
  background: #F1AE32 url('img/edu/bg/kams.jpg') no-repeat bottom
  background-size: contain
  .logo
    background: url('img/edu/logo/kams.png') no-repeat center
    background-size: contain

#prz_2010_koi
  background: url('img/prz/2010_koi.jpg') center
  background-size: cover

#prz_2011_kyio
  background: url('img/prz/2011_kyio.jpg') center
  background-size: cover

#prz_2014_gdghack
  background: url('img/prz/2014_gdghack.png') center
  background-size: cover

#prz_2015_usaco
  background: url('img/prz/2015_usaco.jpg') center
  background-size: cover

#prz_2016_utd
  background: url('img/prz/2016_utd.jpg') center
  background-size: cover

#prz_2016_hackdfw
  background: url('img/prz/2016_hackdfw.jpg') center
  background-size: cover

#prz_2016_codequest
  background: url('img/prz/2016_codequest.jpg') center
  background-size: cover

#prz_2016_ksu
  background: url('img/prz/2016_ksu.jpg') center
  background-size: cover

#exp_chaporoyal
  background: url('img/exp/chaporoyal.jpg') center no-repeat
  background-size: cover

#exp_incubatex
  background: url('img/exp/incubatex.png') center no-repeat
  background-size: cover

#exp_freelancer
  background: url('img/exp/freelancer.jpg') center no-repeat
  background-size: cover

#exp_deblur
  background: url('img/exp/deblur.png') center no-repeat
  background-size: cover

#prj_duocoder
  background: url('img/prj/duocoder.png') top center no-repeat
  background-size: cover

#prj_algovis
  background: url('img/prj/algovis.png') top center no-repeat
  background-size: cover

#prj_hitw
  background: url('img/prj/hitw.png') bottom center no-repeat
  background-size: cover

#prj_taskbar7
  background: url('img/prj/taskbar7.png') center no-repeat
  background-size: cover

@keyframes rotating
  from
    -ms-transform: rotateY(0deg)
    -moz-transform: rotateY(0deg)
    -webkit-transform: rotateY(0deg)
    -o-transform: rotateY(0deg)
    transform: rotateY(0deg)
  to
    -ms-transform: rotateY(180deg)
    -moz-transform: rotateY(180deg)
    -webkit-transform: rotateY(180deg)
    -o-transform: rotateY(180deg)
    transform: rotateY(180deg)

.splash
  .no-click
    display: block

  .arrow
    opacity: 0

    &.fake
      display: flex

  .page
    opacity: 0

    &.home
      opacity: 1

      .content-wrapper
        opacity: 0

      .square
        width: 8vmin
        height: 8vmin
        animation: rotating .5s ease-in-out infinite

@media screen and (max-width: 768px)
  html
    font-size: 24px

  .square
    width: 50vmin
    height: 50vmin

  .panel
    position: absolute !important
    top: 0 !important
    left: 0 !important
    bottom: 0 !important
    right: 0 !important

  .edu
    flex: 1 100% !important
    background-size: cover !important

    .panel
      background: $panel-background !important
      color: white !important

  .prz
    flex: 1 50% !important

  .prj, .exp
    flex: 1 100% !important

  .page
    margin: 0 !important
    padding: 0

    &.top
      padding-top: 0
      padding-bottom: 7.5rem

    &.left
      padding-left: 0
      padding-right: 7.5rem

    &.bottom
      padding-bottom: 0
      padding-top: 7.5rem

    &.right
      padding-right: 0
      padding-left: 7.5rem
