*{
  margin:0;
  padding:0;
  font-family: 'Poppins', sans-serif;
}

p {
  font-size: 15px;
  font-style: bold;
}

body {
  background-color: #f9f9f9;
  /* background-color: #f1f1f1; */
}

.evergreenHello {
  color: #f7f7f7;
}

.groupMemberContainer {
  background-color: #d5e0f2;;
}


.siteHeaderContainer {
  background-color: #6188ce;
}

/* ====================================
   Variables
   ====================================
*/

:root {
  --winnerLocation: 0px;
  --offsetTop: 0px;
  --offsetWidth: 0px;
}

@keyframes progressBar {
  0% { width: var(--my-start-width); }
  100% { width: var(--my-end-width); }
}


/* ====================================
   App
   ====================================
*/

#app {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.siteHeaderContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1em 0;
  border-bottom: .08em solid #f7f7f7;
}

.titleLogoContainer {
  display: flex;
  align-items: center;
}

.siteHeader {
  color: #f7f7f7;
  font-size: 1.5em;
  padding: .3em 0 .25em .2em;
}

.fa-bars {
  color: #f7f7f7;
  margin: 0 1em 0 0;
}

.fa-trophy {
  color: #f7f7f7;
  padding: .2em;
  padding: 0 .5em 0 1em;
}

.container {
  margin: 1em;
  display: grid;
  grid-template-columns: 10% 20% 20% 5% 5% 20% 10% 5%;
  grid-template-rows: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
}

.A {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 5;
}

.B {
  display: grid;
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 3;
}

.accountSuggestionContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1em;
  grid-column-start: 4;
  grid-column-end: 8;
  grid-row-start: 8;
  grid-row-end: 8;
  position: relative;
  bottom: 2em;
  left: 10em;
  background-color: #161160;
  border-radius: .5em;
  height: 3em;
  width: 30em;
  color: #f7f7f7;
}

.menuContainer {
  background-color: white;
  position: absolute;
  right: 2em;
  top: 2em;
  width: 15em;
  z-index: 20;
  display: flex;
  flex-direction: column;
  border-radius: .3em;
}

.feedbackLink, .signUpLink {
  padding: .4em;
  font-style: none;
  text-decoration: none;
  color: #080D1D;
}

.feedbackLinkText {
  text-decoration: none;
  color: #080D1D;
  padding: .3em .5em;
}

.feedbackLinkText:hover {
  cursor: pointer;
  background-color: #f7f7f7;
  border-radius: .3em;
}

.signUpLink:hover, .back:hover {
  cursor: pointer;
  border-radius: .3em;
}

.back:hover {
  cursor: pointer;
}

.menuItem {
  display: block;
  width: auto;
}

/* ====================================
   Selection
   ====================================
*/

.newSelection {
  border: .1em solid gray;
  padding: 1em 2em;
  margin: 2em 44em;
  border-radius: .5em;
  background-color: #e5e8f5;
  color: #0b0a1f;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
}

.newSelection:hover, button:hover, select:hover, .exit:hover, .submit:hover,  .feedbackSubmit:hover  {
  background-color: #9db5e1;
  cursor: pointer;
}

.submitGroup:hover {
  background-color:#aeb1be;
  cursor: pointer;
  border: 0.1em solid #aeb1be;
}

.fa-bars:hover {
  cursor: pointer;
}


.submitGroup{
  padding: 0.5em 0.8em;
  background-color: #8D92A4;
  border-radius: 0.2em;
  border: 0.1em solid #8D92A4;
  color: #f7f7f7;
  font-size: 1.2em;
  margin: 0em 0.5em;
}

.submit {
  padding: .15em .4em;
  border-radius: .5em;
  background-color: #8D92A4;
  border-radius: .2em;
  border: .1em solid #8D92A4;
  color: #f7f7f7;
}

.textInput {
  background-color: #8D92A4;
  border: none;
}

.textInput:focus {
  outline: none;
}

/* ====================================
   Configuration Modals
   ====================================
*/

.configurationContainer {
  width: 40em;
}

#groupEditor {
  width: 20em;
  margin: 1em 9em 0 9em;
}

#groupEditorNewGroup {
  width: 36em;
  margin: 1em 1em 1em 0;
}

.addNewNames {
  height: 20em;
  padding: 0.5em;
  margin: 1em;
  color: #161160;
  border: 0.05em solid #d3d3d3;
}

.groupName {
  font-size: 1.5em;
  color: #6188ce;
  font-weight: bold;
}

.groupDescription {
  text-align: start;
  padding: 0 0 0 1.6em;
  color: #7497d4;
  font-size: 1em;
  font-weight: bold;
}

.testingFont {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #f7f7f7;
}

.groupOptions, .durationOptions {
  background-color: #8D92A4;
  border: .1em solid #8D92A4;
  color: #f7f7f7;
  border-radius: .3em;
  background-color: #6188ce;
  color: #f7f7f7;
}

.addNewTeamLink {
  color: #f7f7f7;
  font-size: 1em;
  font-weight: bold;
}

.addNewTeamLink:hover {
  cursor: pointer;
  color: #8D92A4;
}

.configHeader {
  margin: 1em 0 0 0;
  height: 2em;
  background-color: #8D92A4;
  display: flex;
}

.aTrail {
  background-color: #d0dbf0;
  animation-duration: 3s;
  animation-delay: .3s;
  animation-name: highlightTrail;
  animation-iteration-count: infinite;
  width: 35em;
}

.bTrail {
  background-color: #a3bae2;
  animation-duration: 3s;
  animation-delay: .4s;
  animation-name: highlightTrail;
  animation-iteration-count: infinite;
  width: 35em;
}

.cTrail {
  background-color: #678cd0;
  animation-duration: 3s;
  animation-delay: .5s;
  animation-name: highlightTrail;
  animation-iteration-count: infinite;
  width: 35em;
}

.dTrail {
  background-color: #4976c6;
  animation-duration: 3s;
  animation-delay: .6s;
  animation-name: highlightTrail;
  animation-iteration-count: infinite;
  width: 35em;
}

.eTrail {
  background-color: #678cd0;
  animation-duration: 3s;
  animation-delay: .7s;
  animation-name: highlightTrail;
  animation-iteration-count: infinite;
  width: 35em;
}

.fTrail {
  background-color: #a3bae2;
  animation-duration: 3s;
  animation-delay: .8s;
  animation-name: highlightTrail;
  animation-iteration-count: infinite;
  width: 35em;
}

.gTrail {
  background-color: #5881cb;
  animation-duration: 3s;
  animation-delay: .9s;
  animation-name: highlightTrail;
  animation-iteration-count: infinite;
  width: 35em;
}

@keyframes highlightTrail {
  from {
    background-color: #d0dbf0;
    border-top: .1em solid #a3bae2;
    border-bottom: .1em solid #a3bae2;
  }

  25% {
    background-color: #a3bae2;
    border-top: .1em solid #678cd0;
    border-bottom: .1em solid #678cd0;
  }

  50% {
    background-color:#4976c6;
    border-top: .1em solid #a3bae2;
    border-bottom: .1em solid #a3bae2;
  }

  75% {
    background-color: #678cd0;
    border-top: .1em solid #678cd0;
    border-bottom: .1em solid #678cd0;
  }

  to {
    background-color: #a3bae2;
    border-top: .1em solid #a3bae2;
    border-bottom: .1em solid #a3bae2;
  }
}

.groupSelection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: .5em;
  border: 0.05em solid #d3d3d3;
  /* border: 0.05em solid #161160; */
  /* border: .1em solid #f7f7f7; */
  row-gap: .5em;
  margin:  4em;
  z-index: 3;
  text-align: center;
  backdrop-filter: blur(10px);
  background-color: #d5e0f2;
}

/* ====================================
   Manage groups
   ====================================
*/

.newGroupConfigurationContainer  {
  width: 100%;
  height: 100%;
  background-color: #e2e2e2;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
}

.newGroupConfigurationContainer label  {
  margin: 1em 0 0 0;
}

.newGroupInformationContainer {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  align-items: start;
  padding: 0 2em;
}

.addNewNamesNewGroup {
  height: 20em;
  padding: 0.5em;
  border: .1em solid #e2e2e2;
  border-radius: .3em;
}

::placeholder {
  color:#8D92A4;
}

.groupCreation {
  width: 65%;
  height: 70%;
  margin: 5em auto;
  border-radius: .5em;
  display: flex;
  color: #8D92A4;
}

.editGroupContainer, .createNewGroupContainer {
  height: 100%;
}

.editGroupHeader, .newGroupHeader {
  font-size: 1.4em;
  font-weight: bold;
  margin: 1em;
}

.editGroupContainer {
  width: 35%;
  background-color: #f2f2f2;
  border-top-left-radius: .5em;
  border-bottom-left-radius: .5em;
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.createNewGroupContainer {
  width: 60%;
  background-color: #f7f7f7;
  border-top-right-radius: .5em;
  border-bottom-right-radius: .5em;
}

.createNewGroupName {
  margin: 0 0.5em;
  padding: .2em;
  width: 15em;
  border: .1em solid #e2e2e2;
  border-radius: .3em;
}

.buttonContainer {
  display: flex;
  column-gap: .5em;
  justify-content: center;
  margin: 1.2em 1em 0 1em;
}

.individualGroup {
  font-size: 1.2em;
  margin: 1em 2em;
  display: grid;
  grid-template-columns: 80% 10% 10%;
  column-gap: .5em;
  align-items: center;
}

.individualGroupName {
  padding: .2em;
  background-color: #fafafa;
  border-radius: .2em;
}

.individualGroupDelete:hover {
  cursor: pointer;
  color: #e2e2e2;
}

.newName {
  color: #f7f7f7;
  font-size: 1em;
}

.confirmationContainer {
  width: 30em;
  height: 15em;
  margin: 2em auto;
  background-color: #e5ecf6;
  color: #161160;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: .5em;
  border: .1em solid #161160;
  row-gap: 1em;
  margin: 0 4em;
  z-index: 3;
  text-align: center;
  backdrop-filter: blur(10px);
}

.groupSelection select {
  margin: 0 13em;
  text-align: center;
}

.startAnimation {
  height: 3em;
  margin: 1em 3em;
  text-align: center;
  vertical-align: baseline;
  border: 0 0 .5em 0;
  font-size: 1.5em;
  border: .1em solid #6188ce;
  border-radius: .3em;
  background-color: #6188ce;
  color: #f7f7f7;
}

.startAnimation:hover {
  cursor: pointer;
  background-color: #88a5da;
  border: .1em solid #88a5da;
}

.newGroupList {
  list-style-type: none;
}

.exitContainer {
  display: flex;
  justify-content: flex-end;
  padding: 0 2em;
}

.exit {
  border: .1em solid #818185;
  width: 2em;
  height: 2em;
  border-radius: 1.5em;
  font-size: 15px;
}

.newMemberForm, .newNameForm {
  display: flex;
  column-gap: 0.5em;
  justify-content: center;
}

.newName, .newMember {
  display: flex;
  column-gap: 0.5em;
  justify-content: center;
}

.createNewGroup {
  margin: 0 0 2em 0;
}


/* ====================================
   Group Members
   ====================================
*/

.groupMemberContainer {
  padding: 0em 1em 1em 0;
  z-index: 3;
}


.groupList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .5em;
  margin: 1em 0 0 0;
}

.individualBucket {
  width: 6em;
  height: 2em;
  margin: .1em .4em;
}

.individual {
  font-size: 15px;
  position: relative;
  width: 6.5em;
  border-radius: .2em;
  color: #f7f7f7;
  z-index: 5;
}

/* ====================================
   Congratulations Modal
   ====================================
*/

.congratulationsConfettiContainer {
  border: .1em solid #f7f7f7;
  border-radius: 0.3em;
  height: 31em;
  width: 80em;
  position: absolute;
  display: flex;
}

@keyframes congratulationsShimmerA {
  from {
    transform: rotate3d(2, -1, -1, -0.2turn);
  }

  to {
    transform:rotate3d(2, 0, 0, -0.8turn);
  }
}

.conA, .conB, .conC, .conD, .conE, .conF {
  width: 1.5em;
  height: 1.5em;
  margin: .5em;
  animation-delay: .2s;
  animation-duration: 2s;
  animation-name: congratulationsShimmerA;
  animation-fill-mode:forwards;
}

/* Background color
  background-color: #7698d4;
  background-color: #678cd0;
  background-color: #5881cb;
  background-color: #4976c6;
*/

/* OptionA */
/*
@keyframes congratulationsShimmerA {
  //// horizontal - vertical
  from {
    transform:
      translate(50px, 50px)
      rotate3d(2, -1, -1, -0.2turn);
    background-color: #7698d4;
  }
  10% {
    transform:
      translate(80px, 100px)
      rotate3d(-4, 3, -2, -0.4turn);
    background-color: #678cd0;
  }

  20% {
    transform:
      translate(120px, 120px)
      rotate3d(2, -1, -1, -0.2turn);
    background-color: #5881cb;
  }
  30% {
    transform:
      translate(190px, 140px)
      rotate3d(-4, 3, -2, -0.4turn);
    background-color: #4976c6;
  }
  40% {
    transform:
      translate(250px, 200px)
      rotate3d(2, -1, -1, -0.2turn);
    background-color: #7698d4;
  }
  50% {
    transform:
      translate(340px, 250px)
      rotate3d(-4, 3, -2, -0.4turn);
    background-color: #678cd0;
  }
  60% {
    transform:
      translate(600px, 300px)
      rotate3d(2, -1, -1, -0.2turn);
    background-color: #0b0a1f;
  }
  70% {
    transform:
      translate(900px, 400px)
      rotate3d(-4, 3, -2, -0.4turn);
    background-color: #4976c6;
  }
  80% {
    transform:
      translate(1400px, 450px)
      rotate3d(2, -1, -1, -0.2turn);
    background-color: #7698d4;
  }
  90% {
    transform:
      translate(1500px, 600px)
      rotate3d(-4, 3, -2, -0.4turn);
    background-color: #678cd0;
  }
  to {
    transform:
      translate(1600px, 8000px)
      rotate3d(2, -1, -1, -0.2turn);
    background-color: #0b0a1f;
  }
} */

.conA {
  background-color: #85a3d9;
  /* animation-delay: .3s;
  animation-duration: 1.8s;
  animation-name: congratulationsShimmer;
  animation-fill-mode: none; */
}

.conB {
  background-color: #7698d4;
  /* animation-delay: .3s;
  animation-duration: 1.7s;
  animation-name: congratulationsShimmer;
  animation-fill-mode: none; */
}

.conC {
  background-color: #678cd0;
  /* animation-delay: .3s;
  animation-duration: 1.6s;
  animation-name: congratulationsShimmer;
  animation-fill-mode: none; */
}

.conD {
  background-color: #5881cb;
  /* animation-delay: .3s;
  animation-duration: 2s;
  animation-name: congratulationsShimmer;
  animation-fill-mode: none; */
}

.conE {
  background-color: #4976c6;
  /* animation-delay: .3s;
  animation-duration: 1.5s;
  animation-name: congratulationsShimmer;
  animation-fill-mode: none; */
}

.conF {
  background-color: #4976c6;
  /* animation-delay: .3s;
  animation-duration: 3s;
  animation-name: congratulationsShimmer;
  animation-fill-mode: forwards; */
}

.congratulationsContainer {
  background-color: #0b0a1f;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  padding: 2em;
  border: .1em solid gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.gearIcon {
  width: 260px;
  width: 260px;
  margin: .3em 16.5em 0;
  opacity: 70%;
  border: .1em solid #f7f7f7;
  border-radius: .5em;
}

.confirmationModalContainer {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  padding: 1em;
  position: relative;
  bottom: 25em;
  border: 0.1em solid black;
  z-index: 10;
  margin: 1em 30em;
  border-radius: 0.5em;
  background-color: #e2e2e2;
  border: .1em solid #8D92A4;
  font-size: 1em;
}

.confirmationModalButtonContainer {
  display: flex;
  justify-content: center;
  column-gap: 2em;
}

.confirmationModalButtonContainer div {
  padding: 0.4em 0.5em;
  border-radius: 0.5em;
  background-color: #f2f2f2;
  border-radius: 0.2em;
  border: 0.05em solid #050505;
}

.confirmationModalButtonContainer div:hover {
  cursor: pointer;
  background-color: #ededed;
}

.winnerContainer {
  position: absolute;
  top: auto;
  width: 30em;
  height: 15em;
  background-color: #e5ecf6;
  color: #161160;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0.1em solid #161160;
  backdrop-filter: blur(10px);
  border-radius: 0.5em;
  border: .2em solid #f7f7f7;
}

.congratulations {
  font-family: 'Satisfy', cursive;
  font-size: 1.6em;
}

.winner {
  font-size: 4em;
  color: #5881cb;
}

.winnerExitButton {
  position: absolute;
  bottom: 3em;
  z-index: 10;
  color: #f7f7f7;
  font-size: 2.5em;
}

.winnerExitButton:hover {
  cursor: pointer;
  color: #1e1781;
}


/* ====================================
   Machine
   ====================================
*/

/* .machineContainerHighlight {
  border: .2em solid black;
} */

.machineContainer {
  position: relative;
  border: 0.05em solid #d3d3d3;
  /* border: 0.05em solid #161160; */
  /* border: .1em solid #f1f1f1; */
  border-radius: .3em;
  display: flex;
  flex-direction: column;
  background-color: #fcfcfc;
  overflow: hidden;
  width: 40em;
}

.backgroundImage {
  opacity: 40%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/*handle display of element to display against background image*/
.platformBox, .platform, .platformBall, .ballPlatformShelf, .ramp, #rampBall, .visibleShelf, .rampShelf {
  position: relative;
}

.dominoShelf, .rampShelf, .visibleShelf, .platform, .dominoTipper {
  background-color: #9bb4e0;
  border: .05em solid #161160;
}

.ballPlatformShelf {
  background-color: #9bb4e0;
  border-top: .05em solid #161160;
  border-right: .05em solid #161160;
  border-bottom: .05em solid #161160;
}

.dominoShelf {
  height: .8em;
  width: 33em;
  margin: -.4em 0 0 12em;
  position: relative;
}

.ballPlatformShelf {
  height: .8em;
  width: 29em;
  margin: -.4em 0 0 0;
}

.rampShelf {
  height: .8em;
  width: 22em;
  margin: -.4em 0 0 20em;
}


/* ====================================
   Dominos and Ball
   ====================================
*/

.dominosAndBall {
  width: 400em;
  display: flex;
  column-gap: 1em;
  margin: 1em 0 0 0;
  position: relative;

}

.dominoBall {
  width: 2em;
  height: 2em;
  border-radius: 5em;
  border: .15em solid black;
  background-color: #dcebf5;
  position: relative;
}

.dominoBallAnimate {
  animation-duration: 1.5s;
  animation-delay: 1.3s;
  animation-name: ballMove;
  animation-fill-mode: forwards;
}

.dominoBallContainer{
  display: flex;
  align-items: flex-end;
  padding: 0 0 0 13em;
}


@keyframes ballMove {
  from {
    transform:
    translateY(0%)
    translateX(0%)
  }

  5% {
    transform:
    translateY(1%)
    translateX(-156%)
  }

  6% {
    transform:
    translateY(2%)
    translateX(-157%)
  }

  7% {
    transform:
    translateY(3%)
    translateX(-157%)
  }

  8% {
    transform:
    translateY(4%)
    translateX(-157%)
  }

  9% {
    transform:
    translateY(5%)
    translateX(-200%)
  }

  10% {
    transform:
    translateY(5%)
    translateX(-230%)
  }

  20% {
    transform:
    translateY(400%)
    translateX(-230%)
  }

  30% {
    transform:
    translateY(405%)
    translateX(-360%)
  }

  to {
    transform:
    translateY(405%)
    translateX(-720%)
  }
}

.dominoTipper {
  height: 1em;
  width: 15em;
  margin: 2em 0;
}

.dominoTipperAnimate {
  animation-duration: .3s;
  animation-name: tipMove;
  animation-fill-mode: forwards;
}

@keyframes tipMove {
  from {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(10px, 0px);
  }

  50% {
    transform: translate(-20px, 0px);
  }

  to {
    transform: translate(50px, 0px);
  }
}

.dominosContainer {
  display: flex;
  column-gap: 1em;
  margin: 0 0 -3em;
}

.dominosContainer div, .platformBall, .dominoBall, .platformBox, #rampBall, .individual {
  border: .2em solid #3c6bc0;
  background-color: #6188ce;
}

.dominosContainer div {
  height: 5em;
  width: .8em;
}

.dominoJAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: .3s;
  animation-duration: .1s;
}

.dominoIAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: .4s;
  animation-duration: .1s;
}

.dominoHAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: .5s;
  animation-duration: .1s;
}

.dominoGAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: .6s;
  animation-duration: .1s;
}

.dominoFAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: .7s;
  animation-duration: .1s;
}

.dominoEAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: .8s;
  animation-duration: .1s;
}

.dominoDAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: .9s;
  animation-duration: .1s;
}

.dominoCAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  animation-duration: .1s;
}

.dominoBAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: 1.1s;
  animation-duration: .1s;
}

.dominoAAnimate {
  animation-name: dominoFall;
  animation-fill-mode: forwards;
  animation-delay: 1.2s;
  animation-duration: .1s;
}

@keyframes dominoFall {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-60deg);
    width: .8em;
    height: 5.5em;
    box-shadow: 0.05em .4em .6em rgb(28 29 55);
    border-left: .2em solid #161160;
  }
}

.boxWithPlatformContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5em 12em 0 0;
}

.platformBox {
  height: 2em;
  width: 2em;
  margin: 0 0 -0.5em 6em;
  transform: rotate(10deg);
}

.platformBoxAnimate {
  animation-duration: 1.5s;
  animation-delay: 1.7s;
  animation-name: boxFlip;
  animation-fill-mode: forwards;
}

.platform {
  height: .5em;
  width: 10em;
  transform: rotate(10deg);
}

.platformAnimate {
  animation-delay: 1.7s;
  animation-name: platformFlip;
  animation-fill-mode: forwards;
}

.platformBall {
  height: 1em;
  width: 1em;
  border-radius: 5em;
}

@keyFrames platformFlip {
  0% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

@keyframes boxFlip {
  0% {
    transform: rotate(0);
  }

  20% {
    transform:
      translate(150px, -80px)
      rotate(180deg);
  }

  40% {
    transform:
      translate(400px, 40px)
      rotate(270deg);
  }

  50% {
    transform:
      translate(240px, 155px)
      rotate(-270deg);
  }

  100% {
    transform:
      translate(120px, 165px)
      rotate(-540deg);
  }
}

/* ====================================
   Ramp with Ball
   ====================================
*/

.rampWithBall {
  display: flex;
  /* column-gap: 4em; */
  justify-content: flex-end;
  align-items: flex-end;
  /* padding: 4em 24em .5em; */
}

#rampBall {
  width: 1em;
  height: 1em;
  margin: 0em 4em;
  border-radius: 5em;
}

.rampBallAnimate {
  animation-duration: 2s;
  animation-delay: 3s;
  animation-name: decidingBall;
  animation-fill-mode: forwards;
}

.ramp {
  width: 0;
  height: 0;
  border-bottom: 130px solid #9bb4e0;
  /* border: .1em solid #444444;
  background-color: #9bb4e0; */
  border-left: 200px solid transparent
}

@keyframes decidingBall {
  from {
    transform:
    translate(0px, 0px);
  }
  7% {
    transform:
    translate(-55px, 0px);
  }

  14% {
    transform:
    translate(-120px, 100px);
  }

  21% {
    transform:
    translate(-160px, -85px);
  }

  28% {
    transform:
    translate(-200px, 185px);
  }

  35% {
    transform:
    translate(-250px, -75px);
  }

  42% {
    transform:
    translate(-280px, 180px);
  }

  49% {
    transform:
    translate(-360px, 40px);
  }

  56% {
    transform:
    translate(-350px, -75px);
  }

  63% {
    transform:
    translate(-150px, 180px);
  }

  70% {
    transform:
    translate(-100px, 118px);
  }

  77% {
    transform:
    translate(-15px, 180px);
  }

  84% {
    transform:
    translate(60px, 23px);
  }

  91% {
    transform:
    translate(220px, 130px);
  }

  to {
    transform:
    translate(-50px, 550px);
  }
}


/* ====================================
   Pegs
   ====================================
*/

.shelfContainer {
  display: flex;
  flex-direction: column;
  row-gap: 3em;
  justify-content: center;
  width: 35em;
  padding: 4em 3em;
  position: relative;
}

.shelfRowOne, .shelfRowTwo, .shelfRowThree {
  display: flex;
  justify-content: space-around;
}

.visibleShelf {
  /* border-top:  0.1em solid #dedee4;
  border-bottom:  0.1em solid #7c7c8b;
  background-color: #6188ce; */
  /* border: .1em solid #444444;
  background-color: #9bb4e0; */
  height: .5em;
  width: 5em;
  border-radius: 1em;
}

/* ====================================
   Winner Pin
   ====================================
*/

.winnerPin {
  height: 2em;
  width: 2em;
  background-color: #9bb4e0;
  border: .2em solid black;
  border-radius: 5em;
}

.hiddenWinner {
  position: relative;
  left: 1em;
  bottom: 1em;
  height: 1em;
  width: 1em;
  border-radius: 5em;
  z-index: 10;
}

.modalExitButton {
  margin: 1em;
  width: 4em;
  height: 2em;
  z-index: 10;
  border: .1em solid #161160;
  border-radius: .3em;
  background-color: #f7f7f7;
  color: #161160;
}

.confirmModalBorder {
  border: 0.5em solid black;
  width: 32em;
  height: 17em;
  z-index: 1000;
  margin: 4em auto;
}

.aC {
  width: 20px;
  height: 20px;
  background-color: rgb(0, 0, 255, .4);
  animation-delay: .2s;
  z-index: 4;
  animation-duration: 3s;
  animation-name: winningFlip;
  animation-iteration-count: infinite;
}
.bC {
  width: 20px;
  height: 20px;
  background-color: rgba(140, 0, 255, 0.4);
  animation-delay: .3s;
  z-index: 4;
  animation-duration: 3s;
  animation-name: winningFlip;
  animation-iteration-count: infinite;
}
.cC {
  width: 20px;
  height: 20px;
  animation-duration: 3s;
  background-color: rgba(98, 0, 255, 0.4);
  animation-delay: .4s;
  z-index: 4;
  animation-name: winningFlip;
  animation-iteration-count: infinite;
}

.dC {
  width: 20px;
  height: 20px;
  animation-duration: 3s;
  background-color: rgba(0, 106, 255, 0.4);
  animation-delay: .5s;
  z-index: 4;
  animation-name: winningFlip;
  animation-iteration-count: infinite;
}

.eC {
  width: 20px;
  height: 20px;
  animation-duration: 3s;
  background-color: rgb(0, 0, 255, .4);
  animation-delay: .6s;
  z-index: 4;
  animation-name: winningFlip;
  animation-iteration-count: infinite;
}

.fC {
  width: 20px;
  height: 20px;
  background-color: rgba(200, 0, 255, 0.4);
  animation-delay: .7s;
  z-index: 4;
  animation-duration: 3s;
  animation-name: winningFlip;
  animation-iteration-count: infinite;
}

.gC {
  width: 20px;
  height: 20px;
  background-color: rgba(0, 98, 255, 0.4);
  animation-delay: .8s;
  animation-duration: 3s;
  z-index: 4;
  animation-name: winningFlip;
  animation-iteration-count: infinite;
}

@keyframes winningFlip {
  0% {
    transform:
      rotate(0)
      translate(0px, 20px); /* 130 or 90 */
  }

  20% {
    transform:
      translate(150px, -60px) /* 130 or 90 */
      rotate(180deg);
  }

  40% {
    transform:
      translate(350px, 40px)
      rotate(270deg);
  }

  50% {
    transform:
      translate(240px, 140px)
      rotate(-270deg);
  }

  100% {
    transform:
      translate(140px, 140px)
      rotate(-540deg);
  }
}

/* ====================================
   Feedback Form
   ====================================
*/

.feedbackPageContainer {
  background-color: #f1f1f1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 2em;
  row-gap: 1em;
  align-items: center;
  z-index: 100;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}

.feedbackContainer {
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
  width: 40em;
  margin: 1em auto;
  align-items: center;
}

.feedbackFormTitle {
  color: #93959c;
  font-size: 3em;
}

.feedbackFormHeader {
  color: #93959c;
  font-weight: bold;
}

.feedbackFormDescription {
  color: #93959c;
  width: 38em;
  text-align: center;
}

.feedbackFormContainer {
  color: #f7f7f7;
  border: .1em solid #f7f7f7;
  border-radius: .3em;
  margin: 1em;
  width: 45em;
  background-color: #93959c;
}

.feedbackFormLayout {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em 0 1.5em 0;
}

.feedbackType {
  margin: .1em 0 1em 0;
  padding: 0 .2em;
  text-align: center;
}

.feedbackDetails {
  width: 40em;
  height: 10em;
  margin: 0 0 1em 0;
  padding: 0.4em 0 0 0.4em;
}

.feedbackEmail {
  width: 20em;
  margin: 0 0 1em 0;
}

.feedbackSubmit {
  padding: .25em .5em;
  margin: 1em;
  border-radius: .3em;
  border: .1em solid #55596A;
}

.emailNote {
  font-size: .8em;
  position: relative;
  bottom: -1em;
  left: -10em;
}

.fa-circle-left, .back {
  color: #93959c;
}

.backContainer {
  display: flex;
  column-gap: 1em;
  align-items: center;
  position: relative;
  right: 40em;
  bottom: -4em;
}

.feedbackThankYou {
  font-size: 1.5em;
  font-weight: bold;
}

.feedbackConfetti {
  display: flex;
}

.aW {
  width: 20px;
  height: 20px;
  background-color: rgb(0, 0, 255, .4);
  animation-delay: .2s;
  z-index: 4;
  animation-duration: 3s;
  animation-name: feedbackFlip;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.bW {
  width: 20px;
  height: 20px;
  background-color: rgba(140, 0, 255, 0.4);
  animation-delay: .3s;
  z-index: 4;
  animation-duration: 3s;
  animation-name: feedbackFlip;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.cW {
  width: 20px;
  height: 20px;
  animation-duration: 3s;
  background-color: rgba(98, 0, 255, 0.4);
  animation-delay: .4s;
  z-index: 4;
  animation-name: feedbackFlip;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.dW {
  width: 20px;
  height: 20px;
  animation-duration: 3s;
  background-color: rgba(0, 106, 255, 0.4);
  animation-delay: .5s;
  z-index: 4;
  animation-name: feedbackFlip;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.eW {
  width: 20px;
  height: 20px;
  animation-duration: 3s;
  background-color: rgb(0, 0, 255, .4);
  animation-delay: .6s;
  z-index: 4;
  animation-name: feedbackFlip;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fW {
  width: 20px;
  height: 20px;
  background-color: rgba(200, 0, 255, 0.4);
  animation-delay: .7s;
  z-index: 4;
  animation-duration: 3s;
  animation-name: feedbackFlip;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.gW {
  width: 20px;
  height: 20px;
  background-color: rgba(0, 98, 255, 0.4);
  animation-delay: .8s;
  animation-duration: 3s;
  z-index: 4;
  animation-name: feedbackFlip;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes feedbackFlip {
  0% {
    transform:
      rotate(0)
      translate(-50px, 30px);
  }

  20% {
    transform:
      translate(150px, 0px)
      rotate(180deg);
  }

  40% {
    transform:
      translate(250px, 30px)
      rotate(270deg);
  }

  50% {
    transform:
      translate(350px, 0px)
      rotate(-270deg);
  }

  70% {
    transform:
      translate(400px, 20px)
      rotate(-270deg);
  }

  99% {
    transform:
      translate(480px, 20px)
      rotate(-540deg);
  }

  99% {
    transform:
      translate(490px, 20px)
      rotate(-540deg);
    background-color: rgba(0, 106, 255, 0.4);
  }
  100% {
    transform:
      translate(500px, 20px)
      rotate(-540deg);
    background-color: #0b0a1f;
  }
}

.scene {
  background-color: #f7f7f7;
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.AA {
  position: absolute;
  width: 190px;
  height: 120px;
  left: 10px;
  top: 10px;
}

.AA:nth-child(1) {
  transform:
    rotateY( 0deg)
    translateZ(288deg);
}

.AA:nth-child(2) {
  transform:
    rotateY( 40deg)
    translateZ(288deg);
}

.AA:nth-child(3) {
  transform:
    rotateY( 80deg)
    translateZ(288deg);
}

.AA:nth-child(4) {
  transform:
    rotateY( 120deg)
    translateZ(288deg);
}

.AA:nth-child(5) {
  transform:
    rotateY( 160deg)
    translateZ(288deg);
}

.AA:nth-child(6) {
  transform:
    rotateY( 200deg)
    translateZ(288deg);
}

.AA:nth-child(7) {
  transform:
    rotateY( 240deg)
    translateZ(288deg);
}

.AA:nth-child(8) {
  transform:
    rotateY( 280deg)
    translateZ(288deg);
}

.AA:nth-child(9) {
  transform:
    rotateY( 320deg)
    translateZ(288deg);
}


/* ====================================
   Create Account Form
   ====================================
*/

.borderDesign {
  width: 31.5em;
  height: 31em;
  position: fixed;
  left: 530px;
  top: 92px;
  right: 0;
  bottom: 0;
  border-radius: 0.3em;
  background-color:  #a1a4aef5;
  border: 0.06em solid #f7f7f7;
  box-shadow: 0em 0em 3em #f7f7f7;
}

.createAccountCover {
  width: 100%;
  height: 100%;
  /* background-color: rgba(230, 232, 238, 0.99); */
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}

.createAccountContainer {
  width: 30em;
  background-color: #f4f4f4;
  color: #50535d;
  display: flex;
  flex-direction: column;
  border-radius: .5em;
  border: 0.12em solid #3d3f47;
  margin: 5em auto 1em auto;
  z-index: 6;
  text-align: center;
  backdrop-filter: blur(10px);
}

.createAccountHeader {
  font-size: 1.5em;
  font-weight: bold;
  margin: 1em 1em 1.5em 1em;
}

.createAccountForm {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  margin: 0 4em;
}

.createAccountEmailContainer, .createAccountPasswordContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.createAccountInputHeader {
  text-align: left;
  font-size: .9em;
}

.createAccountInput {
  height: 3em;
  width: 25em;
  border-radius: .5em;
  border: 0.12em solid #3d3f47;
  background-color: #fcfcfc;
  padding: 0 0 0 1em;
}

.createAccountSubmit {
  margin: 2em 0 0 0;
  height: 3em;
  width: 19em;
  border: none;
  font-size: 1.1em;
  border-radius: .3em;
  background-color: #6188ce;
  color: #f7f7f7;
}

.loginLinkContainer {
  display: flex;
  column-gap: .5em;
  justify-content: center;
  margin: 2em;
}

.createAccountSignInLink {
  color: black;
}

.incorrectPasswordContainer {
  background-color: #eb401e;
  border-top-left-radius: .39em;
  border-top-right-radius: .39em;
  color: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 0.12em solid #3d3f47;;
}

.incorrectPasswordContainer i, .incorrectPasswordContainer div {
  margin: .6em;
}

.forgotPasswordOffer {
  color: #eb401e;
  text-align: left;
}

.forgotPasswordOffer:hover {
  cursor: pointer;
  color: #ad0f1c;
  text-align: left;
}

.passwordResetConfirmationContainer {
  width: 50em;
  background-color: #f9f9f9;
  color: #50535d;
  border-radius: .5em;
  border: 0.1em solid #fcfcfc;
  padding: 1em;
  margin: 2em auto;
  text-align: center;
}

.cancelBacktoHome {
  text-decoration: none;
  padding: .5em 1em;
  text-align: center;
  color: #50535d;
  margin: 0 12em .5em 10em;
}

.cancelBacktoHome:hover {
  background-color: #f7f7f7;
  border-radius: .5em;
}

/* ====================================
   Create Account Suggestion
   ====================================
*/

.fa-circle-xmark:hover, .accountSuggestion:hover {
  color: #d0d0d0;
  cursor: pointer;
}

.accountSuggestion {
  color: #f7f7f7;
  text-decoration: none;
}