/* page styling */
body {
  background-color: black; /* very light grey background */
  font-family: Arial; /*Nice and basic*/
  line-height: 1.6; /* to increase seperation */
  padding-top: 10px;
}

/* This is where all my content is (I do not have a header/footer/sidebar) */
main {
  max-width: 800px; /* otherwise will be wide and left*/
  margin: auto;
  padding: 2em; /* inner spacing */

  /* translucent white, currently bg is black, will consider changing it later */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);

  /* rounding to not look ugly*/
  border-radius: 10px;

  /* The edge */
  border: 1px solid rgba(255, 255, 255, 0.25);

  /* Make a shadow  */
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.35);
}

/* Scene gives perspective */
.cube-scene {
  perspective: 800px;
  width: 300px;
  height: 150px; /* Makes it cooler, overlaps with want to join vertically*/
  margin: 50px auto;
}

/* Cube container */
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-50deg);
}

/* If I went through the effort, why not make it cooler */
.cube:hover {
  transform: rotateX(-40deg) rotateY(-30deg);
}

/* Base face style (scoped to cube only) */
.cube-face {
  position: absolute;
  border-collapse: collapse;
}

.cube-face td {
  width: 50px;
  height: 50px;
  border: 1.6px solid #000;

  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1.75rem;

  /*
  This fixes the top cube face, without it, the face was being transformed with changes of border size
  https://www.w3schools.com/csS/css3_box-sizing.asp
  */
  box-sizing: border-box;
}

.cube-face td img {
  display: block;
  margin: auto;
}

/* FRONT */
.cube-front {
  transform: translateZ(75px);
  background: rgba(255, 0, 0, 0.15);
}

/* RIGHT */
.cube-right {
  transform: rotateY(90deg) translateZ(75px);
  transform-origin: center;
  background: rgba(0, 255, 0, 0.15);
}

/* TOP */
.cube-top {
  transform: rotateX(90deg) translateZ(75px) scaleX(1);
  transform-origin: center;
  background: rgba(0, 0, 255, 0.15);
}

/* Highlighted row for win */
.highlight-row,
.highlight-row {
  padding: 0;
  margin: 0;
}

.highlight-row-inner {
  display: flex;
  width: 100%;
  height: 48.4px; /* match cube cell inner square dims */
  border-collapse: collapse;
}

/* Make each cell darker red and equal size */
.highlight-cell {
  flex: 1; /* equal width*/
  border: 1.6px solid black; /*match the cube border, but this will actually be doubled because it applies to each cell*/

  /* I probably should have used the --variables to have it inherit color from parent */
  background: rgba(255, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-collapse: collapse;
}

/* Column container td */
.highlight-col {
  padding: 0;
  margin: 0;
  width: 50px; /* cube cell width */
}

/* Inner vertical container */
.highlight-col-inner {
  display: table;
  width: 46.8px; /* border is 1.6 */
  height: 146.8px;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

/* Each vertical cell */
.highlight-cell-right {
  display: table-row; /* makes it take equal height */
  text-align: center;
  vertical-align: middle;
  border: 1.6px solid black;

  /* I probably should have used the --variables to have it inherit color from parent */
  background: rgba(0, 255, 0, 0.25);
  font-weight: bold;
}

.societyapplicaiton {
  border: 1px solid black;
}

.formtable {
  margin: auto;
}

/*I noticed that this footer was present on all of the examples, 
and I wanted to see if I could hide it. 
It works*/
codecraft-web-project-footer {
  display: none;
}