/*
 * Universal styles for all elements and pseudo-elements.
 * Applies box-sizing: border-box to all elements to ensure that padding and borders 
 * are included in the element's total width and height. Also sets margin and padding to 0.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* Ensures consistent box-sizing across all elements */
    margin: 0;
    /* Removes default margin */
    padding: 0;
    /* Removes default padding */
}

/*
  * Root variables for color scheme to provide easy customization.
  * These are CSS custom properties (variables) defined on the root element 
  * for light-grey, dark-blue, and orange color values used throughout the design.
  */
:root {
    --light-grey: #f5f6f7;
    /* Light grey background color */
    --dark-blue: #1b1b32;
    /* Dark blue color used for the background */
    --orange: #f1be32;
    /* Orange color used for highlights */
}

/*
  * Body style for overall page layout.
  * The body is set up with flexbox to center content vertically and horizontally.
  * Uses a monospaced font-family for coding themes, light-grey color text on dark-blue background.
  * Padding is applied on the left and right sides.
  */
body {
    display: flex;
    /* Enables flexbox for body to arrange child elements */
    flex-direction: column;
    /* Stacks children in a vertical direction */
    align-items: center;
    /* Centers children horizontally */
    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
        monospace;
    /* Applies monospaced font family for a coding look */
    font-size: 1.125rem;
    /* Sets base font size */
    color: var(--light-grey);
    /* Uses light-grey text color */
    background-color: var(--dark-blue);
    /* Sets background color to dark blue */
    padding: 0 4px;
    /* Adds padding on left and right */
}

/*
  * Header 1 style (for primary titles).
  * A larger font size, centered text, and margins for spacing around the title.
  */
h1 {
    font-size: 2.125rem;
    /* Larger font size for the main heading */
    text-align: center;
    /* Centers the text */
    margin: 20px 0;
    /* Adds margin on top and bottom */
}

/*
  * Header 2 style (for secondary titles).
  * Smaller than h1, but similar styling for alignment and margins.
  */
h2 {
    font-size: 1.5rem;
    /* Smaller than h1 but still prominent */
    text-align: center;
    /* Centers the text */
    margin: 20px 0;
    /* Adds margin on top and bottom */
}

/*
  * Input container styling.
  * Uses flexbox to arrange input elements vertically with a gap between them.
  * The container width is responsive, clamped between 320px and 460px.
  * Aligns items in the center horizontally and vertically.
  */
.input-container {
    display: flex;
    /* Enables flexbox for input container */
    flex-direction: column;
    /* Stacks elements vertically */
    gap: 10px;
    /* Adds a 10px gap between elements */
    justify-content: center;
    /* Centers children vertically */
    align-items: center;
    /* Centers children horizontally */
    width: clamp(320px, 50vw, 460px);
    /* Responsive width (between 320px and 460px) */
    margin: 10px auto;
    /* Centers container with top and bottom margin */
}

/*
  * Label styling inside the input container.
  * Prevents breaking of words and adjusts spacing between characters.
  */
.input-container label {
    white-space: nowrap;
    /* Prevents word wrapping in labels */
    word-spacing: -6px;
    /* Reduces the word spacing */
}

/*
  * Convert button styling.
  * Full width of its container with an orange background, border radius, and pointer cursor.
  * The font size and family inherit from the parent.
  */
.convert-btn {
    font-size: inherit;
    /* Inherits font size from parent */
    font-family: inherit;
    /* Inherits font family from parent */
    background-color: var(--orange);
    /* Sets background color to orange */
    width: 100%;
    /* Makes the button take up full width of the parent */
    height: 2rem;
    /* Sets a fixed height */
    padding: 0 6px;
    /* Adds horizontal padding */
    border: none;
    /* Removes the border */
    border-radius: 2px;
    /* Adds rounded corners */
    cursor: pointer;
    /* Changes cursor to pointer on hover */
}

/*
  * Number input field styling.
  * Makes the input field inherit the font size and gives it padding.
  * Also ensures the input takes up full width of its container.
  */
.number-input {
    font-size: inherit;
    /* Inherits font size from parent */
    padding: 0.3rem;
    /* Adds padding inside the input field */
    width: 100%;
    /* Ensures the input takes up the full width of the container */
}

/*
  * Output container styling.
  * Ensures the output section has proper width and is centered in the page.
  */
.output-container {
    margin-inline: auto;
    /* Centers the container horizontally */
    width: clamp(320px, 50vw, 460px);
    /* Sets responsive width */
}

/*
  * Result section styling.
  * Displays the result in a centered, visually distinct area with padding, borders, and a minimum height.
  */
#result {
    display: flex;
    /* Uses flexbox for centering */
    align-items: center;
    /* Centers content vertically */
    justify-content: center;
    /* Centers content horizontally */
    font-size: 2rem;
    /* Sets larger font size for result text */
    text-align: center;
    /* Centers text */
    min-height: 80px;
    /* Sets a minimum height for the result box */
    margin-block-start: 20px;
    /* Adds margin on top */
    padding: 15px;
    /* Adds padding inside the result box */
    border: 2px solid var(--orange);
    /* Orange border around the result box */
    border-radius: 2px;
    /* Rounded corners */
}

/*
  * Animation container for displaying a list of animation frames.
  * Uses flexbox to reverse the column direction and push content to the bottom.
  * Has a dashed orange border and padding for visual separation.
  */
#animation-container {
    display: flex;
    /* Enables flexbox */
    flex-direction: column-reverse;
    /* Reverses column layout (new frames appear at the bottom) */
    justify-content: end;
    /* Pushes content to the bottom */
    gap: 1rem;
    /* Adds space between frames */
    margin-block-end: 1rem;
    /* Adds bottom margin */
    min-height: 40vh;
    /* Sets a minimum height for the container */
    border: 2px dashed var(--orange);
    /* Dashed border around the container */
    padding: 1rem;
    /* Adds padding inside the container */
}

/*
  * Styling for individual animation frames.
  * Frames have padding, a solid orange border, and centered text.
  */
.animation-frame {
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
        helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
        sans-serif;
    /* Uses a system font stack for better readability */
    padding: 15px 10px;
    /* Adds padding inside the frame */
    border: 5px solid var(--orange);
    /* Orange solid border for frames */
    font-size: 1.2rem;
    /* Increases font size */
    text-align: center;
    /* Centers the text */
}

/* Media query for screens larger than 36em (typically tablets and above). */
@media screen and (min-width: 36em) {
    body {
        font-size: 1rem;
        /* Reduces font size for larger screens */
    }

    .input-container {
        flex-direction: row;
        /* Aligns input elements in a row on larger screens */
        width: unset;
        /* Removes width limitation */
    }

    .number-input {
        width: unset;
        /* Removes width limitation for the input */
    }
}