/*  
   JavaScript 7th Edition
   Chapter 4
   Hands-on Project 4-3
   
   Filename: styles.css
*/

/* General Layout Elements */
body {
   font-family: Arial, sans-serif;
   background-color: #f4f4f9;
   color: #333;
   margin: 0;
   padding: 20px;
}

header h1 {
   color: #2c3e50;
   border-bottom: 2px solid #2c3e50;
   padding-bottom: 10px;
}

article {
   background: #ffffff;
   padding: 20px;
   border-radius: 8px;
   max-width: 500px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   margin-top: 20px;
}

h2 {
   margin-top: 0;
   font-size: 1.4rem;
   color: #34495e;
}

/* Form Elements */
textarea {
   width: 100%;
   box-sizing: border-box;
   padding: 10px;
   font-size: 1rem;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
   margin-bottom: 10px;
}

textarea:focus {
   border-color: #3498db;
   outline: none;
   box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Character Counter Text */
#countLabel {
   font-size: 0.95rem;
   font-weight: bold;
   color: #555;
   margin-bottom: 10px;
}

#countValue {
   color: #2c3e50;
}

#limit {
   color: #7f8c8d;
}

/* Warning Box Error Output */
#warningBox {
   min-height: 20px; /* Prevents layout shifting when text updates */
   color: #e74c3c;   /* Noticeable alert red */
   font-weight: bold;
   font-size: 0.9rem;
   margin-top: 5px;
}