.spinner {
    text-align: center;
    animation-name: spin, depth;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
  }
  @keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(-360deg); }
  }
  @keyframes depth {
    0% { text-shadow: 0 0 black; }
    25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black; }
    50% { text-shadow: 0 0 black; }
    75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black; }
    100% { text-shadow: 0 0 black; }
  }

.card-body2 {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color:white;
    background-color: rgba(0, 0, 0, .3)
}

.card-body3 {
  flex: 1 1 auto;
  padding-left: 4vw;;
  margin-top: -40vh;
}

.model-title {
  color: rgba(255, 255, 255, 0.852); 
  font-size: 10vh; 
  margin-top: -5vh;
  font-weight: 900;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.model-title-sm {
  color: rgba(255, 255, 255, 0.852); 
  font-size: 4vh; 
  margin-top: -4vh;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.stack {
  display: grid;
  grid-template-columns: 1fr;
}

.stack span {
  font-weight: bold;
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 4rem;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even) { --glitch-translate: -8px; }

@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  };
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes glitch {
  0% {
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  4%, 100% {  text-shadow: none; transform: none; }
}

.btn-options {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  background: none;
  border-radius: 2px;
  border-color: rgba(255, 255, 255, 0.03);
  color: white;
}

.btn-options:hover{
  font-weight: 700;
}

.options-icon {
  color: rgba(109, 109, 109, 0.991);
}

.img-car {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.045));
}

.form-select1 {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 1.5rem 0.75rem;
  margin-top: 1rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.058);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.058);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.generate-btn {
  margin-top: 1rem;
  background: white;
  color: black;
  border-radius: 0.375rem;
  height: 62.75px;
  padding-left: 1rem;
  padding-right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.058);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
}

.option-label {
  color: white;
  margin-top: .75rem;
}

/* Michael's custom styles */

.navbar {
  position: absolute;
  left: 0;
  right: 0;
  padding-top: 30px;
  background: none !important;
  z-index: 1;
}

.navbar .nav-link {
  color: white;
}

#carouselExampleControls {
  font-family: porsche;
  font-size: 40px;
  color: white;
}

.main {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
}

.title {
  position: absolute;
  top: 5%;
  left: 10%;
  padding: 4vh 15px 0 15px;
}

.image {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image img {
  width: 800px;
}

.stats {
  position: absolute;
  top: 25%;
  left: 70%;
  border-radius: 20px;
  background: rgba(0, 0, 0, .5);
  padding: 20px;
  color: white;
}

/* .options {
  position: absolute;
  top: 10%;
  left: 75%;
}

.options form {
  display: flex;
  align-items: center;
  gap: 15px;
}

.options input[type="submit"] {
  border: none;
  background: none;
  font-weight: 700;
}

.dropdown {
  position: relative;
}

.dropdown label:hover {
  font-weight: 700;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  min-width: 500px;
  z-index: 1;
}

.dropdown-content label {
  display: block;
}

.dropdown input[type="radio"] {
  display: none;
}

.dropdown label {
  display: block;
  cursor: pointer;
}

.vertical-line, .horizontal-line {
  background: black;
  position: absolute;
  z-index: 0;
  display: none;
}

.vertical-line {
  width: 2px;
  height: 100vh;
  left: 15%;
}

.horizontal-line {
  width: 100vw;
  height: 2px;
  top: 25%;
} */