body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("kezdolap_hatter.jpg");
    background-color: #1C1C1C;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: aliceblue;
    font-size: 100%;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}
.skip-link:focus,
.skip-link:active {
    position: static;
    width: auto;
    height: auto;
    margin: 5px;
    padding: 5px 10px;
    background-color: #343a40;
    color: aliceblue;
    text-decoration: none;
    border: 1px solid #6c757d;
    z-index: 10000;
}

.container > header:not(.standard-header) h1 {
    font-size: 4em;
    margin-bottom: 1rem;
}

.main-navigation {
    margin-bottom: 1rem;
}
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-navigation li {
    margin: 0.25rem 0;
}
.main-navigation a {
    color: aliceblue;
    text-decoration: none;
}
.main-navigation a:hover {
    text-decoration: underline;
}

.standard-header {
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #555;
}
.standard-header h1 {
    font-size: 1.8em;
    margin: 0;
}
.standard-header h1 a, .standard-navigation .nav-link {
    color: aliceblue;
    text-decoration: none;
}
.standard-navigation .nav-link:hover {
    text-decoration: underline;
}
.standard-navigation .nav-link.active {
    text-decoration: underline;
}

a:not(.btn):not(.nav-link):not(.skip-link):not(.dropdown-item) {
    color: aliceblue;
    text-decoration: underline;
}
a:visited:not(.btn):not(.nav-link):not(.skip-link):not(.dropdown-item) {
    color: #CFD8DC;
}

hr {
    border: 0;
    height: 1px;
    background-color: aliceblue;
}

.standard-main {
    text-align: left;
}
.standard-main h2, .standard-main h3 {
    margin-bottom: 0.75rem;
}

.form-section fieldset {
    border: 1px solid #495057;
    padding: 0.75rem;
}
.form-section .form-check-label a {
    color: #82CAFF;
}
.form-section .form-check-label a:visited {
    color: #64B5F6;
}
.form-buttons .btn-outline-secondary {
    color: aliceblue;
    border-color: aliceblue;
}
.form-buttons .btn-outline-secondary:hover {
    background-color: aliceblue;
    color: #333;
}

.aszf-body h2 {
    text-align: center;
    margin-bottom: 1rem;
}
.aszf-text-container {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
    background-color: #212529;
    border: 1px solid #495057;
    padding: 1rem;
}
.scroll-filler {
    min-height: 600px;
}

footer {
    font-size: 0.9em;
}

.member-card, .song-entry {
    background-color: #212529;
    border: 1px solid #495057;
}
.member-card h3, .song-entry h3 {
    font-size: 1.5em;
    margin-bottom: 0.5rem;
}
.member-card .member-role, .member-card .member-dates, .song-entry .fun-fact-content p {
    font-size: 0.95em;
}
.fun-fact-content {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #343a40;
    border: 1px solid #495057;
}
.fun-fact-content h4 {
    font-size: 1.1em;
    margin-bottom: 0.25rem;
}
.history-table-section details summary {
    background-color: #343a40;
    border: 1px solid #495057;
    cursor: pointer;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
}
.history-table-section .table-bordered th,
.history-table-section .table-bordered td {
    border: 1px solid #495057;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

.figure-custom-max-width {
    max-width: 300px;
}

.container-custom-max-width {
    max-width: 720px;
}

@media screen and (max-width: 768px) {
    .container > header:not(.standard-header) h1 {
        font-size: 2.5em;
    }
}

@media print {
    html[data-bs-theme="dark"] body, body {
        font-family: "Times New Roman", Times, serif;
        background-image: none;
        background-color: #FFFFFF;
        color: #000000;
        font-size: 10pt;
    }
    .container, .container-fluid {
        max-width: none; width: auto;
        padding: 0; margin: 0;
        text-align: left;
    }
    header, .standard-header, nav, .main-navigation, .standard-navigation, footer, .standard-footer, .skip-link, .btn, .form-buttons, .aszf-actions, .back-to-top-link, .video-responsive-container, .placeholder-image {
        display: none;
    }
    hr {
        border: 0; height: 1px;
        background-color: #cccccc;
        margin: 1rem 0;
    }
    a, a:visited,
    .standard-header h1 a,
    .nav-link {
        text-decoration: none;
        color: #000000; 
    }
    a[href^="http"]:after, a[href^="mailto"]:after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
    }
    h1, h2, h3, p, li, label, legend, td, th, .form-check-label,
    .member-card, .song-entry, .fun-fact-content {
        color: #000000;
        background-color: transparent;
        border: none; 
    }
    input[type="text"], textarea, fieldset {
        border: 1px solid #ccc;
        background-color: #fff;
        color: #000;
    }
    img { max-width: 150px; }
    video, iframe { display: none; }
    .history-table-section details summary { display: none; }
    .history-table-section details[open] summary {
        display: block;
        font-weight: normal; 
        margin-bottom: 0.5em;
        color: #000000;
        background-color: transparent;
        border: none;
        padding: 0;
    }
    .history-table-section .table-responsive { overflow-x: visible; }
    .history-table-section table, .history-table-section th, .history-table-section td {
        border: 1px solid #ccc;
        color: #000000;
    }
    .history-table-section th { background-color: #f2f2f2; }
}