/* As RGBa codes */

/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */
:root {
  --rgba-top-color-0: rgb(132, 223, 156);
  --rgba-primary-0: rgb(121, 172, 97); /* Main Primary color */
  --rgba-secondary-1-0: rgb(107, 148, 118);
  --rgba-secondary-2-0: rgba(109, 151, 48, 1);
  --rgba-bottom-color-1-0: rgba(31, 76, 43, 1);
  --rgba-primary-font-color: rgba(36, 18, 21, 1);
  --rgba-primary-font-link:  rgba(153, 48, 69, 1);
  --rgba-primary-font-link-hover: rgb(143, 33, 55);
}



body {
    color: var(--rgba-primary-font-color) !important;
    background-color: var(--rgba-primary-0);
    margin: 0;
    padding: 0;
}

a {
  position: relative;
  top: -1px;
  left: -1px;
  color: var(--rgba-top-color-0) !important;
  transition: position 1s;
}

a:hover {
  top: 1px;
  left: 1px;
  color: var(--rgba-secondary-2-0) !important;
  text-decoration: none !important;
  font-size: 1.1em;
}


.cardProfile {
  padding-top: calc(3 / 4 * 100%);
  background-image: url("../images/placeholder.png");
  color: black;
  background-color: darkslategray;
  border: 1px black solid;
  height: 640px;
  width: 100%;
  padding-bottom: 0;
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
  padding-top: calc(height / 2);
 
}

/* media queries */
@media only screen and (max-width: 992px) {
  .cardProfile {
    height: 320px;
  }
}

.player-default {
  background-image: url(../images/player.jpg);
}

.computer-default {
  background-image: url(../images/computer.jpg);
}

.rock {
  background-image: url(../images/rock.jpg);
}

.paper {
  background-image: url(../images/paper.jpg);
}

.scissors {
  background-image: url(../images/scissors.jpg);
}

#btn-start {
  cursor: pointer;
}

#btn-new {
  cursor: pointer;
}

.win {
  background-image:  url(../images/win.png);
}

.lose {
  background-image:  url(../images/lose.png);
}

.hidden {
  display: none;
}
footer {
  position:fixed;
  width: 100%;
  bottom: 0;
  background-color: var(--rgba-bottom-color-1-0);
  color: white;
  text-align: center;
}