/* Common imports for all CSS modules */
/*
 * This source is generated by bin/gen/licon.py. Run licon.py after changing public/font/lichess.sfd
 *
 * Constant names and values are pulled from private use characters defined in the sfd file.
 *
 * Character names can be edited in fontforge's "glyph info" dialog, or by editing the StartChar: line that
 * begins each character chunk in lichess.sfd
 *
 * To make these characters visible in your editor, install the lichess.ttf font (which is also generated by
 * licon.py) and then add it to your editor's font list.
 */
/* Uniboard: keep the same page layout across pages */
.practice-app section > h2 {
  font-family: Roboto, sans-serif;
  font-weight: 300;
}

/* text printed directly on the page background deserves special treatment (transp theme) */
.practice-side .progress .text {
  position: absolute;
  width: 100%;
  height: 100%;
}

.practice-app .study {
  /* extends %flex-wrap */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.practice-side, .practice-app .study, .practice-side .progress {
  border-radius: 7px;
}

/* helps with clipping background into border-radius */
.practice-side .progress {
  overflow: hidden;
}

.practice-side .progress .bar {
  border-radius: 0 7px 7px 0;
}

.practice-app .study {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08), 0 3px 1px -2px rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}

html.transp .practice-app .study, .practice-app html.transp .study {
  backdrop-filter: blur(6px);
}

.practice-app section > h2 {
  color: var(--c-font-dim);
  font-size: 2em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
}
.practice-app .studies {
  ---min-width: 100vw;
}
@media (min-width: 499.3px) {
  .practice-app .studies {
    ---min-width: 400px;
  }
}
.practice-app .studies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(---min-width), 1fr));
  gap: 1em;
  margin: 0.8em 0 3em 0;
}
.practice-app .study {
  position: relative;
  height: 110px;
  min-width: 300px;
  color: #fff;
  transition: all 150ms ease;
  white-space: nowrap;
  font-size: 1.2em;
  overflow-x: hidden;
}
@media (min-width: 799.3px) {
  .practice-app .study {
    overflow-x: visible;
    /* ribbon */
  }
}
.practice-app .study i {
  flex: 0 0 80px;
  height: 80px;
  margin: 0 0.9em;
  opacity: 0.9;
}
.practice-app .study h3 {
  font-size: 1.4em;
}
@keyframes soft-bright {
  50% {
    filter: brightness(1.2);
  }
}
.practice-app .study.ongoing {
  background: var(--c-primary);
}
.practice-app .study.ongoing:hover {
  animation: 1.7s soft-bright ease-in-out infinite;
}
.practice-app .study.done {
  background: #4caf50 !important;
}
.practice-app .study.future {
  opacity: 0.7;
  background: #f57c00;
}
.practice-app .study.future .icon {
  opacity: 0.7;
}
.practice-app .study.active, .practice-app .study:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
  opacity: 1;
}
.practice-app .ribbon-wrapper {
  display: block;
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
.practice-app .ribbon {
  display: block;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
  transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  color: #6a6340;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.practice-app .ribbon::before, .practice-app .ribbon::after {
  content: "";
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid #536dfe;
  position: absolute;
  bottom: -3px;
}
.practice-app .ribbon::before {
  left: 0;
}
.practice-app .ribbon::after {
  right: 0;
}
.practice-app .ribbon {
  background-color: #b3e5fc;
}
.practice-app .done .ribbon {
  background-color: #bfdc7a;
}
.practice-app .done .ribbon::before, .practice-app .done .ribbon::after {
  border-top: 3px solid #6e8900;
}
.practice-app .what_next > p {
  width: 100%;
  text-align: center;
  margin: 20px 0;
  font-size: 1.2em;
}

.practice-side {
  background: var(--c-primary);
  color: var(--c-over);
  text-align: center;
  padding: 1.2em;
  align-self: start;
}
.practice-side h1 {
  font-size: 3.3em;
  margin: 0.2em;
}
.practice-side h2 {
  font-size: 1.3em;
  margin-bottom: 1em;
}
@keyframes fat-glide {
  50% {
    opacity: 1;
  }
}
.practice-side .fat {
  display: block;
  width: 16em;
  height: 16em;
  background: url("../images/practice/robot-golem.svg");
  margin: auto;
  opacity: 0.8;
  animation: 1.2s fat-glide ease-in-out infinite;
}
.practice-side .progress {
  position: relative;
  width: 100%;
  height: 2em;
  background: rgba(204, 204, 204, 0.2);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
@keyframes animated-background {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 1000%;
  }
}
@keyframes animated-bar {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
}
.practice-side .progress .bar {
  height: 100%;
  background: rgba(204, 204, 204, 0.2);
  background-image: url("../hashed/grain.91560814.png");
  transform: translateX(-100px);
  animation: animated-background 50s linear infinite, animated-bar 1s forwards;
}
.practice-side .progress .text {
  line-height: 2em;
  z-index: 1;
}
.practice-side form {
  padding-top: 1em;
  text-align: left;
}
.practice-side a {
  opacity: 0.6;
  color: #fff;
}
.practice-side a:hover {
  opacity: 1;
}

i.practice {
  background: url("../images/practice/help.svg");
  background-size: cover;
}

[class=ptQ1LLvm] {
  background-image: url("../hashed/backstab.bb8833ce.svg");
}

[class=E1lqtqFt] {
  background-image: url("../hashed/arrowed.6bd87e56.svg");
}

[class=xebrDvFe] {
  background-image: url("../hashed/key.b6b8d59a.svg");
}

[class=A4ujYOer] {
  background-image: url("../hashed/push.7882cc11.svg");
}

[class="9ogFv8Ac"] {
  background-image: url("../hashed/voodoo-doll.5e833c96.svg");
}

[class=Qj281y1p] {
  background-image: url("../hashed/trident.26d9dea3.svg");
}

[class=tuoBxVE5] {
  background-image: url("../hashed/pierced-body.189eeba8.svg");
}

[class=BJy6fEDf] {
  background-image: url("../hashed/stone-pile.2045b925.svg");
}

[class=Rg2cMBZ6] {
  background-image: url("../hashed/stone-spear.53a97b15.svg");
}

[class=fE4k21MW] {
  background-image: url("../hashed/pocket-bow.1295d1a2.svg");
}

[class="8yadFPpU"] {
  background-image: url("../hashed/sword-in-stone.2db3151c.svg");
}

[class=PDkQDt6u] {
  background-image: url("../hashed/catapult.febc1abe.svg");
}

[class="96Lij7wH"] {
  background-image: url("../hashed/musket.13caa469.svg");
}

[class=o734CNqp] {
  background-image: url("../hashed/breaking-chain.6c118dee.svg");
}

[class="9cKgYrHb"] {
  background-image: url("../hashed/cement-shoes.9bd50f3c.svg");
}

[class=MnsJEWnI] {
  background-image: url("../hashed/boxing-glove-surprise.a0498d80.svg");
}

[class=ITWY4GN2] {
  background-image: url("../hashed/two-shadows.6d63b523.svg");
}

[class=lyVYjhPG] {
  background-image: url("../hashed/skeletal-hand.1c2d0d49.svg");
}

[class=s5pLU7Of] {
  background-image: url("../hashed/trojan-horse.b65a4037.svg");
}

[class=kdKpaYLW] {
  background-image: url("../hashed/divert.70dd03d5.svg");
}

[class=jOZejFWk] {
  background-image: url("../hashed/magnet.08cae37e.svg");
}

[class="49fDW0wP"] {
  background-image: url("../hashed/upgrade.35df0ef8.svg");
}

[class="0YcGiH4Y"] {
  background-image: url("../hashed/quicksand.0f5d74c5.svg");
}

[class=CgjKPvxQ] {
  background-image: url("../hashed/back-forth.e5ee8749.svg");
}

[class=udx042D6] {
  background-image: url("../hashed/mining.364c54d9.svg");
}

[class=Grmtwuft] {
  background-image: url("../hashed/detour.e220f1d5.svg");
}

[class=g1fxVZu9] {
  background-image: url("../images/practice/bolt-shield.svg");
}

[class=RUQASaZm] {
  background-image: url("../hashed/rogue.b4feb415.svg");
}

[class="9c6GrCTk"] {
  background-image: url("../hashed/siege-tower.901f6999.svg");
}

[class=ByhlXnmM] {
  background-image: url("../hashed/ghost-ally.cf14de13.svg");
}

[class=pt20yRkT] {
  background-image: url("../hashed/stone-tower.2f752c87.svg");
}

[class=MkDViieT] {
  background-image: url("../hashed/guarded-tower.31b71bab.svg");
}

[class=pqUSUw8Y] {
  background-image: url("../hashed/siege-tower.901f6999.svg");
}

[class=heQDnvq7] {
  background-image: url("../hashed/locked-fortress.0bf7ca53.svg");
}

[class=wS23j5Tm] {
  background-image: url("../hashed/tower-fall.8f7e09d3.svg");
}

.page-menu__menu {
  margin: 0 0 3rem 0;
}
@media (min-width: 799.3px) {
  .page-menu__menu {
    margin: 0 3rem 0 0;
  }
}

/*# sourceMappingURL=bits.practice.index.css.map */