/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Styles file 
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */    

    /* Containers 
    -------------------------------------------------------------------- */
        body { font-family: Arial, sans-serif; background-color: #fefefe; color: #2a2a2a; margin: 0; padding: 0; }
        .container { max-width: 800px; margin: 40px auto; background: #ffffff; padding: 30px; box-shadow: 0 0 12px rgba(0,0,0,0.08); border-radius: 10px; }
    /* ----------------------------------------------------------------- */

    /* Headings
    -------------------------------------------------------------------- */    
        h1 { font-size: 28px; margin-bottom: 10px; color: #222; text-align: center; }
        h2 { font-size: 20px; margin-bottom: 30px; color: #666; text-align: center; font-weight: normal; }

        @media (max-width: 600px) {
            .container { margin: 20px; padding: 20px; }
            h1 { font-size: 24px; }
            h2 { font-size: 18px; }
        }
    /* ----------------------------------------------------------------- */

    /* Forms
    -------------------------------------------------------------------- */    
        form textarea { width: 97%; padding: 10px; font-family: monospace; font-size: 14px; border-radius: 6px; border: 1px solid #ccd3dc; margin-bottom: 15px; background-color: #fcfcfc; color: #1a1a1a; }

        button        { background-color: #009688; color: white; padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; width: 100%; transition: background-color 0.3s; }
        button:hover  { background-color: #00796b; }
    /* ----------------------------------------------------------------- */

    /* Results
    -------------------------------------------------------------------- */   
        .results { margin-top: 30px; background: #f7f9fa; padding: 20px; border: 1px solid #d3dce6; border-radius: 6px; color: #222; }
        pre      { white-space: pre-wrap; background: #eef2f5; padding: 15px; border-radius: 4px; overflow-x: auto; color: #222; }
    /* ----------------------------------------------------------------- */

	/* Animate form and results
	-------------------------------------------------------------------- */
		#html-input-form 		{ transition: max-height 0.6s ease, opacity 0.6s ease; overflow: hidden; max-height: 1000px; opacity: 1; }
		#html-input-form.hidden { max-height: 0; opacity: 0; pointer-events: none; }

		#results-block 			{ opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
		#results-block.visible  { opacity: 1; transform: translateY(0); }
	/* ----------------------------------------------------------------- */

	/* Export buttons and copy button
	-------------------------------------------------------------------- */ 
		.export-links       { margin-top: 20px; }
		.button-list        { gap: 10px; margin-top: 10px; }
		.export-btn,
		button .export-btn  	{ background-color: #ccc; color: #333; border: none; padding: 10px 15px; text-decoration: none; border-radius: 4px; cursor: pointer; display: inline-block; width: 15%; text-align: center;}
		.export-btn:hover   { background-color: #bbb; }
	/* ----------------------------------------------------------------- */

    /* Clear results button
    -------------------------------------------------------------------- */ 
		.clear-results 				{ margin-top: 20px; }
		.clear-results button 		{ background-color: #ccc; color: #333; border: none; padding: 10px 15px; cursor: pointer; border-radius: 4px; }
		.clear-results button:hover { background-color: #bbb; }
    /* ----------------------------------------------------------------- */

    /* Donate text
    -------------------------------------------------------------------- */ 
        .donate-text         { margin-top: 40px; font-size: 14px; color: #555; text-align: center; }
        .donate-text a       { color: #009688; font-weight: bold; text-decoration: none; }
        .donate-text a:hover { text-decoration: underline; color: #00796b; }
    /* ----------------------------------------------------------------- */



/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* EOF
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */