/* Základní nastavení a barvy */

:root {

    --bg-color: #0d0d0d;

    --text-color: #e0e0e0;

    --accent-color: #8b0000; /* Krvavě červená */

    --card-bg: #1a1a1a;

    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

    background-color: var(--bg-color);

    color: var(--text-color);

    font-family: var(--font-main);

    margin: 0;

    line-height: 1.6;

    transition: background 0.5s, color 0.5s;

}

/* Styl pro JS interaktivitu */

body.sepia-mode {

    --bg-color: #2b2620;

    --text-color: #d4c4a8;

    --accent-color: #5e3a24;

}

/* Hlavička a navigace */

header {

    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 

                url('https://www.transparenttextures.com/patterns/dark-leather.png');

    padding: 2rem;

    text-align: center;

    border-bottom: 3px solid var(--accent-color);

}

header h1 {

    font-size: 3rem;

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 5px;

    color: var(--accent-color);

}

nav ul {

    list-style: none;

    padding: 0;

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 20px;

}

nav a {

    text-decoration: none;

    color: var(--text-color);

    font-weight: bold;

    transition: 0.3s;

}

nav a:hover, nav a.active {

    color: var(--accent-color);

}

/* Hlavní obsah a Flexbox layout */

.container {

    max-width: 1000px;

    margin: 0 auto;

    padding: 2rem;

}

.intro {

    display: flex; /* Flexbox pro rozložení textu a obrázku */

    align-items: center;

    gap: 40px;

    margin-bottom: 40px;

}

.text-content {

    flex: 2;

}

.image-content {

    flex: 1;

}

.image-content img {

    width: 100%;

    border-radius: 10px;

    filter: grayscale(100%) sepia(20%);

    box-shadow: 0 0 15px var(--accent-color);

}

/* Karty s díly */

.highlights {

    display: flex;

    gap: 20px;

    flex-wrap: wrap; /* Responzivita */

}

.card {

    background-color: var(--card-bg);

    padding: 1.5rem;

    flex: 1;

    min-width: 250px;

    border-left: 4px solid var(--accent-color);

    transition: transform 0.3s;

}

.card:hover {

    transform: translateY(-10px);

}

/* Tlačítko */

button {

    background-color: var(--accent-color);

    color: white;

    border: none;

    padding: 10px 20px;

    cursor: pointer;

    font-weight: bold;

    margin-top: 15px;

}

footer {

    text-align: center;

    padding: 2rem;

    font-size: 0.8rem;

    opacity: 0.6;

}