html, body {
    margin: 0;
    padding: 0;
}

body {
    padding-top: 20px;
    padding-bottom: 20px;

}
main.container {
    max-width: 60% ; /* Adjust the percentage as needed */
    margin: auto; /* Centers the container */
}

.header, .footer {
    padding: 10px 0; /* Reduced padding */
}
.bold-headline {
    font-weight: bold;
    font-size: 2.4; /* Adjust the size as needed for desktop */
}

h2 {
    font-size: 2em; /* Adjust the size as needed for desktop */
}

.article-section {
    padding: 20px 0;
}
#article-content {
    font-size: 1.3em; /* Increase the font size as needed */
}
p {
    line-height: 1.4;
}

.checkmark-list {
    list-style: none; /* Remove default list bullets */
    padding-left: 0; /* Remove default padding */
}

.checkmark-list li {
    position: relative; /* Needed for absolute positioning of the checkmark */
    padding-left: 25px; /* Space for the checkmark */
    margin-bottom: 10px; /* Space between list items */
}

.checkmark-list li:before {
    content: '\2713'; /* Unicode character for a checkmark */
    position: absolute;
    left: 0;
    color: green; /* Change color as needed */
}
.styled-quote {
    padding: 20px;
    margin: 20px 0;
    border-left: 5px solid #007bff; /* Blue left border */
    background-color: #f8f8f8; /* Light grey background */
    font-style: italic;
}

.styled-quote footer {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
}

.styled-quote cite {
    font-weight: bold;
}


.age-btn {
    padding: 10px 20px;
    font-size: 1.2em;
}

.large-button {
    padding: 15px 30px; /* Increased padding for a larger button */
    font-size: 1.2em; /* Larger font size */
    border-radius: 5px; /* Adjusted border-radius for aesthetics */
}


.bold-headline {
    font-weight: bold;
}

.breadcrumb {
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    font-size: small;
    color: grey;
}

.breadcrumb a {
    color: grey;
}

@media (max-width: 768px) {
    .bold-headline, h4 {
        text-align: center; /* Center align headlines on smaller screens */
	}
    main.container {
        max-width: 95%; /* Slightly wider on smaller screens */
    }
	/* Mobile and small devices */
@media (max-width: 768px) {
    .bold-headline {
        font-size: 1.8em; /* Smaller font size for mobile */
    }

    h2 {
        font-size: 1.4em; /* Smaller font size for mobile */
    }
}
}

.btn-secondary {
    background-color: #007bff; /* Bootstrap primary blue color */
    border-color: #007bff; /* Matching border color */
}

blockquote {
    padding: 20px;
    margin: 20px 0;
    background-color: #f9f9f9; /* Light grey background */
    border-left: 5px solid #0078d4; /* Solid color border on the left */
    font-style: italic;
    font-size: 20px; /* Larger font size for emphasis */
    line-height: 1.6;
    color: #555; /* Darker text color */
}

/* Optional: if you want to style any paragraphs within your blockquote */
blockquote p {
    margin: 0; /* Removes the default paragraph margin */
}