* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #3b3b3b;
    color: #202020;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hlavný kontajner */
.main-container {
    display: flex;
    flex: 1;
}

/* Hlavný obsah */
main {
    flex: 1;
    padding: 2rem;
    background: #274258;
    margin: 0;
    color: #a7b2b8;
}

.content {
    max-width: 100%;
}

.content h1 {
    color: #d2dfea;
    margin-bottom: 1rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

.content h2 {
    color: #b9c5d1;
    margin: 1.5rem 0 1rem 0;
}

.content p {
    margin-bottom: 1rem;
}

.content ul, .content ol {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.content li {
    margin-bottom: 0.5rem;
}

/* Päta */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 0.25rem;
    margin-top: auto;
}

.footer-link {
    color: #3498db;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Animácie */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-loading {
    opacity: 0;
    transform: translateY(20px);
}

.content-loaded {
    animation: fadeIn 0.5s ease forwards;
}

/* Loading indicator */
.loading {
    text-align: center;
    padding: 2rem;
    color: #666;
}

.loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

/* Na mobile zmeň layout na column */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    
    /* Zabezpeč že obsah nie je prekrytý menu */
    main {
        position: relative;
        z-index: 1;
    }
    
    /* Menu má vyšší z-index */
    nav {
        z-index: 1000;
    }
}

@keyframes dots {
    0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
    40% { color: #666; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
    60% { text-shadow: .25em 0 0 #666, .5em 0 0 rgba(0,0,0,0); }
    80%, 100% { text-shadow: .25em 0 0 #666, .5em 0 0 #666; }
}