/* style.css */

#header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns children to the start (left) */
    padding: 0px;
    flex-wrap: wrap; /* Allows items to wrap as needed */
}

.logo {
    max-width: 120px;
    height: auto;
    min-width: 50px; /* Sets a minimum width for the logo */
}

.header-actions {
    display: flex;
    align-items: center; /* Vertically aligns the items in the center */
    justify-content: flex-start; /* Ensures h1 and start button are aligned to the start (left) */
}

h1 {
    font-size: 16px;
    color: #0067a0;
    margin-left: 15px;
}

#start-button-img {
    cursor: pointer;
    height: 30px;
    width: 100px;
    margin-left: 10px;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s;
}


body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#word-display {
    font-size: 80px;
    margin-bottom: 10px;
}
.highlighted {
    color: #ea234b;
}


#image-container {
    position: relative;
    margin-top: 20px;
    height: 400px;
    width: 400px;
    display: flex;
    align-items: flex-end; /* Ensures bottom alignment */
    justify-content: center; /* Center align */
}
#image-fixed, #image-stretch {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    object-fit: contain; /* Ensures the content is sized to maintain its aspect ratio while fitting within the element’s content box. */
    max-height: 300px;
    width: auto; /* Maintain aspect ratio */
}
#image-fixed {
    z-index: 1; /* Lower than #image-stretch, ensuring it's beneath */
}
#image-stretch {
    z-index: 2; /* Ensures it overlays on top of #image-fixed */
}


#grid-area {
    display: grid;
    grid-template-columns: repeat(8, 30px); /* Creates 8 columns, each [#]px wide */
    grid-template-rows: repeat(5, 30px); /* Creates 5 rows, each [#]px high */
    gap: 1px; /* Adds a gap between cells */
}
.grid-cell {
    width: 100%; /* Fills the cell */
    height: 100%;
    border: 1px solid lightgray;
}
.highlighted-border {
    border-color: #ea234b; /* Highlight color */
}
#grid-area .grid-cell.highlighted-border {
    border-color: #ea234b; /* Increased specificity */
}

#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffcc00;
    opacity: 0.7;
    transform: rotate(45deg);
    animation: confetti-fall linear;
    --random-left-offset: 0px;
}
/* Randomize the animation for each confetti piece */
.confetti:nth-child(even) { background-color: #ff4444; }
.confetti:nth-child(odd) { background-color: #44ff44; }
.confetti:nth-child(3n) { background-color: #4488ff; }
@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(45deg); }
    100% { transform: translateY(100vh) rotate(45deg); }
}

/*
Notes for scaling in mobile devices:

Aspect Ratio Boxes: For non-image elements where aspect ratio needs to be maintained, 
consider using a wrapping element with a percentage-based padding top, 
which is a common technique for creating aspect-ratio boxes.

Responsive Font Sizes: For text (like your word display), 
consider using vw units for font sizes to ensure the text scales 
with the viewport width, making it legible across devices.

Testing and Adjustment: The specific values (like 90vw, 80vh, 6vw, etc.) 
should be adjusted based on your specific layout, content, and design needs. 
It's important to test these styles across different devices 
to ensure the desired appearance and functionality.
*/
@media (max-width: 800px) {
    #header {
        flex-direction: column;
        align-items: center;
    }

    .logo {
        max-width: 80px;
        margin-bottom: 5px; /* Adjust space below logo */
    }

    .header-actions {
        flex-direction: column; /* Stack items vertically */
        align-items: center;    /* Center items horizontally */
        /*flex-direction: row;  Keeps h1 and start button inline */
        /* justify-content: center; Centers h1 and the button within their container */
        width: 100%; /* Ensures the container takes full width of its parent, aiding in centering */
        margin: 0; /* Resets any auto margins that may have been applied */
    }

    h1, #start-button-img {
        margin: 5px 5px; /* Adds a small margin to separate the h1 and start button */
    }

    h1 {
        margin-left: 5px;
    }

    img, #word-display, #plot-area {
      width: 90vw; /* Fill most of the screen width */
      max-height: 80vh; /* Prevent overrunning the screen height */
      object-fit: contain; /* For images, to maintain aspect ratio without cropping */
      margin: 2vh auto; /* Centering and providing some vertical spacing */
    }
  
    #word-display {
      font-size: 18vw; /* Scale the font size with screen width */
    }
  
    #plot-area .grid-cell {
        width: 30px; 
        height: 30px;
    }  
}