/* General body styling
   - This ensures the page uses the full viewport height and width and applies a consistent font */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full height of the viewport */
    width: 100vw; /* Full width of the viewport */
    font-family: Arial, sans-serif; /* Consistent font across the application */
}

/* Header section containing the form 
   - Positioned at the top with padding and shadow for visual separation */
.header-form {
    background-color: #f8f9fa; /* Light background color for the header */
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    z-index: 100;
    position: relative;
}

h1 {
    margin-bottom: 10px;
    font-size: 24px;
    text-align: center; /* Center align the title */
}

/* Form container for the domain input and button 
   - On small screens, the input and button stack vertically 
   - On larger screens, they align in a row */
.form-container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    /* On larger screens, the input and button are placed in a single row */
    .form-container {
        flex-direction: row;
        align-items: center;
    }
    .form-group {
        flex-grow: 1; /* The input field takes up available space */
        margin-bottom: 0;
    }
    .submit-btn {
        margin-left: 10px; /* Spacing between the input and the button */
    }
}

/* Scrollable container for the results 
   - WHOIS responses can be long, so this section allows vertical scrolling */
.result-container {
    flex-grow: 1; /* Take up available space */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 20px;
    background-color: #fff;
    margin-bottom: 50px; /* Leave space for the footer */
}

/* Fixed footer at the bottom 
   - Always visible and stays fixed at the bottom of the viewport */
.footer {
    background-color: #343a40; /* Dark footer color */
    color: white; /* White text for contrast */
    text-align: center; /* Center align the text */
    padding: 10px;
    position: fixed; /* Fix the footer to the bottom */
    bottom: 0;
    width: 100%; /* Full width footer */
    z-index: 100;
}

/* Formatting for the WHOIS result display 
   - Preformatted text block for displaying raw WHOIS data */
pre {
    background-color: #f8f9fa; /* Light background for the result area */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    white-space: pre-wrap; /* Allow long lines to wrap */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensure wrapping in all browsers */
	font-weight: normal;
}

/* Bold formatting for the labels in the WHOIS result */
.whois-label {
    font-weight: bold;
}

/* Indented formatting for the associated values in the WHOIS result */
.whois-value {
    margin-left: 20px; /* Indent the value for better readability */
    display: block; /* Force values onto a new line */
	font-weight: normal;
}

/* Adjust title font size for smaller screens */
@media (max-width: 768px) {
    h1 {
        font-size: 20px; /* Smaller font size for the title on mobile */
    }
}

/* Additional styles for the toggle button 
   - Spacing above the button for better layout */
.toggle-btn {
    margin-top: 10px;
}