/* 
@author Grace Bero
base.css

This is a CSS file that contains the styles for the base layout of the website
index.html, about.html, and contact.html will get styles from this file
*/

/* General container for centering and max width */
.container {
  max-width: 900px; /* Set a maximum width */
  margin: 0 auto; /* Center horizontally */
  padding: 0 20px; /* Add some padding for smaller screens */
}

p {
  font-size: 1.3em; /* Adjust font size */
}

/* Column based items */
.parent {
  display: flex;
  gap: 1px; /* Adds space between children */
}

.child {
  flex: 1; /* Ensures children take up equal space, can be adjusted as needed */
}

/* body */
body {
  text-align: center; /* Center text */
  background-color: #ffffff; /* White background */
  font-family: Cambria; /* Use Cambria font */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
}

/* header */
header {
  background-color: #303848; /* Navy background color */
  border: 4px solid #BF9268; /* Add border */
  color: white; /* White text */
  margin-bottom: 5px; /* Space below header */
  font-weight: normal;
}

/* h1 */
h1 {
  font-family: Brush Script MT;
  font-size: 2.5cm; /* Adjust font size */
  margin-top: 0px;
}

/* button container */
.button-container {
  display: flex;
  justify-content: center;
  gap: 5px; /* Space between buttons */
  position: sticky; /* Make it sticky */
  top: 10px; /* Distance from the top of the viewport */
  z-index: 999; /* Ensure it appears above other content */
  background-color: transparent; /* Transparent background */
  margin-bottom: 20px; /* Space below buttons */
}

button {
  padding: 10px 20px; /* Padding for clickable buttons */
  background-color: #303848; /* Navy background */
  color: white; /* White text */
  font-size: 1.3em; /* Adjust font size */
  border: 2px solid #BF9268; /* Border */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth transition */
  font-family: Cambria;
}

/* Hover effect for buttons */
button:hover {
  background-color: #5f6a81; /* Lighter navy on hover */
}

footer {
  background-color: #303848; /* Navy background color */
  border: 4px solid #BF9268; /* Add border */
  color: white; /* White text */
  font-weight: normal;
}