:root {
  --color-accent: #4F98E3;
  --color-subdued: #B3D4F5;
  --color-background: #F2F7FD;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

@keyframes slidein-from-right {
  from {
    transform: rotate(-45deg);
    translate: 150vw -50%;
  }

  to {
    transform: rotate(0deg);
    translate: -50% -50%;
  }
}

@keyframes slidein-from-left {
  from {
    transform: rotate(-45deg);
    translate: -150vw -50%;
  }

  to {
    transform: rotate(0deg);
    translate: -50% -50%;
  }
}

@keyframes slideout-to-left {
  to {
    transform: rotate(-90deg);
    translate: -150vw -50%;
    filter: grayscale(50%);
  }
}

@keyframes slideout-to-right {
  to {
    transform: rotate(90deg);
    translate: 150vw -50%;
    filter: grayscale(50%);
  }
}

riddle-app {
  background-color: #F2F7FD;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 1em;
  padding: 0;
  margin: 0;

  header {
    h1 {
      color: var(--color-accent);
      margin: 40px 0;
    }
  }

  footer {
    color: var(--color-subdued);
  }

  deck {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: hidden;

    riddle-card {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: calc(100% - 20px);
      max-width: 500px;
      height: 100%;
      max-height: 300px;
      display: block;
      font-size: 2em;
      perspective: 500px;
      cursor: pointer;
      animation-duration: 0.5s;

      &.play-from-right {
        animation-name: slidein-from-right;
      }

      &.play-from-left {
        animation-name: slidein-from-left;
      }

      &.discard-to-left {
        animation-name: slideout-to-left;
      }

      &.discard-to-right {
        animation-name: slideout-to-right;
      }

      card-content {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        transition: transform 0.5s;
        transform-style: preserve-3d;

        p {
          position: absolute;
          width: calc(100% - 60px);
          top: 50%;
          left: 30px;
          transform: translateY(-50%);
          padding: 0;
          margin: 0;
          text-align: center;
        }

        icon {
          position: absolute;
          bottom: 20px;
          right: 20px;
          font-size: 0.5em;
        }

        card-content-side-a,
        card-content-side-b {
          position: absolute;
          display: block;
          height: 100%;
          width: 100%;
          text-align: center;
          border-radius: 5px;
          backface-visibility: hidden;
        }

        card-content-side-a {
          color: var(--color-background);
          background-color: var(--color-accent);
        }

        card-content-side-b {
          color: var(--color-accent);
          background-color: var(--color-subdued);
          transform: rotateY(180deg);
        }
      }

      &.flipped {
        card-content {
          transform: rotateY(180deg);
          transition: transform 0.5s;
        }
      }
    }
  }

  button-group {
    button {
      color: var(--color-background);
      background-color: var(--color-accent);
      display: inline-block;
      padding: 12px 24px;
      border-width: 0;
      border-radius: 5px;
      font-size: 1.2em;
      cursor: pointer;
      touch-action: manipulation;
      bottom: 0;
    }

    button:active {
      background-color: var(--color-subdued);
    }
  }
}