// main.sass - the stylesheet of the demo partaaaaaaay

@import reset

@keyframes spin
  100% 
    transform: rotate(-360deg) 


body
  background-color: black
  font-family: arial,sans-serif
  font-size: 10px
  color: white

#marquee-counter
  position: absolute
  top: 0
  right: 0
  padding: 10px
  width: 200px
  color: green
  font-size: 450%
  text-align: right
  z-index: 9999999
#marquee-counter.sush
  visibility: hidden
#countertxt
  font-size: 750%
  position: absolute
  top: 450px
  left: 550px 
  z-index: 999999

.hidden
  display: none

main
  position: absolute
  top: 0
  left: 0
  height: 100%
  width: 100%
  overflow: hidden

  #starter
    marquee
      margin-top: calc((100vh / 2) - 50px)
      height: 50px
      font-size: 350%

  #disclaimer
    position: absolute
    bottom: 50px
    marquee
      font-size: 500%

  #title
    height: 100%
    #titleH
      height: 100%
      width: 100%
    #titleV
      height: 100%
      div
        font-size: 2500%
        text-align: center

  #greets
    height: 100%
    .marquee-container
      position: absolute
      width: 100%
      overflow: visible
      left: 0
      marquee
        height: 250px
        color: rgba(255,255,255,0.5)

  footer
    position: absolute
    bottom: 50px
    height: 150px
    width: 1920px
    background-color: red
    z-index: 99999

  .scroller-letter
    float: left
    width: 65px
    height: 150px
    font-size: 750%
    text-align: center

  #disclaimer
    position: absolute
    bottom: 50px

    marquee
      font-size: 500%

  #snake
    width: 100%
    height: 100%
    margin : auto

    .snake-layer
      width: 80%
      height: 80%
      margin : auto
      position: absolute
      top: 10%
      left: 10%


      .snake-horiz
        height: 100%
        width: 100%

        .snake-vert 
          height: 100%

          .snake-elem
            background-color: black
            width: 100px
            height: 100px
            border-radius: 60px
            //border: 5px solid red
            background: radial-gradient(red, yellow, green)
          
  #starfield
    width: 100%
    height: 100%
    #universe 
      position: relative
      width: 1920px
      height: 1080px
      background-color: black

    #overlay 
      position: absolute
      width: 1920px
      height: 1080px

    #kepler
      position: absolute
      z-index: 999
      top: 510px
      left: 930px
      height: 60px
      width: 60px
      background-color: rgba(0, 0, 0, 0.8)
      box-shadow: 0px 0px 40px black
      border-radius: 100px
    
    .quarter 
      position: absolute
      width: 960px
      height: 540px

    .wraptl
      top: 0
      left: 0
    .wraptr
      top: 0
      right: 0
    .wrapbl
      bottom: 0
      left: 0
    .wrapbr
      bottom: 0
      right: 0

    .horiz
      width: 960px
    .verti
      height: 540px

    .star 
      background-color: rgba(255, 255, 255, 0.8)
      box-shadow: 0px 0px 8px white
      border-radius: 100px
    
  #check

    .container
      position: absolute
      top: 0px
      left: 0px
      width: 100%
      height: 100%

      .checker-horiz

        .checker-vert
          height: 2000px

          .checkers

            table 
              tr:nth-child(2n) td:nth-child(2n),
              tr:nth-child(2n+1) td:nth-child(2n+1) 
                background-color: white
                opacity: 0.75

          .checkers.xl
            td
              width: 200px
              height: 200px

          .checkers.l

            td
              width: calc(200px * 15/21)
              height: calc(200px * 15/21)

          .checkers.m

            td
              width: calc(200px * 15/21 * 15/21)
              height: calc(200px * 15/21 * 15/21)


  #moire
    width: 100%
    height: 100%

    .fix
      mix-blend-mode: exclusion


    .moire-horiz
      width: 1920px

    .moire-vert
      height: 1080px
      width: 2100px
      position: relative


    .move
      width: 2100px
      height: 1200px    
      position: relative 


    .moiree-line
      border-style: solid
      border-width: 5px
      border-color : white
      position : absolute


  #rotating

    #circle
      width : 200px
      height : 200px 
      //background-color: blue
      animation: spin 3s linear infinite


      span 
        font: 52px Monaco, MonoSpace
        height: 50%
        position: absolute
        width: 40px
        left: calc(50% - 20px)
        top: 0
        transform-origin: bottom center

     



