/*
    main.css - A basic stylesheet for your web pages.
    This file contains foundational styles for the page body, a main content container,
    and smaller nested boxes.
*/

/* General body styling */
body {
    background-color: #f0f0f0; /* A light gray background for the entire page */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: flex; /* Use Flexbox to easily center the content box */
    justify-content: center; /* Horizontally center the child elements */
    align-items: center; /* Vertically center the child elements */
    min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
}

/* Main page background image */
.main-bg-image {
  background-image: url('../img/main-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* The main content box that holds all the page content */
.content-box {
    width: 50%;
    max-width: 800px; /* Prevents the box from getting too wide on large screens */
    background-color: #ffffff; /* A clean white background */
    border-radius: 10px; /* Smooth rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow to lift the box off the page */
    padding: 15px; /* Padding for the text inside */
}

/* Smaller boxes that go inside the main content box */
.in-box {
    background-color: #f0f0f5; /* A darker gray to stand out from the body */
    border-radius: 5px; /* Slightly rounded edges */
    border: 2px solid #a9a9a9; /* A visible border line */
    padding: 15px; /* Padding for the text inside */
    margin-bottom: 15px; /* Adds space between multiple in-boxes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* A subtle shadow for the inner boxes */
}

/* Styles for the h1, h2, p, and textarea HTML elements */
h1, h2, p {
    text-align: center; /* Center all h1, h2, and p tags */
}

p {
    padding: 15px; /* Add padding to all p tags */
}

/* Styles for all input, select, and textarea fields */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea,
select {
    width: 100%; /* Ensure these elements take up the full width of their container */
    border: 1px solid #ccc; /* A light gray border */
    border-radius: 5px; /* Smooth rounded edges */
    padding: 8px; /* Some padding for text inside */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1); /* Combines inner and outer shadows */
}

/* Styles specifically for textarea to add a right margin */
textarea,
select {
    margin-right: 15px; /* Adds a margin to the right of the textarea and select boxes */
}


/* New styles for a label and a button */
.labeled-item {
    padding: 15px; /* Add padding for the label */
}

.styled-button {
    background-color: #007bff; /* A pleasant blue color for the background */
    color: #ffffff; /* White text for contrast */
    border: none; /* Remove the default button border */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow */
    padding: 10px 20px; /* Add some padding inside the button */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    display: block; /* Make the button a block element to allow for centered margins */
    margin: 20px auto; /* Center the button horizontally and add space below it */
}

/* New styles for a link that looks like a button */
.styled-link-button {
    background-color: #007bff; /* A pleasant blue color for the background */
    color: #ffffff; /* White text for contrast */
    text-decoration: none; /* Remove the default underline on links */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow */
    padding: 5px 10px; /* Minimum padding */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    display: block; /* Allows block-level centering */
    max-width: fit-content; /* Makes the element only as wide as its content */
    margin: 20px auto; /* Centers the block-level element horizontally */
}

/* New styles to float elements left or right */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

/* Clearfix: A new utility class to contain floated elements */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* New class to center a div horizontally within its parent */
.center-div {
    display: flex;
    justify-content: center;
}

/* New class to stack a label and input vertically */
.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* Adds a small gap between each form field */
    margin-right: 15px; /* Adds a margin to the right of each form field */
}

/* New class to arrange form fields horizontally */
.form-row {
    display: flex;
    justify-content: space-between; /* Distributes items evenly */
    gap: 20px; /* Provides space between the fields */
}

.checkbox-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* This is the key change: it aligns children to the left */
    margin-bottom: 10px;
    margin-right: 15px;
}