/* This is your master stylesheet: styles.css */

body, h1, h2, h3, h4, h5, h6, p, a, li, span {
  font-family: lora, sans-serif;
  color: rgb(0, 0, 0);
  font-size: 18px;
}

/* You can still style specific things, like links */
a {
  /* For example, you might want links to be a different color */
  color: rgb(128, 0, 0); 
}

a:hover {
  /* And change color when the mouse is over them */
  color: rgb(255, 255, 255);
  text-decoration: underline;
}

strong {
  font-family: inherit;
}

/* --- ADD THIS CODE FOR THE TABLE --- */

/* Styles for the table header cells (th) */
table th {
  font-family: lora, sans-serif; /* Font type */
  color: rgb(128, 0, 0);               /* Dark grey font color */
  font-size: 16px;               /* Font size */
  font-weight: bold;             /* Make header text bold */
}

/* Styles for the table data cells (td) */
table td {
  font-family: lora, sans-serif; /* Font type */
  color: #111827;               /* Slightly lighter grey font color */
  font-size: 15px;               /* Font size */
}

/* --- NEW CODE FOR THE FOOTER --- */
footer {
  text-align: center; /* This centers the text */
  color: #ffffff;     /* This makes the text color white */
}

.text-red {
  color: rgb(128, 0, 0); /* This is the same dark red as your other links */
}

/* --- CONTENT PROTECTION STYLES --- */

/* Prevent text selection on the entire body */
/*body {
  -webkit-user-select: none; /* Safari */
 /* -ms-user-select: none;     /* IE 10+ */
 /* user-select: none;         /* Standard syntax */
/* }  */

/* Disable right-click menu on all images, including your logo */
img {
  pointer-events: none;
}

/* Intro-Paragraph, journey description, and our slogan "motto" */
/* Define reusable variables at the root for easy changes */
:root {
    --primary-color: rgb(128, 0, 0); /* Example color: a pleasant blue. Change this to your actual primary color. */
    font-family: sans-serif; /* A good default font */
}

/* Container for the main description content */
.journey-description {
    /* Replaces the inline margin style */
    margin-left: 5%;
    margin-right: 5%;
}

/* Styling for the main introductory paragraph */
.intro-paragraph {
    color: var(--primary-color);
    font-weight: bold;
    text-align: justify;
    font-size: 18px;    /* Base font size */
    line-height: 32px;  /* Base line height */
}

/* Styling for the centered tagline section */
.tagline {
    text-align: center;
    margin-top: 20px; /* Adds some space between the paragraph and the tagline */
}

/* Styling specifically for the tagline's paragraph text */
.tagline p {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 22px;    /* Base font size */
    line-height: 38px;  /* Base line height */
}

/* --- Responsive Adjustments (Media Queries) --- */

/* For medium screens (tablets, etc.) - typically 768px and up */
@media (min-width: 768px) {
    .intro-paragraph {
        font-size: 20px;
        line-height: 36px;
    }
}

/* For large screens (desktops) - typically 1280px and up */
@media (min-width: 1280px) {
    .intro-paragraph {
        font-size: 24px;
        line-height: 42px;
    }
    
    .tagline p {
        font-size: 26px;
        line-height: 42px;
    }
}

/* For extra-large screens - typically 1536px and up */
@media (min-width: 1536px) {
    .intro-paragraph {
        font-size: 28px;
    }

    .tagline p {
        font-size: 32px;
    }
}