@charset "UTF-8";
@import url("https://use.typekit.net/sit1iud.css");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 0; }
  10% {
    width: 30px;
    height: 30px;
    opacity: 1; }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0; } }

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 0; }
  10% {
    width: 30px;
    height: 30px;
    opacity: 1; }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0; } }

@-webkit-keyframes glow {
  from {
    -webkit-box-shadow: 0 0 100px #fff, -10px 0 130px #f0f, 10px 0 130px #0ff;
    box-shadow: 0 0 100px #fff, -10px 0 130px #f0f, 10px 0 130px #0ff; }
  to {
    -webkit-box-shadow: 0 0 100px #f0f, -10px 0 130px #0ff, 10px 0 130px #fff;
    box-shadow: 0 0 100px #f0f, -10px 0 130px #0ff, 10px 0 130px #fff; } }

@keyframes glow {
  from {
    -webkit-box-shadow: 0 0 100px #fff, -10px 0 130px #f0f, 10px 0 130px #0ff;
    box-shadow: 0 0 100px #fff, -10px 0 130px #f0f, 10px 0 130px #0ff; }
  to {
    -webkit-box-shadow: 0 0 100px #f0f, -10px 0 130px #0ff, 10px 0 130px #fff;
    box-shadow: 0 0 100px #f0f, -10px 0 130px #0ff, 10px 0 130px #fff; } }

@-webkit-keyframes glowtext {
  from {
    text-shadow: 0 0 100px #fff, -10px 0 130px #f0f, 10px 0 130px #0ff; }
  to {
    text-shadow: 0 0 100px #f0f, -10px 0 130px #0ff, 10px 0 130px #fff; } }

@keyframes glowtext {
  from {
    text-shadow: 0 0 100px #fff, -10px 0 130px #f0f, 10px 0 130px #0ff; }
  to {
    text-shadow: 0 0 100px #f0f, -10px 0 130px #0ff, 10px 0 130px #fff; } }

:root {
  --animate-duration: .8s;
  --animate-delay: .8s;
  --animate-repeat: .8; }

html {
  background: #7b113a;
  font-family: chaloops;
  font-weight: bold;
  color: #f21170;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

html, body {
  width: 100%;
  height: 100%; }

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: -o-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  background-size: cover; }

.login {
  background: url("../img/background.jpg") center center no-repeat;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }
  .login #Logo {
    max-height: 40vh;
    max-width: 90vw; }
  .login h1 {
    font-size: 10vw;
    line-height: 10vw; }
  .login main {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .login form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 30px 30px 10px 30px;
    background: #fff;
    border-radius: 30px; }
    .login form h2 {
      color: #72147e;
      font-size: 24px;
      margin-bottom: 30px; }
    .login form label {
      margin-bottom: 10px; }
    .login form input {
      width: 260px;
      border: none;
      border-radius: 0;
      -webkit-appearance: none;
      border-bottom: 1px solid black;
      background: none;
      padding: 4px 0px;
      margin-bottom: 20px;
      outline: none; }
      .login form input[type=submit] {
        font-family: chaloops;
        border: none;
        font-size: 20px;
        background: #f21170;
        color: #fff;
        padding: 10px;
        width: auto;
        margin: 10px -30px -10px -30px;
        border-radius: 0px 0px 20px 20px; }

.container {
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr auto  auto;
  grid-template-rows: 1fr auto  auto; }

header {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 0px;
  margin-bottom: 20px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  color: #f21170; }
  header h1 {
    text-align: left;
    font-size: 40px;
    line-height: 60px; }

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 50px; }
  main .player {
    position: relative;
    width: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    z-index: 10;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto auto 1fr auto;
    grid-template-rows: auto auto 1fr auto; }
    main .player canvas {
      z-index: -1;
      position: absolute;
      left: 0;
      top: -50px;
      right: 0;
      bottom: -100px;
      width: 100%;
      height: calc(100% + 150px); }
    main .player .count {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      color: #ff5200; }
    main .player .name {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      color: #72147e;
      font-size: 30px;
      margin-bottom: 10px; }
      main .player .name.winner span {
        position: relative; }
        main .player .name.winner span:after {
          content: '👑';
          position: absolute;
          right: -20px;
          top: -31px;
          -webkit-transform: rotate(22deg);
          -ms-transform: rotate(22deg);
          transform: rotate(22deg);
          font-size: 50px; }
      main .player .name.winner--second span:after {
        content: '💪'; }
      main .player .name.winner--third span:after {
        content: '💩'; }
    main .player .deck {
      position: relative;
      margin: 30px;
      border-radius: 60px;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      main .player .deck.first:before {
        content: '1.';
        font-size: 5vw;
        color: #f21170;
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        width: auto;
        text-shadow: 3px 3px 0 #fff;
        -webkit-transform: translate(3vw, 3vw) rotate(5deg);
        -ms-transform: translate(3vw, 3vw) rotate(5deg);
        transform: translate(3vw, 3vw) rotate(5deg); }
      main .player .deck .card {
        z-index: 1; }
    main .player .time {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding-bottom: 50px; }
  main .card {
    width: 10vw;
    height: 14vw;
    font-size: 10vw;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand; }
    main .card.card--special {
      font-size: 8vw;
      -webkit-animation-name: glow;
      animation-name: glow;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite; }
    main .card.card--multi {
      line-height: 3.4vw;
      font-size: 6vw; }
      main .card.card--multi.card--multi--small {
        font-size: 3vw;
        line-height: 2vw; }

.options {
  z-index: 100; }
  .options .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #DADFE1;
    border-radius: 0px 20px 0px 0px;
    justify-self: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .options .left a.logout {
      font-size: 40px;
      text-decoration: none;
      line-height: 30px;
      padding: 20px; }
      .options .left a.logout:hover {
        background: #f21170; }
    .options .left .sound {
      font-size: 40px;
      line-height: 30px;
      padding: 20px; }
      .options .left .sound .on {
        display: none; }
      .options .left .sound.sound--on .on {
        display: block; }
      .options .left .sound.sound--on .off {
        display: none; }

.options {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr; }
  .options .category {
    position: relative;
    z-index: 100;
    background: #f21170;
    font-size: 30px;
    line-height: 30px;
    color: #fff;
    font-weight: 500;
    margin: 0 auto;
    border-radius: 20px 20px 0px 0px; }
    .options .category span {
      display: inline-block;
      padding: 20px; }
  .options .category--next {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-self: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #DADFE1;
    color: #72147e;
    font-size: 18px;
    line-height: 30px;
    padding: 20px;
    border-radius: 20px 0px 0px 0px; }
    .options .category--next:hover {
      opacity: 0.5;
      cursor: pointer; }
    .options .category--next.disabled {
      display: none; }

footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 40px 0px 40px 0px;
  outline: none;
  min-height: 12vw;
  z-index: 100;
  background: -webkit-linear-gradient(left, #DADFE1 21px, transparent 1%) center, -webkit-linear-gradient(#DADFE1 21px, transparent 1%) center, #131212;
  background: -o-linear-gradient(left, #DADFE1 21px, transparent 1%) center, -o-linear-gradient(#DADFE1 21px, transparent 1%) center, #131212;
  background: linear-gradient(90deg, #DADFE1 21px, transparent 1%) center, linear-gradient(#DADFE1 21px, transparent 1%) center, #131212;
  background-size: 22px 22px; }

.card {
  margin: 10px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: -o-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  height: 10vw;
  width: 8vw;
  border-radius: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 4vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #72147e;
  border: 3px solid #fff;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11), 0 32px 32px rgba(0, 0, 0, 0.11);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11), 0 32px 32px rgba(0, 0, 0, 0.11);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-transform: scale3d(1, 1, 1) rotateX(0);
  transform: scale3d(1, 1, 1) rotateX(0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .card:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    pointer-events: none;
    border-radius: 14px;
    border: 2px solid #eee; }
  .card.card--multi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: 2.4vw; }
    .card.card--multi.card--multi--small {
      font-size: 2.7vw;
      line-height: 1.6vw; }
  .card.card--special {
    border: none;
    color: #fff;
    background: #72147e url("../img/special.jpg") center center no-repeat;
    background-size: cover;
    font-size: 5.5vw;
    border: 3px solid #72147e; }
    .card.card--special:before {
      color: #72147e; }
    .card.card--special:after {
      border: 2px solid #fff; }
  .card.draggable-source--is-dragging {
    opacity: .3; }
  .card.card--take {
    position: absolute;
    left: 0;
    border-radius: 50%;
    height: 4vw;
    width: 4vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: none;
    color: #fff;
    background: #72147e;
    -webkit-box-shadow: none;
    box-shadow: none; }
    .card.card--take:after {
      display: none; }
    .card.card--take:hover {
      -webkit-transform: translateY(-50%) scale3d(1.1, 1.1, 1.1);
      transform: translateY(-50%) scale3d(1.1, 1.1, 1.1); }
  .card.card--candidate:before {
    content: 'Richtige Antwort?';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    font-size: 30px;
    width: 200px;
    display: block;
    text-shadow: 3px 3px 0 #fff;
    -webkit-transform: translateY(-100%) translateX(-20px) rotate(-10deg);
    -ms-transform: translateY(-100%) translateX(-20px) rotate(-10deg);
    transform: translateY(-100%) translateX(-20px) rotate(-10deg); }
  .card:hover {
    cursor: pointer;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }

particle {
  border-radius: 50%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  opacity: 0; }

#Countdown {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 20vw;
  line-height: 20vw;
  z-index: 1000;
  color: #fff;
  -webkit-text-stroke: #72147e;
  -webkit-text-stroke-width: 3px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: glowtext;
  animation-name: glowtext;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-transition: all ease-in-out .3s;
  -o-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s; }
  #Countdown.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }