:root {
--primary-color: #4a6b3a;
--secondary-color: #8d9e6b;
--accent-color: #d4a762;
--light-color: #f8f5f0;
--dark-color: #2c3e2a;
}
        
h1 { text-align: center;
color: white;
}

h2 { 
text-align: center;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #006400;
line-height: 1.6;
}
        
.navbar {
background-color: #32CD32 !important;
color: black;
border-bottom: 1px solid #eee;
padding: 1rem 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
        
.navbar-brand, .nav-link {
color: black !important;
font-weight: 500;
}
        
.nav-link:hover {
color: #d4a762 !important;
}
        
.nav-item {
margin-right: 20px;
}
        
.hero {
padding: 2rem 0;
margin-bottom: 2rem;
border-bottom: 1px solid #eee;
}
        
.dino-section {
margin-bottom: 40px;
}
        
.dino-card {
background-color: #006400;
margin-bottom: 30px;
border-radius: 0;
border: none;
}
        
.dino-card img {
height: 350px;
width: 100%;
display: block;
border-radius: 0;
}
        
.dino-title {
color: white;
font-weight: bold;
margin-top: 15px;
}

.dino-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s;
}

.dino-title a:hover {
color: #228B22;
text-decoration: underline;
}
        
.facts-section {
background-color: #98FB98;
padding: 30px;
margin: 40px 0;
border-radius: 0;
}
        
.fact-item {
text-align: center;
padding: 15px;
}

.fact-number {
font-size: 2.5rem;
font-weight: bold;
color: black;
}
        
.fact-text {
font-size: 0.9rem;
}

.did-you-know {
background-color: #023020;
color: white;
padding: 20px;
margin-bottom: 30px;
border-radius: 0;
}
        
.did-you-know h3 {
color: white;
}
        
.about-dinos {
background-color: #98FB98;
padding: 20px;
margin-bottom: 30px;
border-radius: 0;
}
        
.video-container {
margin: 40px 0;
}
        
.footer {
background-color: #32CD32;
color: black;
padding: 30px 0;
text-align: center;
}
        
.dino-hero {
padding: 40px 0;
background-color: #006400;
margin-bottom: 40px;
border-bottom: 1px solid #eee;
}
        
.page {
display: none;
}
        
.page.active {
display: block;
}

.comparison-table {
width: 100%;
margin: 40px 0;
border-collapse: collapse;
}
        
.comparison-table th {
background-color: #32CD32;
color: white;
padding: 15px;
text-align: left;
}
        
.comparison-table td {
padding: 15px;
background-color: #98FB98;
border-bottom: 1px solid #eee;
}
        
.comparison-table tr:nth-child(even) {
background-color: white;
}

.carousel {
max-width: 100%;
margin: 0 auto;
border: 3px solid #4a6b3a;
}
        
.carousel-section {
margin: 40px 0;
}

.carousel-inner {
width: auto;
height: auto;
}
        
.carousel-item img {
width: auto;
height: auto;
object-fit: cover;
object-position: center;
}
        
.carousel-caption {
background-color: rgba(0,0,0,0.6);
bottom: 20px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
filter : invert(1);
}

.carousel-control-prev,
.carousel-control-next {
background-color: rgba(0, 0, 0, 0.1);
width: 6%;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
background-color: rgba(0, 0, 0, 0.2);
}

.footer {
background-color: #32CD32;
color: black;
padding: 30px 0;
text-align: center;
}

h1 { text-align: center;
color: white;
}

h2 { 
text-align: center;
}

.form-hero {
padding: 40px 0;
background-color: #006400;
margin-bottom: 40px;
border-bottom: 1px solid #eee;
}

.form-container {
background-color: #98FB98;
padding: 30px;
margin-bottom: 40px;
border-radius: 0;
}
        
.form-section {
margin-bottom: 30px;
}
        
.form-title {
color: black;
text-align: center;
font-weight: bold;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}

.form-background-wrapper {
background-image: url('https://ichef.bbci.co.uk/images/ic/976x549/p0l3cz8j.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
padding: 40px 0;
}

        
.form-container {
background-color: rgba(255, 255, 255, 0.9);
max-width: 800px;
margin: 0 auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.form-title, .form-label {
color: #333;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

@media (max-width: 991.98px) {
.navbar-collapse {
background-color: #98FB98;
color: white !important;
padding: 1rem;
margin-top: 0.5rem;
border-radius: 5px;
}
    
.navbar-toggler {
border-color: white;
}
}

.more {
    text-align: center;
}

.video-links {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
    text-decoration: underline !important;
    text-decoration-color: #d4a762 !important;
}

.video-links a {
    transition: color 0.3s ease;
}

.video-links a:hover {
    color: #d4a762 !important;
}

.video-links .fa {
    margin-right: 8px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
    text-decoration: none;
    font-size: 16px;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

.link-visited:visited {
color: #dcb881 !important;
}

@media print {
    .navbar, .footer, .video-container, .skip-link {
        display: none;
    }

    #home, #main-content {
        display: block;
        margin: 0;
        padding: 20px;
        width: 100%;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        background: white; 
    }

    h1, h2, h3 {
        color: black;
    }

    .card-img-top, .img-thumbnail, .dino-card {
        box-shadow: none;
        border: none;
    }

    .comparison-table {
        width: 100%;
        border-collapse: collapse;
    }

    .comparison-table th, .comparison-table td {
        border: 1px solid black;
        padding: 5px;
    }

    a::after {
        content: none;
    }
}

body.high-contrast {
    background-color: black;
    color: white;
    font-size: 1.2rem;
}

body.high-contrast a {
    color: yellow;
}

body.high-contrast .navbar {
    background-color: black !important;
    border-bottom: 2px solid white;
}

body.high-contrast .navbar-brand,
body.high-contrast .nav-link {
    color: white !important;
}

body.high-contrast .dino-card {
    background-color: black;
    border: 1px solid white;
}

body.high-contrast .footer {
    background-color: black;
    color: white;
}

body.high-contrast .comparison-table th {
    background-color: black !important;
    color: white;
}

body.high-contrast .comparison-table td {
    background-color: #36454F;
    color: white;
}

body.high-contrast .did-you-know {
    background-color: #36454F;
    color: white !important;
}

body.high-contrast .facts-section {
    background-color: #36454F;
    color: white;
}

body.high-contrast .fact-number {
    color: white;
}

body.high-contrast .about-dinos {
    background-color: #36454F !important;
    border-color: white !important;
}

body.high-contrast .dino-hero {
    background-color: black;
    color: white;
}

body.high-contrast .form-hero {
    background-color: black;
    color: white;
}

body.high-contrast .contrast-toggle {
    background-color: black !important;
    color: white !important; 
}

body.high-contrast h1 {
    font-size: 2.5rem !important;
}

body.high-contrast h2 {
    font-size: 2rem !important;
}

body.high-contrast h3 {
    font-size: 1.8rem !important;
}

body.high-contrast .fact-number {
    font-size: 3rem !important;
}

body.high-contrast .fact-text,
body.high-contrast p,
body.high-contrast li {
    font-size: 1.3rem !important;
}

body.high-contrast .nav-link {
    font-size: 1.3rem !important;
}

body.high-contrast .btn {
    font-size: 1.3rem !important;
    padding: 0.75rem 1.5rem;
}

#contrast-toggle {
    background-color: #000000;
    border-color: #ffffff;
    color: #ffffff;
    transition: all 0.3s ease;
}

#contrast-toggle:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

@media (max-width: 991.98px) {
    #contrast-toggle {
        margin-top: 0.5rem;
        width: 100%;
        text-align: center;
    }
}