*{
  font-family: sans-serif;
  margin: 0;
}

#popToggle{
  z-index:999;
  height: 30px;
  width: 30px;
  background-color: dodgerblue;
  border-radius: 8px;
  box-shadow: 0 6px grey;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  color: white;
  font-weight: bold;
  margin-top: 20px;
  cursor: pointer;
  position: absolute;
  user-select: none;
}
#popToggle.inactive{
  margin-left: 40px;
  transition: box-shadow 0.5s, margin-left 2s;
}
#popToggle.active{
  margin-left: max(21vw, 210px);
  transition: box-shadow 0.5s, margin-left 2s;
}
#popToggle.inactive:hover, #popToggle.active:hover{
  box-shadow: 0 2px grey;
  transition: box-shadow 0.5s, margin-left 2s;
}

#popMenu{
  z-index:999;
  background-color: #d3d3d3;
  overflow-x: hidden;
  border-right: 8px solid dodgerblue;
  position: absolute;
  height: 100vh;
}
#popMenu.inactive{
  width: 0;
  transition: width 2s;
}
#popMenu.active{
  width: max(20vw, 200px);
  transition: width 2s;
}

.main-carousel{
  /*display: inline;*/
  width: 60vw;
  margin: auto;
}

.flickity-page-dots{
  margin-bottom: 15vh;
}
.flickity-page-dots .dot{
  transition: 0.5s;
}
.flickity-page-dots .dot.is-selected {
    opacity: 1;
    background-color: dodgerblue;
    transition: 0.5s;
}
.flickity-button {
  background: #78c6ff;
  transition: 0.8s;
  box-shadow: 0 6px dodgerblue;
}
.flickity-button:hover {
  background: dodgerblue;
  transition: 0.5s;
  box-shadow: 0 2px dodgerblue;
}
.flickity-button:active {
  opacity: 1;
}
.flickity-button:disabled {
  display: none;
}

.carousel-cell {
  width: 60vw; /* full width */
  height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card {
  background-color: transparent;
  width: 40vw;
  height: 45vh;
  perspective: 1000px;
  margin: 30px 10px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;

  border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  box-shadow: 10px 10px dodgerblue;
}

.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
  font-size: 1.5em;
  box-shadow: 10px 10px #bbb;
}

.init-card{
    z-index: 4;
  position:absolute;
  top: 49.5%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 40vw;
  height: 45vh;

  border-radius: 10px;

  background-color: #bbb;
  color: black;
  box-shadow: 10px 10px dodgerblue;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.dis{
  display: none;
}

#shfToggle{
  z-index:999;
  height: 30px;
  width: 30px;
  right: 40px;
  background-color: dodgerblue;
  border-radius: 8px;
  box-shadow: 0 6px grey;
  font-size: 1.6em;
  display: flex;
  align-items:center;
  justify-content: center;
  font-family: sans-serif;
  color: white;
  font-weight: bold;
  margin-top: 20px;
  cursor: pointer;
  position: absolute;
  transition: box-shadow 0.5s;
  user-select: none;
}
#shfToggle:hover{
  box-shadow: 0 2px grey;
  transition: box-shadow 0.5s;
}

#reserveSet{
  position: absolute;
  z-index:999;
  bottom: 40px;
  right: 40px;
  display: flex;
  gap: 20px;
  background-color: #d3d3d3;
  border-radius: 8px;
  height: 36px;
  flex-direction: row-reverse;
}

#numSaved{
  display: flex;
  align-items:center;
  justify-content: center;
  font-size: 1.6em;
  color: white;
  font-weight: bold;
}

.marToggle{
  height: 30px;
  width: 30px;
  background-color: dodgerblue;
  border-radius: 8px;
  box-shadow: 0 6px grey;
  font-size: 1.6em;
  display: flex;
  align-items:center;
  justify-content: center;
  font-family: sans-serif;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow 0.5s;
  user-select: none;
}
.marToggle:hover{
  box-shadow: 0 2px grey;
  transition: box-shadow 0.5s;
}
#togToggle{
  height: 30px;
  width: 30px;
  background-color: dodgerblue;
  border-radius: 8px;
  box-shadow: 0 6px grey;
  font-size: 1.6em;
  display: flex;
  align-items:center;
  justify-content: center;
  font-family: sans-serif;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow 0.5s;
  user-select: none;
}
#togToggle:hover{
  box-shadow: 0 2px grey;
  transition: box-shadow 0.5s;
}

#addSet{
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}