/* From http://codepen.io/anon/pen/MKzEmK */
* {
  box-sizing: border-box;
}

[class*="col-"] {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

/* Non-mobile, grid */
@media (min-width: 768px) {
  .col-1 {width: 8.2%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

body {
  background-color: #1b2838;
  color: #c6d4df;
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
}

form > p {
  color: #66C0F4;
  margin: 0 auto 10px;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 2px;
  padding-bottom: 10px;
  max-width: 768px;
  line-height: 20px;
}

h1 > img {
  max-width: 300px;
  height: auto;
}

header {
  background-color: #171a21;
}

header h1 {
  margin-top: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

#app {
  padding: 0 20px 60px 20px;
}

label, input, button {
  display: block;
  margin: 0 auto;
}

button {
  width: 150px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#player0,
#player1 {
  opacity: 0;
}

#player0 {
  -webkit-transform: translateX(-500px);
  transform: translateX(-500px);
  -webkit-transition-timing-function: ease-out; 
  transition-timing-function: ease-out;
  animation: .3s linear .3s forwards showPlayerOne;

}
#player1 {
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
  -webkit-transition-timing-function: ease-out; 
  transition-timing-function: ease-out;
  animation: .3s linear .3s forwards showPlayerTwo;
}

@keyframes showPlayerOne {
  from {
    -webkit-transform: translateX(-500px);
    transform: translateX(-500px);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes showPlayerTwo {
  from {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}


.player {
  text-align: center;
  padding: 25px;
  margin: 10px 0;
  background-color: rgba(41,57,88,1.00); 
  background-image: linear-gradient(333deg, rgba(28,29,31,1.00) 0%, rgba(28,28,30,1.00) 43%, rgba(33,47,73,1.00) 73%, rgba(58,81,125,1.00) 100%);
  background-position: top left; 
  background-repeat: no-repeat;
  border-radius: 5px;
}

@media (min-width: 768px) {
  .player {margin: 10px;}
}

.player h2 {
  margin-top: 0px;
  text-transform: uppercase;
}

a, a:visited {
  color: inherit;
}

.profile h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile img {
  border-radius: 5px;
  max-width: 100%;
}

.playerscore {
  display: block;
  margin: 0 auto;
}

.score-list {
  list-style: none;
  text-align: left;
  padding-left: 0;
}

.score-list hr {
  box-sizing: content-box; 
  height: 5px; 
  outline: none; 
  border: none; 
  border-radius: 5px; 
  background-color: #42495a;
}

.winner {
  box-shadow: inset 0 0 0 10px #2f89bc, 0 0 15px black;
}

.wintext {
  color: #a4d007;
}

.loser {
  opacity: 0.75;
}

/* Form */
.small-profile {
  padding-bottom: 10px;
}

.small-profile img {
  height: 32px;
  width: 32px;
  margin-right: 10px;
}

.small-profile span {
  display: inline-block;
  position: relative;
  top: -0.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------- */
/* BUTTONS */
/* ------- */

.btn {
  border-radius: 2px;
  border: none;
  padding: 1px;
  cursor: pointer;
  text-decoration: none;
  color: #A4D7F5;
  transition: all 1.3s ease-out;
  background-color: rgba(47, 137, 188, 1);
  background-image: linear-gradient( to bottom, rgba(47, 137, 188, 1) 5%, rgba(23, 67, 92, 1) 95%);
  font-family: sans-serif;
}

.btn span {
  border-radius: 2px;
  border: none;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: rgb(164, 215, 245);
  background-color: #a4d007;
  background-image: linear-gradient( to bottom, rgba(33, 101, 138, 1) 5%, rgba(23, 67, 92, 1) 95%);
  padding: 0 15px;
  font-size: 15px;
  line-height: 30px;
  width: 100%;
}

.btn span:hover {
  color: #ffffff;
  background-image: linear-gradient( to bottom, rgba(102,192,244,1) 5%, rgba(47,137,188,1) 95%);
}

button[disabled] {
  opacity: .4;
}

.buttons {
  padding-top: 25px;
}

.battle-again {
  animation: .3s linear .7s forwards trickButton;
  opacity: 0;
}

@keyframes trickButton {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1
  }
}



/* --------------- */
/* FORM COMPONENTS */
/* --------------- */

.input--wrapper {
  position: relative;
  width: 225px;
  height: 36px;
  border: 8px solid #1b5371;
  border-radius: 3px;
  box-shadow: 0 0 2px black;
  margin: 0 auto;
}

input {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  position: absolute;
  top: 4px;
  left: 12px;
  width: 244px;
  height: 12px;
  background-color: transparent;
  color: #bfbfbf;
  font-size: 18px;
}

::-webkit-input-placeholder {
  color: #656c75;
  font-style: italic;
}

/* PlayerInput Component */
.player-input h3 {
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: 2px;
  font-weight: normal;
  padding-top: 10px;
}


/* Footer */
footer {
  font-size: 9px;
  text-align: center;
  position: fixed;
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: #171a21;
}

footer p {
    margin-bottom: 0px;
}

/* UTILITY */

.black {
  outline: 1px solid black;
}

.blue {
  outline: 1px solid blue;
}

.row {
  width: 100%;
}

.linear-wipe {
  background: linear-gradient(to right, #1b5371 0%, rgba(28,28,30,1.00) 43%, rgba(47, 137, 188, 1) 73%, rgba(58,81,125,1.00) 100%);
  background-size: 200% auto;
  
  color: #000;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}