body {
    background-color: #f7e1e1; /* Beige Pink */
    display: flex;
    flex-direction: column; /* Stack loader and cubes vertically (index.html)*/
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    gap: 40px; /* Space between loader and cube container (index)*/
}
/* index loader*/
.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.loader {
  width: 6px;
  color: #222;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    24px -24px 0 0px, 48px -24px 0 0px, 72px -24px 0 0px,
    24px 0     0 6px, 48px 0     0 6px, 72px 0     0 6px,
    24px 24px  0 0px, 48px 24px  0 0px, 72px 24px  0 0px;
  transform: translateX(-48px);
  animation: l26 2.5s infinite linear;
}

@keyframes l26 {
    0%   { box-shadow: 24px -24px 0 0px, 48px -24px 0 0px, 72px -24px 0 0px, 24px 0 0 6px, 48px 0 0 6px, 72px 0 0 6px, 24px 24px 0 0px, 48px 24px 0 0px, 72px 24px 0 0px; }
    8%   { box-shadow: 24px -24px 0 2px, 48px -24px 0 0px, 72px -24px 0 0px, 24px 0 0 6px, 48px 0 0 4px, 72px 0 0 6px, 24px 24px 0 0px, 48px 24px 0 0px, 72px 24px 0 0px; }
    16%  { box-shadow: 24px -24px 0 4px, 48px -24px 0 0px, 72px -24px 0 2px, 24px 0 0 4px, 48px 0 0 0px, 72px 0 0 6px, 24px 24px 0 0px, 48px 24px 0 0px, 72px 24px 0 0px; }
    25%  { box-shadow: 24px -24px 0 6px, 48px -24px 0 0px, 72px -24px 0 6px, 24px 0 0 0px, 48px 0 0 0px, 72px 0 0 0px, 24px 24px 0 0px, 48px 24px 0 2px, 72px 24px 0 0px; }
    33%  { box-shadow: 24px -24px 0 6px, 48px -24px 0 2px, 72px -24px 0 6px, 24px 0 0 0px, 48px 0 0 0px, 72px 0 0 0px, 24px 24px 0 0px, 48px 24px 0 4px, 72px 24px 0 0px; }
    41%  { box-shadow: 24px -24px 0 4px, 48px -24px 0 6px, 72px -24px 0 4px, 24px 0 0 0px, 48px 0 0 0px, 72px 0 0 0px, 24px 24px 0 2px, 48px 24px 0 6px, 72px 24px 0 0px; }
    50%  { box-shadow: 24px -24px 0 6px, 48px -24px 0 6px, 72px -24px 0 0px, 24px 0 0 0px, 48px 0 0 0px, 72px 0 0 0px, 24px 24px 0 0px, 48px 24px 0 0px, 72px 24px 0 6px; }
    58%  { box-shadow: 24px -24px 0 4px, 48px -24px 0 6px, 72px -24px 0 0px, 24px 0 0 2px, 48px 0 0 0px, 72px 0 0 0px, 24px 24px 0 0px, 48px 24px 0 0px, 72px 24px 0 4px; }
    66%  { box-shadow: 24px -24px 0 0px, 48px -24px 0 4px, 72px -24px 0 0px, 24px 0 0 6px, 48px 0 0 0px, 72px 0 0 0px, 24px 24px 0 2px, 48px 24px 0 2px, 72px 24px 0 6px; }
    75%  { box-shadow: 24px -24px 0 0px, 48px -24px 0 6px, 72px -24px 0 0px, 24px 0 0 0px, 48px 0 0 2px, 72px 0 0 0px, 24px 24px 0 0px, 48px 24px 0 0px, 72px 24px 0 6px; }
    83%  { box-shadow: 24px -24px 0 0px, 48px -24px 0 6px, 72px -24px 0 0px, 24px 0 0 0px, 48px 0 0 4px, 72px 0 0 2px, 24px 24px 0 2px, 48px 24px 0 0px, 72px 24px 0 4px; }
    91%  { box-shadow: 24px -24px 0 0px, 48px -24px 0 4px, 72px -24px 0 0px, 24px 0 0 0px, 48px 0 0 6px, 72px 0 0 4px, 24px 24px 0 6px, 48px 24px 0 0px, 72px 24px 0 0px; }
    100% { box-shadow: 24px -24px 0 0px, 48px -24px 0 0px, 72px -24px 0 0px, 24px 0 0 6px, 48px 0 0 6px, 72px 0 0 6px, 24px 24px 0 0px, 48px 24px 0 0px, 72px 24px 0 0px; }
}
/* loading bar container index*/
.loading-bar-container{
    width: 130px;
    height: 22px;
    border-radius: 11px;
    background-color: #ddd;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.loading-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #333, #222);
    border-radius: 11px;
    transform-origin: left;
    transform: scaleX(0);
    animation: l1 5s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes l1 {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Cube styles (Now used in transfer.html) */
.cube-container {
    display: flex;         /* Arrange cubes horizontally */
    gap: 50px;              /* MUCH larger gap */
    justify-content: center; /* Center the cubes */
    flex-wrap: wrap;       /* Allow wrapping to the next line if needed */
}


.cube {
    width: 200px;          /* Much larger width */
    height: 150px;         /* Much larger height */
    border-radius: 15px;    /* Larger radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Larger shadow */
    cursor: pointer;
    transition: transform 0.2s ease-out;
    display: block;       /*  Needed for <a> to take up full space*/
    text-decoration: none;  /* Remove underline from <a> */
}

.cube:hover {
    transform: translateY(-15px); /* Larger rise */
}

.green-cube { background-color: #4CAF50; }
.yellow-cube { background-color: #FFEB3B; }
.orange-cube { background-color: #FF9800; }
.red-cube { background-color: #F44336; }