@mixin prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content; }
  @-moz-keyframes #{$name} { @content; }
  @-o-keyframes #{$name} { @content; }
  @keyframes #{$name} { @content; }
}

@include keyframes(fadeIn) {
  from { opacity: 0; }
  to { opacity: 1; }
}

$background-color: rgb(245,245,245);
$body-color: rgb(225,225,225);
$header-font-color: rgb(33,153,232);

.player-name, .room-name {
  font-size: 8vw;
  width: 100%;
  text-align: center;
  outline: none;
  color: gray;
}

.play-with-stranger {
  margin-top: 100px;
}

.error-message {
  font-size: 3vw;
  width: 100%;
  text-align: center;
  color: red;
  display: none;
}

.name {
  text-align: center;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 100%;
}

.game {
  display: none;
  text-align: center;
  max-width: 600px;

  h1 {
    color: gray;
    margin: 30px;
    font-weight: bold;
    font-size: 40px;
  }
}

.weapons, .players {
  margin-bottom: 4em;
}

.weapon-wrapper {
  max-width: 200px;
  text-align: center;
  font-weight: bold;
  padding-top: 15px;
  display: block;
  color: rgb(120, 120, 120);
  background-color: $background-color;
  border-radius: 5%;
  @include prefix(box-shadow, 2px 2px 3px gray);
  @include prefix(animation, fadeIn .5s);

  &.-disabled {
    cursor: default;
    pointer-events: none;
    color: rgb(120, 120, 120);
    background-color: darken($background-color, 5%);
    @include prefix(box-shadow, none);
  }

  &:hover {
    @include prefix(box-shadow, 1px 1px 2px gray);
  }

  &:active {
    @include prefix(box-shadow, inset 2px 2px 3px gray);
    background-color: darken($background-color, 15%);
  }
}

.invite {
  @media only screen and (max-width: 950px) {
    display: none;
  }

  position: fixed;
  top: 1em;
  left: 3em;
}

.github {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.score {
  margin-bottom: 5px;
}

.chat-container {
  @media only screen and (max-width: 950px) {
    display: none;
  }

  font-size: 12px;
  background-color: white;
  min-width: 15em;
  max-width: 15em;
  height: 100%;
  border-left: thick double gray;
  text-align: left;
  position: fixed;
  top: 0em;
  right: 0em;

  .messages {
    padding: 10px;
  }

  .chat {
    height: 100%;
  }

  .new-message {
    position: fixed;
    bottom: 0em;
    width: 100%;

    .new-message {
      width: 100%;
    }
  }
}
