/* styles.css */

/* Ensure audio player extends full width */
audio {
    width: 100%;
    max-width: 100%; /* Ensure it does not exceed the width of its parent */
    box-sizing: border-box; /* Include padding and borders in the width */
    margin: 0; /* Remove any margin around audio player */
}

/* Ensure body takes up full height and width */
body {
    margin: 0;  /* Remove default margin */
    padding: 0; /* Remove default padding */
    width: 100%; /* Ensure body takes full width */
    height: 100%; /* Ensure body takes full height */
    box-sizing: border-box; /* Include padding and borders in the width/height */
}

/* Images should take full width of their containers and maintain aspect ratio */
/*
img {
    width: 100%; /* Make images take up full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure images are block-level and remove any extra spaces below them */
    margin: 0; /* Remove any default margins */
}
*/
/* Paragraphs with centered content */
.center {
    text-align: center; /* Center-align images and text */
}

/* Ensure full-width input fields */
.full-width-input {
    width: 100%;
    box-sizing: border-box;
}

/* Style for disabled inputs */
input:disabled {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

/* Additional styles for textarea */
textarea {
    width: 100%;
    height: 200px; /* Set fixed height */
}

/* Optional - this is just to remove default spacing on some block elements */
p, div {
    margin: 0;
    padding: 0;
}

/* Hide the honeypot field using its ID */
#subject {
    position: absolute; /* Remove from normal flow */
    width: 1px; /* Minimal width */
    height: 1px; /* Minimal height */
    padding: 0; /* No padding */
    border: 0; /* No border */
    overflow: hidden; /* Hide overflow */
    clip: rect(0, 0, 0, 0); /* Clip to hide */
    white-space: nowrap; /* Prevent line breaks */
}

/* Style for disabled inputs */
input:disabled {
    background-color: #f0f0f0; /* Light gray background */
    color: #999; /* Gray text */
    cursor: not-allowed; /* Indicate that the field is not clickable */
}

/* p { */
/*     text-align: left; /* /* Align text to the left for better readability */
/* } */

/* Alternate ideas for the .html file */
/* <input type="text" id="name" name="name" required class="full-width-input" size="20"> */
/* <input type="email" id="email" name="email" required class="full-width-input" size="20"> */
/* <textarea id="message" name="message" required class="full-width-input" style="height: 200px;" rows="1" cols="20"></textarea> */