:root {
    /* Kolory */
    --color-background: linear-gradient(45deg, #000000, hsl(253, 100%, 42%));
    --color-text: #ffffff;

    /* spany */
    --color-highlight-one: rgb(127, 85, 241);
    --color-highlight-two: rgb(34, 230, 164);
    --color-highlight-three: rgb(82, 134, 117);
    --color-highlight-four: rgb(116, 108, 228);
    --color-highlight-five: rgba(248, 121, 121, 0.822);

    /* Rozmiary czcionek */
    --font-size-base: 16px;
    --font-size-large: 36px;
    --font-size-header: 4rem;
    --font-size-section-header: 3.6rem;
    --span-top: rgb(113, 231, 252);
    --span-top-shadow: 15px 0 15px blue;

    /* Odstępy */
    --padding-section: 5rem;
    --gap-grid: 2rem;


    /* header */
    --header-background: linear-gradient(45deg, #000000, #18191a);
    --top-header-background:  linear-gradient(45deg, #0007db, #3b00c5); 
}

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

html{
    font-size: 10px;
}
 
body {
    font-family: 'Roboto', sans-serif;
    background: var(--color-background);
    font-size: 36px;
    color: #fff;
}
 
header{
    background: var(--header-background);    
    position: relative;
    width: 100%;
    height: 20vh;
    box-sizing: border-box;
    box-shadow: 0 0 30px black;
    
}

.top-header {
    position: absolute;
    background: var(--top-header-background); 
    width: 100%;
    height: 5vh;               /* Define a height, e.g., 5vh for header height */
    display: flex;             /* Enable Flexbox */
    align-items: center;       /* Center vertically */
    justify-content: center;   /* Center horizontally */
    box-shadow: 0 0 15px black;
    transition: box-shadow .5s, border .5s;
    overflow: hidden;
}
.top-header:hover{
    box-shadow: 0 0 30px #2b456d;
    border: 0 solid #476188 ;
    
}


.promo-text{
    display: inline-flex;
    gap: 1.5rem;
    text-align: center;
    font-size: 16px;
    box-shadow: 0 0 10px solid black;
    text-transform: uppercase;
    color:  var(--color-text);
    animation: scrollText 40s linear infinite; /* Animacja przewijania */
    transition: letter-spacing .3s, text-shadow .3s, color .3s;
}
.promo-text:hover{
    color: #b6d7f1;
    text-shadow: 3px px #0f1c30;
    letter-spacing: 0.1rem;
}
@keyframes scrollText {
    0% {
        transform: translateX(200%); /* Start po prawej stronie */
    }
    50% {
        transform: translateX(-200%); /* Przejście na lewą stronę */
    }
    100% {
        transform: translateX(200%); /* Powrót na prawą stronę */
    }
}



.spantop{
    color: var(--span-top);
    text-shadow: var(--span-top-shadow);
}
/* .highlight-one{
    color: var(--color-highlight-one);
}
.highlight-two{
    color: var(--color-highlight-two);
}
.highlight-three{
    color: var(--color-highlight-three);
}
.highlight-four{
    color: var(--color-highlight-four);
}
.highlight-five{
    text-decoration: underline;
    color: var(--color-highlight-five);
} */

header .bottom-header{
    width: 100vw;
    height: 20vh;

    display: flex;
    justify-content: space-between;
    align-items: center;
    /* box-sizing: border-box; */
    /* box-shadow: 0 0 5px rgb(0, 0, 0); */
    
    padding: 5% 15% 5%;
}


.bottom-header .big-title{
    color: var(--color-text);
    margin-top: 2%;
    font-size: 2.6rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    color: aqua;
    text-shadow: 0 0 3px ;
    transition: text-shadow 1s;
    
}
.big-title:hover{
    text-shadow: 15px 0 30px blue;
}

.big-title h6{
    text-align: center;
    font-size: 1rem;
}

.bottom-nav .nav-list{
    list-style: none;
    display: flex;
    gap: 5rem;
    white-space: nowrap;
}

li a{
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    color: var(--span-top);
    text-decoration: none;
    font-size: 3.3rem;
}

li a:hover{
    color: aqua;
    text-shadow: 15px 0 15px blue;

    transition:.3s;
}
.icons{
    display: flex;
    gap: 2rem;
}
.icons i{
    color: aqua;
}
.icons i:hover{
    color: aqua;
    text-shadow: 0 0 15px blue;
    transform: scale(1.2);
    transition: color .3s, transform .3s;
}

.middle{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 5%;
    gap: 2rem; 
    padding: 5rem;
    background:  linear-gradient(45deg, #1b1b1b, #000000);
    color: #fff;

}

.column {
    background-color: #0f0f0f;
    padding: 1rem;
    border-radius: 8px;
    text-align: center; /* Wyśrodkowanie całego tekstu wewnątrz .column */
    text-decoration: line-through; /*unlock*/

}
.column:hover{
    background-color: #0f1c30;
    transition: color 3s;
}

.middle .column h3 {
    font-family: "Roboto" sans-serif;
    text-align: center;
    font-size: 3.2rem;
    transition: font-size .3s;
}
.middle .column h3:hover {
    text-align: center;
    font-size: 4.3rem;
}

.column img{
    width: 400px;
    height: 300px;
    margin-top: 3rem;
}

.column p{
    font-size: 2.5rem;
    text-align: center;
}

.section-header-text h1{
    text-align: left;
    font-size: 4rem;
    padding: 5rem;
    margin-left: 10%;
    background-color: #000000;
}

.fix .section-header-text{
    font-size: 3.6rem;
    max-width: 60%;

    text-align: center;
    margin: 5% 20% 0;
    font-family: "Roboto" sans-serif;
    color: aqua;
    text-shadow: 2px 2px blue;
}



}

@media (max-width: 600px) {
    /* Zmniejszenie rozmiarów czcionek */
    body {
        max-width: 600px;
        font-size: 26px;
    }
    .top-header {
        width: 100%;
        height: 10%;
    }

    .promo-text {
        font-size: 14px;
        margin: 2px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        animation: scrollText 25s linear infinite; /* Animacja przewijania */

    }
    .bottom-header{
        padding: 0;
        height: 5vh;
    }

    .bottom-header .big-title {
        font-size: 1.6rem;
        padding: 3%;
        letter-spacing: 0.2rem;
        text-shadow: 1px 1px blue;
    }
    .big-title h6{
        text-align: center;
    }

    li a {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .middle .column h3 {
        font-size: 2.6rem;
        padding: 0.5rem;
    }

    .column p {
        font-size: 1.8rem;
    }

    .fix .section-header-text {
        font-size: 2.8rem;
        max-width: 80%;
        margin: 4% 10% 0;
    }

    /* Dostosowanie paddingów i marginesów */
    header {
        height: auto;
        padding: 1rem;
    }

    .top-header {
        height: 4vh;
    }

    .bottom-header {
        height: 15vh;
        padding: 3%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        box-shadow: none;
    }

    .middle {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.2rem;
        padding: 2.5rem;
    }

    .column {
        padding: 0.5rem;
        margin: 1rem;
        background-color: #161616; /* Nieco ciemniejsze tło dla kontrastu */
    }

    .icons {
        display: flex;
        gap: 1.5rem;
        justify-content: end;
        margin-bottom: 10%;
    }
}


@media (max-width: 375px) {
    /* Redukcja rozmiarów czcionek */
    body {
        font-size: 14px;
    }

    .top-header {
        width: 100%;
        height: 4vh; /* lub odpowiednia wartość */
        margin: 0 auto; 
    }

    .promo-text {
        font-size: 0.9rem;
        margin: 0.5rem 0;
        white-space: nowrap; /* Zapobiega zawijaniu tekstu */
        overflow: hidden; /* Ukrywa nadmiar tekstu */
        text-overflow: ellipsis; /* Dodaje wielokropek na końcu, jeśli tekst jest za długi */
    }

    @keyframes scrollText {
        0% {
            transform: translateX(105%); /* Start po prawej stronie */
        }
        50% {
            transform: translateX(-105%); /* Przejście na lewą stronę */
        }
        100% {
            transform: translateX(105%); /* Powrót na prawą stronę */
        }
    }

    .bottom-header {
        display: flex;
        flex-direction: column; /* Układ pionowy */
        align-items: center;
        padding: 1rem;
        width: 100%;
        box-shadow: none; /* Możesz usunąć cienie dla mniejszych ekranów */
    }

    .bottom-header .big-title {
        
        font-size: 1.8rem;
        letter-spacing: 0.3rem;
        text-shadow: 2px px rgb(57, 40, 202);
        margin-top: 10%;

    }

    .bottom-nav .nav-list {
        flex-direction: row; /* Zmiana z poziomego na pionowy układ */
        gap: 1.5rem; /* Redukcja odstępu między linkami */
        align-items: center;
    }

    li a {
        font-size: 2rem;
    }

    .icons {
        gap: 1rem;
    }

    header {
        height: auto; /* Dostosowanie do zawartości */
        padding: 0;
    }

    .middle {
        grid-template-columns: 1fr; /* Zmiana siatki z 3 kolumn na 1 */
        gap: 1rem;
        padding: 2rem;
    }

    .column {
        padding: 1rem;
    }

    .column img {
        max-width: 480px;
        width: 100%; /* Dopasowanie szerokości do ekranu */
        height: auto; /* Zachowanie proporcji */
    }

    .column h3 {
        font-size: 2.4rem;
    }

    .column p {
        font-size: 1.8rem;
    }

    .fix .section-header-text {
        font-size: 2.4rem;
        max-width: 90%;
        margin: 5% auto;
    }



    /* Dostosowanie nagłówków i tekstów */
    .big-title h1 {
        font-size: 2.5rem;
        margin-top: 5%;
    }
    .big-title h6{
        font-size: 1rem;
    }

    /* Zmniejszenie odstępów */
    .bottom-header {
        padding: 2%;
        flex-direction: column; /* Zmiana układu na pionowy */
        align-items: center;
        gap: 0.1rem;
    }
}

@media (max-width: 812px) {
    body {
        font-size: 14px;
    }

    header{
        height: 30vh;
    }

    .top-header {
        height: 10%;
        padding: 1rem;
    }

    .bottom-header {
        padding: 5rem 2rem;
        gap: 2.5rem;
    }

    .bottom-nav .nav-list a{
        font-size: 2rem;
    }

    .middle {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.2rem;
        padding: 2.5rem;
    }


    .icons {
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .big-title h1{
        font-size: 2.2rem;
    }

    .fix .section-header-text {
        font-size: 2.2rem;
        margin: 8% auto;
        padding: 2rem;
    }
}