body {
  background-repeat: repeat;
  background-size: 700px;
}

#container {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

#grid {
  /* background-color: red; */
  position: fixed;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  height: 90vh;
  width: 64vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#top{
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

#left{
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}

#middle{
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

#right{
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

#bottom{
  grid-column: 2 / span 1;
  grid-row: 3 / span 1;
}

 /* The flip card container - set the width and height to whatever you want. */
.flip-card {
  background-color: transparent;
  width: 90%;
  height: 90%;
  margin: 5%;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition-duration: 600ms;
  transform-style: preserve-3d;
  box-shadow: 5px 5px 2px #403022;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipped {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  background-color: #bbb;
  cursor: pointer;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  transform: rotateY(180deg);
}

/* Style the back side */
.flip-card-back {
  background: url("/media/img/tarokka/__Back.png");
  background-size: contain;
  font-size: 20vh;
  color: white;
  text-shadow: 3px 3px 3px black;
  text-align: center;
}

.card {
  width: 100%;
  height: 100%;
}

.inverted {
  transform: rotateZ(180deg);
}

.off-grid {
  transform: translateY(-350%);
}

#info-box {
  font-family: 'PT Sans', sans-serif;
  background: url(/media/img/vellum-plain-background-repeating.jpg) repeat top center;
  box-shadow: 5px 5px 5px black;
  position: fixed;
  left: 70vw;
  width: 28vw;
  height: 95vh;
  padding: 10px 10px 20px;
  display: grid;
  grid-template-rows: auto 2em 2em;
}

#card-info {
  visibility: hidden;
}

#error-message {
  font-size: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: white;
  border: 3px solid red;
  box-shadow: 10px 10px 0 red;
}