#container {
  background-color: #afdff9;
  font-family: twinkl, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.jodal-title {
  margin: 0.5rem !important;
}

.foreground-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 103;
  position: absolute;
  pointer-events: none;
  background-position: center;
}

.intro-title {
  margin: 0 !important;
}

#start-pop-text {
  font-size: 32px;
}

.go-white-container {
  overflow: hidden;
}

.td {
  transform: scale(1);
  cursor: pointer;
}
.td:hover {
  transform: scale(1.1);
}
.td:active {
  transform: scale(1.05);
}

.question-box {
  position: absolute;
  width: 97%;
  height: 15%;
  top: 3%;
  left: 1.5%;
  background: linear-gradient(to left, white 50%, #009640 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  border: 2px solid black;
  border-radius: 10px;
  font-family: Twinkl;
  font-size: x-large;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: right bottom;
}

.odd-one-container {
  position: absolute;
  width: 96%;
  height: 70%;
  top: 23%;
  left: 2%;
  padding: 1%;
  vertical-align: middle;
  table-layout: fixed;
  display: grid;
}

.next-button {
  position: absolute;
  width: auto;
  height: 10%;
  top: 100%;
  display: flex;
  align-self: center;
  padding: 1.5%;
  z-index: 3;
  background-color: #009640;
  font-family: Twinkl;
  font-weight: bold;
  color: #fff;
  font-size: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  justify-self: center;
  transform: scale(1);
  cursor: pointer;
}
.next-button:hover {
  transform: scale(1.1);
}
.next-button:active {
  transform: scale(1.05);
}

.objects {
  position: relative;
  width: 90%;
  height: 90%;
  margin: 3% 4%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#pop-panel .jodal-title {
  font-size: 4vw;
  margin: 0 auto;
}
#pop-panel .jodal-text {
  font-size: 1.2vw;
}
#pop-panel .answer-text {
  text-align: center;
  z-index: 100;
  width: 90%;
  height: 15%;
  margin: 0 auto;
}
#pop-panel .jodal-sub-text {
  font-size: 2.6vw;
}

.td {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
}

.card-border {
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 2px 2px 10px lightgrey;
}

.label {
  font-size: 2vw;
  font-weight: bolder;
  margin-bottom: 3%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oddbox {
  padding: 1% 2%;
}

.title-text {
  font-size: 14vw;
  width: 70%;
  left: 15%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#subContainer {
  position: absolute;
  height: auto;
  top: 55%;
  width: 100%;
  color: white;
  padding: 1%;
  font-weight: 600;
  font-size: 3vw;
  text-align: center;
}

/*# sourceMappingURL=odd-one-out.css.map */