body

    {
    font-family: "Datatype", monospace;
    }

  #main{
            display:flex;
            flex-direction: row;

        }

        #container 
        {
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
            display: table;
        }
        
        h1
        {
            font-size:50px;
            
        
        }

        #logo {
            background-color: black;
            color: white;
            text-align: center;
            
           
            display: flex;
            justify-content: space-between;

        }
        #logoL 
        {
        flex: 0 ; /* Stała szerokość 138px, nie kurczy się ani nie rośnie */
        padding: 22px;
        text-align: center;
        border-right: 2px dotted #cccccc;
        border-left: 2px dotted #cccccc;
        
        }

        #logoR 
        {
        flex: 0 ; /* Stała szerokość 138px, nie kurczy się ani nie rośnie */
        padding: 48px;
        text-align: center;
        border-left: 2px dotted #cccccc;
        border-right: 2px dotted #cccccc;
        
        
        }

        #logocenter 
        {
        flex: 0; /* Stała szerokość 138px, nie kurczy się ani nie rośnie */
        padding: 20px;
        text-align: center;
        
        }

        #menu
        {
            background-color:#303030;
            
            color:white;
            padding:10px;
            border: 2px solid lightgray;

        }
        

        #sidebar 
        {
             flex: 0 0 150px;
             min-height:620px;
            padding:20px;
            background-color:lightgray;
            text-align:center;
            font-size:18px;
            border-right: 2px dotted #666666;
            border-left: 2px dotted #666666;

           
        }
        #sidebar a {
    text-decoration: none;
    color: inherit;         /* Link przejmuje kolor od .optionnav */
    display: block;         /* Sprawia, że cały kafelek jest klikalny */
}

        #content 
        {
            background-color: white;
            color: black;
            float: left;
            padding: 20px;
            width: 600px;
        }
        
        
        
        /* Link kursorem */
        a:hover
        {
            color:red;
        }

        .obraz {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }

        #ad {
            width: 160px;
            padding: 5px;
            background-color: lightgray;
            border-right: 2px dotted #666666;
            border-left: 2px dotted #666666;
        }

        .obrazek {
                width: 150px;
                height: auto;
            }

        #footer {
            clear: both;
            background-color: black;
            color: white;
            text-align: center;
            padding: 20px;
            border: 2px solid lightgray;
        }

        #background {
            background-image: url("tlo.gif");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;

        }
        
        .sticky
{
    width:100%;
    position:fixed;
    left: 0;
    top:0;
    z-index:100;
}

.option {
    float: left;
    min-width: 50px;
    height: 25px;
    font-size: 18px;
    padding: 10px;
    border-right: 2px dotted #444444;
    opacity: 0.8; /* Poprawiono na kropkę */
    transition: 0.2s;
}

.option:hover {
    background-color: black;
    color: white;
    cursor: pointer;
}

.option2:hover {
    background-color: white;
    color: white;
    cursor: pointer;
}


/* Styl dla li jako kafelka */
.optionL
{
font-size:18px;
height:25px;
padding:10px;
border-bottom:2px dotted #444444;
}

.optionL:hover
{
    background-color:#f36742;
    color:white;
    cursor:pointer;
}

.optionR
{
font-size:18px;
height:30px;
padding:10px;
border-bottom:2px dotted #444444;
}

.optionL:hover
{
    background-color:#f36742;
    color:white;
    cursor:pointer;
}

/* Dodatkowo usuwamy styl z linków wewnątrz nav */
#sidebar a {
    text-decoration: none;
    color: black;
    display: block;
}

#menu a {
    text-decoration: none;
    color: white;
    display: block;
}

.karuzela {
    margin: 100px auto;
    width: 90%;
    border: 5px solid black;
    display: flex;
    overflow: hidden; /* Ukrywamy to, co wystaje poza ramkę */
    background: white;
}

.group {
    display: flex;
    align-items: center;
    gap: 1em;
    padding-right: 1em;
    flex-shrink: 0; /* TO JEST KLUCZOWE - zapobiega ściskaniu grupy */
    animation: spin 5s infinite linear;
    min-width: 100%; /* Zapewnia, że grupa zajmuje odpowiednio dużo miejsca */
}

.card {
    /* Ustawiamy stałą szerokość kart, żeby flex ich nie zgniótł */
    flex: 0 0 5em; 
    height: 5em;
    padding: 1em;
    background-color: #eee;
    font-size: 3rem;
    border-radius: .2em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}

/* Animacja z użyciem transform - działa płynniej niż translate */
@keyframes spin {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}