/* responsive.css */

    /* Tablet optimizations */
    @media (max-width: 768px) { 
        body { /* Font */
            font-size: 17px; 
        }
        .baby-name-svg-container { /* Layout */
            max-width: 450px; 
        }
        .baby-name-animated { /* Font */
            font-size: 70px; 
        }
        .header-submessage { /* Font */
            font-size: 1em; 
        }
        .section-heading { /* Font */
            font-size: 1.8em; 
        }
        #countdown span { /* Font */
            font-size: 2.6em; 
        }
        #countdown div { /* Layout */
            min-width: 55px; 
        }
        .button { /* Layout & Font */
            padding: 10px 22px; 
            font-size: 0.88em; 
        }
        .page-footer { /* Layout */
            padding: 30px 15px;
        }
        .page-footer p { /* Font */
            font-size: 0.95em; 
        }
        .main-content-area { /* Layout */
            width: 92%;
            padding: 15px 10px; 
        }
        body.message-page-custom-animations .main-content-area { /* Layout */
            padding: 15px 20px;
        }
        #gift-message-section .message-content p { /* Font */
            font-size: 1em; 
        }
        .site-navigation { /* Layout */
            padding: 6px 0;
        }
        .site-navigation a { /* Layout & Font */
            font-size: 0.85em;
            margin: 0 6px;
            padding: 5px 10px;
        }
        .signature-names { /* Font */
            font-size: 1.5em; 
        }

        .size-details { /* Layout */
            padding: 0 5px;
        }
        .data-item { /* Layout */
            padding: 10px 12px;
        }
        .note-section { /* Layout */
            padding: 12px;
        }
        .content-section { /* Layout */
            padding-top: 20px; 
            padding-bottom: 10px; 
            margin-bottom: 20px; 
        }
        .data-label { /* Font */
            font-size: 0.8em; 
        }
        .data-value { /* Font */
            font-size: 1.05em; 
        }
        .note-heading { /* Font */
            font-size: 1.2em; 
        }
        .note-content { /* Font */
            font-size: 1em; 
        } 
        .section-message { /* Font */
            font-size: 1em; 
        } 
        .countdown-due-date { /* Font & Layout */
            font-size: 1.05em;
            margin-bottom: 15px; 
        }
    }

    /* Mobile optimizations */
    @media (max-width: 480px) { 
        body { /* Font */
            font-size: 16px; 
        }
        .page-header { /* Layout */
            padding: 15px 10px 8px; 
        }
        .baby-name-svg-container { /* Layout */
            max-width: 300px; 
            margin: 0 auto 10px auto; 
        }
        .baby-name-animated { /* Font & Theme */
            font-size: 60px; 
            stroke-width: 1.1px; 
        }
        .header-submessage { /* Font & Layout */
            font-size: 0.9em; 
            line-height: 1.3; 
            margin-bottom: 10px; 
        }

        .site-navigation { /* Layout */
            margin-top: 5px; 
            padding: 5px; 
            margin-bottom: 10px; 
        }
        .site-navigation a { /* Layout & Font */
            font-size: 0.85em; 
            margin: 0 4px; 
            padding: 4px 8px; 
            display: inline-block; 
            margin-bottom: 3px; 
        }
        .main-content-area { /* Layout */
            padding: 10px 5px;   
            margin: 10px auto;   
            width: 96%;          
        }
         body.message-page-custom-animations .main-content-area { /* Layout */
            padding: 15px; 
            width: 95%; 
        }
        .section-heading { /* Font & Layout */
            font-size: 1.5em; 
            margin-bottom: 15px; 
        }
        #gift-message-section .message-content p { /* Font */
            font-size: 1em; 
        }
        .signature-names { /* Font */
            font-size: 1.4em; 
        }

        .size-details { /* Layout */
            padding: 0; 
        }
        .data-item { /* Layout */
            padding: 10px 12px; 
            margin-bottom: 12px;
        }
        .data-label { /* Font */
            font-size: 0.8em;
        }
        .data-value { /* Font */
            font-size: 1em;
        }
        .note-section { /* Layout */
            padding: 12px;
            margin-top: 25px;
        }
        .note-heading { /* Font */
            font-size: 1.15em; 
        }
        .note-content { /* Font */
            font-size: 1em; 
        }
        .content-section { /* Layout */
            padding-top: 15px; 
            padding-bottom: 10px; 
            margin-bottom: 15px; 
        }
        .content-section:first-child { /* Layout */
             padding-top: 5px;
        }
        .section-message { /* Font */
            font-size: 1em; 
        } 


        #countdown-section { /* Layout */
            margin-bottom: 20px; 
        }
        #countdown { /* Layout */
            gap: 5px;  
            padding: 8px 2px; 
        }
        #countdown div { /* Layout */
            min-width: initial;  
            width: auto;          
            flex: 1 1 0px;        
            padding: 4px 1px;   
        }
        #countdown span { /* Font & Layout */
            font-size: 1.5em;   
            line-height: 1.1; 
            margin-bottom: 2px; 
        }
        #countdown .label { /* Font */
            font-size: 0.75em; 
            letter-spacing: 0.25px; 
            white-space: nowrap; 
        }

        .registry-buttons { /* Layout */
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .button { /* Layout & Font */
            width: calc(100% - 20px); 
            max-width: 280px; 
            margin: 8px auto; 
            padding: 12px 15px;
            font-size: 0.9em;
            display: block; 
        }
        .page-footer { /* Layout */
            padding: 25px 10px;
        }
        .page-footer p { /* Font */
            font-size: 0.95em; 
        }
        .countdown-due-date { /* Font & Layout */
            font-size: 0.95em;
            margin-bottom: 12px;
        }
    }