/* 
This is where all the fancy colors and shapes come from
it's loaded in at the top of every page, so this is universal across the site
but you could make a new .css file for each page if you want them to look different
*/

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f6f9;
    color: #444;
}
header {
    background-color: #4CAF50;
    color: white;
    padding: 25px 0;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header h1 {
    margin: 0;
    font-size: 2.5rem;
}
div {
  display: flex;
  justify-content: center;
}
/* we can define classes if we want images of different size for example */
/* also, we can use % so that our site scales to the size of the screen (for mobile phones for example) */
.little_img img {
  width: 30%;
}
.big_img img {
  width: 80%;
}
nav {
    background-color: #343a40;
    /* Dark Gray */
    text-align: center;
    padding: 12px 0;
}
nav a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 20px;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}
nav a:hover {
    color: #ff6347;
    /* Tomato */
    text-decoration: underline;
}
section {
    padding: 25px;
    margin: 20px auto;
    max-width: 900px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}
section:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
section h2 {
    color: #007bff;
    /* Bright Blue */
    font-size: 1.8rem;
    margin-bottom: 15px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
table th,
table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
table th {
    background-color: #f1f1f1;
    font-weight: 600;
    color: #333;
}
table tr:nth-child(even) {
    background-color: #f9f9f9;
}
ul {
    list-style: none;
    padding: 0;
}
ul li {
    margin: 12px 0;
    font-size: 1.2rem;
}
ul li strong {
    color: #007bff;
}
form {
    max-width: 650px;
    margin: 25px auto;
}
form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
form input,
form textarea,
form button {
    width: 100%;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}
form input:focus,
form textarea:focus {
    border-color: #007bff;
    outline: none;
}
form button {
    background-color: #007bff;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
form button:hover {
    background-color: #0056b3;
}
form button:active {
    background-color: #004085;
}