/*
 * HTML - BODY
 *
 */

html, body {
  margin: 0; 
  height: 100%; 
  color: #fff;
}


.ui.page {
  /* display: flex !important; */
  text-align:left;
}

.ui.middle {
  
}

.negative {
    position: relative;
    margin-top: -20px;
    margin-bottom: 20px;
}


.ui.karten {
    width: 320px;
    height: 400px;
    position: relative;
    margin: auto;
}


.ui.karten .card-wrapper {
    width: 30%;
    height: 30%;
    min-height: 95px;
    min-width: 95px;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: 200ms all,
                600ms transform, 
                200ms background;
}

.ui.karten .card-wrapper .karte {
    height: 100%;
    transition: 
                200ms all,
                200ms transform, 
                200ms background;
    padding: 0;
    margin: 0;
}

.ui.card-wrapper {
  z-index: 2;
}

.ui.card-wrapper.selected {
  z-index: 1;
}
.ui.card-wrapper.selected .karte {
  margin-top: 5px;
  /*background-color: #DDD;*/
  /* transform: translateY(-5%) scale(1.2); */
  /* box-shadow: 
  0 0 0px 4px inset #57e7e0,
  0 1px 13px 0 #d4d4d5, 0 0 0 1px #d4d4d5; */
  overflow: hidden;
  z-index: -1;
}

.ui.card-wrapper.shuffling .ui.karte {
  animation: shake 500ms linear infinite;
}

@keyframes shake {
  0% {transform: translateY(10px) translateX(10px) rotate(10deg);}
  10% {transform: translateY(5px) translateX(5px) rotate(4deg);}
  34% {transform: translateY(20px) translateX(25px) rotate(-14deg);}
  49% {transform: translateY(8px) translateX(17px) rotate(8deg);}
  75% {transform: translateY(-10px) translateX(-20px) rotate(-10deg);}
  100% {transform: translateY(10px) translateX(10px) rotate(10deg);}
}

.ui.card-wrapper.hidden .karte {
  transform: scale(0) !important;
}

.ui.karten .card-wrapper:nth-of-type(1) {transform: translate(-115%, -115%);}
.ui.karten .card-wrapper:nth-of-type(2) { transform: translate(   0%, -115%);  }
.ui.karten .card-wrapper:nth-of-type(3) { transform: translate( 115%, -115%);  }
.ui.karten .card-wrapper:nth-of-type(4) { transform: translate(-115%, 0);  }
.ui.karten .card-wrapper:nth-of-type(5) { transform: translate(   0%, 0);  }
.ui.karten .card-wrapper:nth-of-type(6) { transform: translate( 115%, 0);  }
.ui.karten .card-wrapper:nth-of-type(7) { transform: translate(-115%, 115%);  }
.ui.karten .card-wrapper:nth-of-type(8) { transform: translate(   0%, 115%);  }
.ui.karten .card-wrapper:nth-of-type(9) { transform: translate( 115%, 115%);  }


/* Middles */

/* Bottoms */

@media screen and (max-height: 500px) {
  /*
    .ui.karten {
        height: 100vh;
        width: 80vh;
    }
    .ui.karten .card-wrapper {
        width: 25vh;
        height: 30vh;
        padding: 2px;
    }
    */
}

@media screen and (max-width: 500px) {
  /*
    .ui.karten {
        width: calc(100vw - 28px);
        height: 125vw;
    }
    .ui.karten .card-wrapper {
        width: calc(25vh - 14px);
        height: calc(30vw - 14px);
    }
    */
}

/* Debug
.ui.karten .ui.card-wrapper {
    transition: 800ms cubic-bezier(0.85, -0.35, 0.4, 0.8);
}

.ui.karten:hover .card-wrapper {
    transform: translate(0,0);
}

.ui.karten:hover .card {
    transform: rotate(-180deg);
} 
.ui.card-wrapper:hover .ui.karte {
    background: #999;
}*/


/* Code */
.ui.code {
    font: 11px/1.2 consolas;
    font-weight: 800;
    white-space: pre;
    color: black;
}

.ui.karten .ui.karte {
    margin: unset !important;
    cursor: pointer;
}


.ui.karten .ui.karte > .content,
.ui.karten > .card > .content {
  padding: 5px;
}

/* Center Symbols */
.ui.symbols {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.ui.symbol {
    display: block;
    flex: 1 100%;
    align-items: center;
    align-self: center;
    justify-content: center;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto auto;
    text-align: center;
}

.ui.symbol i {
        height: 24px;
        width: 5.2em;
        display: inline-block;
}

/* Formen */
.ui.symbol.rectangle i {}
.ui.symbol.circle i {border-radius: 100%;}
.ui.symbol.diamant {transform: scaleX(1.8) scaleY(.7);}
.ui.symbol.diamant i {transform: rotate(45deg);width:2em;height: 2em;/* transform: skewX(-52deg) skewY(7deg); */}


/* Filled Colors */
.ui.symbol.red  i  {background-color: #d25858;border-color: #d25858;}
.ui.symbol.green i {  background-color: #66a764; border-color: #66a764; }
.ui.symbol.blue  i {background-color: #6283c0;border-color: #6283c0;}

/* Stripd */
.ui.symbol.striped i {
    border-style: solid;
    border-width: 2px;
}

/* Striped Colors */
.ui.symbol.striped.red  i  {
  background-image: repeating-linear-gradient(-23deg,       #fff,       #ffffff 3px,       #d25858 3px,       #d25858 6px);
}
.ui.symbol.striped.green i {
  background-image: repeating-linear-gradient(-23deg,
      #ffffff,
      #ffffff 3px,
      #66a764 3px,
      #66a764 6px);
}
.ui.symbol.striped.blue  i {
  background-image: repeating-linear-gradient(-23deg,
      #ffffff,
      #ffffff 3px,
      #6283c0 3px,
      #6283c0 6px);
}


/* Empty Border-Colors */
.ui.symbol.empty i       {background-color: transparent;border-width: 5px;border-style: solid;}
.ui.symbol.empty.red i   { border-color: #d25858; }
.ui.symbol.empty.green i {border-color: #66a764;}
.ui.symbol.empty.blue i  {border-color: #6283c0;}



/* Semantic UI Fixes */
.ui.message.inverted.negative .header {
    color: #ffe6e6;
}