terrible/app/answers/index.module.css

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

.buttons {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.answer {
  align-items: center;
  background: #dfdfdf;
  border: none;
  height: calc(33.333% - 2vh);
  margin: 1vh;
  padding: 0;
  width: calc(33.333% - 2vh);
  &:nth-child(1):nth-last-child(2),
  &:nth-child(2):nth-last-child(1) {
    height: calc(50% - 2vh);
    width: calc(100% - 2vh);
  }
  &:nth-child(1):nth-last-child(3),
  &:nth-child(2):nth-last-child(2),
  &:nth-child(3):nth-last-child(1) {
    width: calc(100% - 2vh);
  }
  &:nth-child(1):nth-last-child(4),
  &:nth-child(2):nth-last-child(3),
  &:nth-child(3):nth-last-child(2),
  &:nth-child(4):nth-last-child(1) {
    height: calc(50% - 2vh);
    width: calc(50% - 2vh);
  }
  &:nth-child(1):nth-last-child(5),
  &:nth-child(2):nth-last-child(4),
  &:nth-child(3):nth-last-child(3),
  &:nth-child(4):nth-last-child(2),
  &:nth-child(5):nth-last-child(1) {
    width: calc(50% - 2vh);
  }
  &:nth-child(1):nth-last-child(6),
  &:nth-child(2):nth-last-child(5),
  &:nth-child(3):nth-last-child(4),
  &:nth-child(4):nth-last-child(3),
  &:nth-child(5):nth-last-child(2),
  &:nth-child(6):nth-last-child(1) {
    width: calc(50% - 2vh);
  }
  &:disabled {
    color: #070707;
  }
  &:focus {
    box-shadow: none;
  }
  &.selected .text {
    background-color: #f7f7f7;
    &:hover {
      background-color: #fff;
    };
  }
  &:not(:disabled) .text:hover {
    background:
      linear-gradient(to top left, transparent 90%, #eee),
      linear-gradient(to bottom right, transparent 30%, #fff 60%, transparent 90%)
    ;
    background-color: #f4f4f4;
    color: #070707;
    cursor: pointer;
  };
  &.selected .text {
    border: 1px solid #777;

    .left, .top {
      background: none;
    }
  }
}

.separator {
  opacity: 0.4;
}

.text {
  background:
    linear-gradient(to top left, transparent 90%, #ccc),
    linear-gradient(to bottom right, transparent 30%, #e9e9e9 60%, transparent 90%)
  ;
  border: 1px solid transparent;
  box-shadow: 1px 1px 1px #bbb;
  height: 100%;
  width: 100%;
}

.choice {
  padding: 2vh 3.5vw;
}

.left {
  height: 100%;
  width: 1px;
  background: linear-gradient(to top, transparent 80%, #777);
  left: -1px;
  top: 0px;
  position: absolute;
}

.top {
  height: 1px;
  width: 100%;
  background: linear-gradient(to left, transparent 75%, #777);
  left: -1px;
  top: -1px;
  position: absolute;
  transform: translateY(-0px);
}

@keyframes wiggle {
  from { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
  to { transform: rotate(-12deg); }
}

.submit {
  align-items: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  button {
    border-radius: 5px;
    color: #f64030;
    max-width: 90%;
    padding: 2vh;
    &[name="confirm"] {
      background-color: #eee;
      border-radius: 0;
      border: 7px solid #ccc;
      color: #d68030;
      font-family: Strike;
      font-size: 10vw;
      height: 50%;
      padding: 3.5rem;
      transition: box-shadow 200ms;
      &:hover {
        box-shadow: 1px 1px 5px black;
      }
    }
    &[name="cancel"] {
      background-color: transparent;
      border: none;
      color: #777;
      font-size: 5vw;
      height: 20%;
      text-underline-offset: 0.4em;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

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