*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%; }
  @media only screen and (max-width: 70em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 54em) {
    html {
      font-size: 50%; } }

body {
  font-family: "Maiden Orange", sans-serif;
  color: #000;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../images/pokerBackground.jpg) fixed;
  line-height: 1.4; }
  @media only screen and (max-width: 77em) {
    body {
      background: #050; } }

a {
  text-decoration: none;
  font-weight: 700;
  transition: all .5s; }

::selection {
  background: #fc0;
  color: #fff; }

/* Card dealing animation */
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.delay0 {
  animation-delay: 0.1s; }

.delay1 {
  animation-delay: 0.4s; }

.delay2 {
  animation-delay: 0.7s; }

.delay3 {
  animation-delay: 1s; }

.delay4 {
  animation-delay: 1.3s; }

.animated.rollIn, .animated.bounceInUp, .animated.flipInX {
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

.styled-checkbox {
  position: absolute;
  opacity: 0; }

.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0; }

.styled-checkbox + label:before {
  content: url(../images/thumbUp.svg); }

.styled-checkbox:checked + label:before {
  content: " "; }

.styled-checkbox:checked + label:after {
  content: url(../images/thumbDown.svg); }

.highlight {
  color: #fc0; }

input[type=submit]:focus {
  outline: none; }

input[type=submit]::-moz-focus-inner {
  outline: none;
  border: 0; }

input[type=submit] {
  background: url(../images/okay.svg);
  background-repeat: no-repeat;
  background-size: cover;
  border: none;
  width: 100px;
  height: 100px;
  outline: none;
  -webkit-transition: -webkit-transform .5s ease-in-out;
  -ms-transition: -ms-transform .5s ease-in-out;
  transition: transform .5s ease-in-out; }

input[type=submit]:hover {
  transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2); }

.cardHolder {
  text-align: center; }

.pokerScoreTable {
  position: fixed;
  text-align: center;
  font-size: 3rem;
  padding: .5rem 1rem;
  background: #09f;
  color: #fff;
  z-index: 2; }
  @media only screen and (min-width: 77em) {
    .pokerScoreTable {
      top: 0;
      right: 2vw;
      width: auto;
      border-bottom-left-radius: 2rem;
      border-bottom-right-radius: 2rem; } }
  @media only screen and (max-width: 77em) {
    .pokerScoreTable {
      bottom: 0;
      right: 0;
      left: 0;
      margin: 0 auto;
      width: 30vw;
      border-top-left-radius: 2rem;
      border-top-right-radius: 2rem; } }
  @media only screen and (max-width: 46em) {
    .pokerScoreTable {
      font-size: 2.7rem;
      width: 35vw; } }
  @media only screen and (max-width: 36em) {
    .pokerScoreTable {
      font-size: 5vw;
      width: 45vw; } }

.pokerGameScoreTableContainer {
  position: fixed;
  top: 10vh;
  left: 5vw;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  width: 90vw;
  height: 80vh;
  border: solid 10px #0c0;
  border-radius: 2rem;
  overflow: auto;
  padding: 2rem; }

.pokerGameScoreTable {
  display: grid;
  grid-auto-rows: minmax(min-content, 3vw);
  grid-template-columns: repeat(4, minmax(min-content, max-content));
  grid-gap: 1rem;
  justify-items: start;
  align-content: center;
  font-size: 2.5rem; }
  @media only screen and (max-width: 46em) {
    .pokerGameScoreTable {
      grid-template-columns: repeat(2, minmax(min-content, max-content)); } }
  .pokerGameScoreTable__hand, .pokerGameScoreTable__score {
    color: #09f; }
  .pokerGameScoreTable__example .red {
    color: #c00; }
  .pokerGameScoreTable__example .black {
    color: #000; }

.pokerGame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  padding: 2rem;
  color: #fff;
  text-align: center; }

.scoreBoard {
  width: 100%;
  border-radius: 2rem;
  display: grid;
  background: rgba(0, 0, 0, 0.3);
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(8, 1fr);
  justify-items: center;
  align-items: center;
  margin: 2rem 0; }
  .scoreBoard__headings {
    font-size: 3rem; }
  .scoreBoard__roundScore {
    font-size: 5rem;
    color: #fc0; }
  .scoreBoard__totalScore {
    font-size: 5rem;
    color: #09f; }
  .scoreBoard__highScore {
    font-size: 5rem;
    color: #0c0; }

.roundHeading {
  background: #09f;
  padding: .5rem 2rem;
  border-radius: 1.5rem;
  font-size: 4rem; }

.roundText {
  display: flex;
  align-items: center;
  font-size: 3.5rem; }
  @media only screen and (max-width: 70em) {
    .roundText {
      flex-direction: column; } }

.cards {
  width: 100%;
  display: grid;
  margin: 2rem 0;
  padding: 1rem;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center; }
  .cards img {
    width: 16vw; }
  @media only screen and (max-width: 36em) {
    .cards {
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(3, 1fr); }
      .cards img {
        width: 25vw; } }

@media only screen and (min-width: 46em) {
  .wide {
    display: block; }
  .narrow {
    display: none; } }

@media only screen and (max-width: 46em) {
  .wide {
    display: none; }
  .narrow {
    display: block; } }

h1 {
  font-family: "Maiden Orange", sans-serif;
  font-weight: 300;
  font-size: 6.5rem;
  color: #fc0; }

p {
  font-size: 3rem; }