.floating-div {
      height: 60vh; /* Full height */
      margin-top: 5vh;
      margin-bottom: 35vh;
      background-color: #f8f9fa; /* Light background */
      box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Optional: slight shadow */
      display: flex;
      flex-direction: column;
      padding: 1rem;
}
textarea {
      flex-grow: 1; /* makes textarea fill the remaining vertical space */
      resize: none; /* disables manual resizing */
      width: 100%;
      font-size: 1.1rem;
      line-height: 1.5;
      text-align: left; /* aligns text to the left - default but explicit */
      padding: 0.75rem;
      border: 1px solid #ced4da;
      border-radius: 0.375rem;
      font-family: inherit;
      margin-bottom: 2rem;
}

.scroll {
    overflow-x: hidden;
    min-height: 100vh;
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
}


.no_scroll {
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
}

button {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.card-placeholder {
  background-color: #e0e0e0; /* light grey */
  width: 100%;
  padding-top: 140%; /* maintain aspect ratio, e.g. 7:10 */
  border-radius: 0.25rem;
}


.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative; /* to allow z-index */
}

.card-hover:hover {
  transform: scale(2) translateY(-10px);
  z-index: 20; /* bring on top */
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

#cards-row {
    padding: 9rem;
}

#blur-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.2);
  z-index: 2;
  display: none;
}

.active-card {
  position: fixed !important;  /* Fix position to viewport */
  z-index: 3;
  transform: scale(1.2);
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.2); /* Center and scale */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease;
}

#face-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 90vh;
    z-index: 5;
    background: white;
    overflow: auto;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: center;
    justify-items: center;

    padding-top: 2rem;
    padding-right: 2rem;
}

#card-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1100;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 70vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#card-popup img {
  max-height: 100%;
  width: auto;
}

#face-image {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* border-radius: 1rem; */
}

#toggle-face-type {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10;
    width: 5vw;
    height: auto;
}

#download-zip-button {
    position: fixed;
    bottom: 10rem;
    right: 2rem;
    z-index: 1;
    width: 5vw;
    height: auto;
}


@media (prefers-color-scheme: dark) {
    body {
        background-color: #181a1b;
        color: #e0e0e0;
    }

    .floating-div {
        background-color: #23272a;
        box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }

    textarea {
        background-color: #23272a;
        color: #e0e0e0;
        border: 1px solid #444;
    }

    #face-window,
    #card-popup {
        background: #23272a;
        color: #e0e0e0;
        box-shadow: 0 0 30px rgba(0,0,0,0.7);
    }

    #blur-overlay {
        background: rgba(30,30,30,0.4);
    }

    .card {
        background-color: #222;
        --bs-card-border-color: "";
    }

    .card-placeholder {
        background-color: #333;
    }

    button,
    #toggle-face-type,
    #download-zip-button {
        background-color: #444;
        color: #e0e0e0;
        border-color: #666;
    }

    .card-hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.7);
    }
}