/* css/main.css - The Brand Bible */

@font-face {
  font-family: 'Roboto-Latin';
  src: url('../fonts/Roboto-Latin.woff2') format('woff2'); /* Point to the file path */
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 16px; /* This is our baseline. 1rem now equals 16px. */
}

body {
  background-color: white;
  font-family: 'Roboto-Latin';
  margin: 0; padding: 0;
  line-height: 1.6; /* ADDED */
  font-size: 1rem; /* ADDED: This will be 16px */
}
nav {
  background-color: #333;
  color: white;
  padding: 0.5rem 1.25rem; /* 10px 20px */
  display: flex;
  align-items: center;
}
nav img {
  height: 2.5rem; /* 40px */
  margin-right: 1rem; /* 15px */
}
nav a {
  color: white;
  text-decoration: none;
  margin-right: 1rem; /* 15px */
  font-weight: bold;
}
header.hero {
  background-color: #f5f5f5;
  padding: 4rem 1.25rem; /* 60px 20px */
  text-align: center;
}
header.hero h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem; /* 10px */
}
header.hero p {
  font-size: 1.5rem;
  color: #555;
  margin-top: 0;
}
footer {
  margin-top: 2rem; /* 30px */
  text-align: center;
  font-size: 0.8rem; /* 0.8em */
  color: gray;
}
table {
  width: 100%; /* Make tables take up the full width of their container */
  border-collapse: collapse; /* Make borders look cleaner */
  margin-bottom: 2rem;
}
th, td {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 0.5rem; /* 8px */
}
thead {
  background-color: #f2f2f2; /* Give the header a light gray background */
}
h1 {
  font-size: 2.0rem;
  font-weight: bold;
}
img {
  max-width:100%;
}

/* === Component: Buttons === */

/* Primary Call-to-Action Button - For the MOST important action */
.btn-primary {
  display: inline-block; /* Allows us to set padding */
  background-color: red; /* A clear, attention-grabbing blue */
  color: white;
  padding: 0.75rem 1.25rem; /* 12px 20px */
  border-radius: 0.25rem; /* 5px */
  text-decoration: none;
  font-weight: bold;
  border: none;
}

/* Add a hover effect for better user experience */
.btn-primary:hover {
  background-color: #0056b3; /* A darker blue on hover */
}

iframe {
  max-width: 100%; /* Ensures the iframe never overflows its container */
  border: 0; /* Removes the default border */
  height:auto;
}

@media (max-width:768px) {
  body {
    background-color: purple;
  }
}