@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Material+Icons")

body
  font-family: 'Roboto', Arial, sans-serif
  font-size: 16px
  background: #222
  color: #fff
  margin: 25px

font-weights = {
  light: 300,
  regular: 400, 
  bold: 700
}
for fw, w in font-weights
  .fw-{fw}
    font-weight: w

.success-overlay
  visibility: hidden
  opacity: 0
  position: fixed
  top: 0
  left: 0
  z-index: 10
  background: rgba(#191919, 0.95)
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  height: 100%
  width: 100%
  transition: visibility 0s, opacity 200ms ease
  &.show
    visibility: visible
    opacity: 1
  .material-icons
    font-size: 20em
    opacity: 0
    &.show
      opacity: 1
      animation: jackInTheBox 700ms 1
  .success-message
    font-size: 3em
  .close-message
    font-size: 0.7em
    opacity: 0.7

.container
  display: flex
  flex-direction: column
  align-items: center
  h1
    margin: 0
    font-size: 3em
    letter-spacing: 3px
  .heading-note
    font-size: 18px
    color: #bbb
  .option
    text-align: center
    .option-note
      font-size: 12px
      font-style: italic
      color: #999
  .complete-setup-button
    background: #333
    display: flex
    justify-content: center
    align-items: center
    padding: 10px
    cursor: pointer
    text-transform: uppercase
    border-radius: 3px
    box-shadow: 0 2px 5px 0 rgba(#000, 0.7)
    transition: background 50ms ease
    &:hover
      background: #404040
    .material-icons
      margin-right: 7px

.shields
  float: left;

.links_bottom
  display: inline-block;
  margin: 1%
  padding-top: 1em;
  padding-bottom: 1em;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #4e4e4e
  background-color: #252526;
  color: white;
  text-align: center

a 
  display: inline-block;
   
a:hover 
  background-color: #d3d3d3;
  color: black

a:active 
  box-shadow: none;
  top: 5px;

.links_div
  width: 20vw

p
  margin: 2%
  max-width: 30vw

h2
  margin: 2%

hr {
  margin: 2%
  width: 60vw
  border: 3px solid #d3d3d3;
  border-radius: 5px;
}




// jackInTheBox from animate.css https://github.com/daneden/animate.css
@keyframes jackInTheBox
  from
    opacity: 0
    transform: scale(0.1) rotate(60deg)
    transform-origin: center center
  
  50%
    transform: rotate(-20deg)
  
  70%
    opacity: 1
    transform: rotate(6deg)
  
  to
    transform: scale(1)