* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'manrope';
    src: url('Font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* ! --- BODY --- */
body {
    font-family: 'manrope', Arial, sans-serif;
    color: #2E2E2E;
}
/* ! --- HEADER --- */
header {
    background-color: white;
    padding: 0.7rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: auto;
    font-weight: 500;
}
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.nav-links {
    display: flex;
}
ul {
    list-style: none;
    display: flex;
    gap: 5rem;
    align-items: center;
}
ul li a {
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
ul li a:hover {
    color: grey;
    cursor: pointer;
}
.jakub {
    position: absolute;
    left: 0;
    display: flex;
    margin-left: 2.6rem;
    font-size: 1.1rem;
}
.jakub:hover{
    cursor: pointer;
}
.icons {
    position: absolute;
    right: 0;
    display: flex;
    gap: 1.5rem;
    margin-right: 2.6rem;
}
.icons a {
    font-size: 1.5rem;
}
.icons a:hover {
    color: grey;
}
/* Specyficzne style dla Behance i LinkedIn */
.icons a:nth-child(1) {
    color: black;
}
.icons a:nth-child(2) {
    color: #0077b5;
}
/* ! --- HELLO --- */
.hello {
    display: flex; /* Flexbox for horizontal layout */
    align-items: center; /* Center content vertically */
    justify-content: space-between; /* Space between text and image */
    /* background: linear-gradient(to bottom, white, #A0DFFF, white); */
    padding: 10rem 2.6rem; /* Adjust padding to prevent overlap with header */
    gap: 2rem; /* Space between text and image */
}
.hello-content {
    flex: 1; /* Text section takes up available space */
}
.Hi {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;

    display: flex;
    align-items: center; /* Center-align icon and text */
    gap: 1rem; /* Space between icon and text */
}
.ikonka {
    width: 2.5rem;
    height: auto; /* Maintain aspect ratio */
}
.introduction {
    font-size: 1.2rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}
.introduction > b {
    font-weight: 700;
}
.hello-image img {
    max-width: 24rem; /* Set image width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any extra inline spacing */
}
/* ! --- Container --- */
.container {
    padding-left: 2.6rem;
    padding-right: 2.6rem;
}
/* ! --- WORKS --- */
.works {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Odstęp między elementami work-item */
    margin-bottom: 6rem;
} 
.work-item {
    display: flex;
    gap: 36px; /* Odstęp między lewym a prawym elementem */
    margin-bottom: 4rem;
}
.work-item > .left,
.work-item > .right {
    width: calc(50% - 18px); /* 50% szerokości minus połowa gap */
}
.work-item > .left img {
    width: 100%; /* Obraz zajmuje całą szerokość kontenera */
    height: 26rem; /* Wysokość dopasowana dla wszystkich obrazów */
    display: block; /* Usuwa ewentualne odstępy spowodowane przez inline-block */
    object-fit: cover; /* Dopasowuje obraz do kontenera, przycinając jeśli trzeba */
    border-radius: 8px; /* Opcjonalnie, aby obraz wyglądał bardziej estetycznie */
}
.steam_img, .fitmatch_img{
    object-position: left center;
}
.doghouse_img{
    object-position: right center;
}
.work-item .right .tittle {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.work-item .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.8rem;
}
.work-item .tag {
    color: #2645FF;
    padding: 0.5rem 1.563rem;
    font-size: 0.83rem;
    border-radius: 0.41rem;
    border: #2645FF solid 2px;
    font-weight: 500;
}
.work-item .right .content {
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.6rem;
}
.work-item .button-container {
    display: flex;
    gap: 1rem;
}
.work-item .button-container > button, .work-item .button-container a > button{
    font-size: 1rem;
    padding: 0.7rem 2rem;
    background-color: #2645FF;
    color: #FFFFFF;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
}
.work-item .button-container > button:hover, .work-item .button-container a > button:hover {
    background-color: #2C2C99;
}
/* ! --- ABOUT --- */
.about {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 4rem;
}
/* Nagłówek */
.heading {
    text-align: center;
    margin: 0;
    margin-bottom: 4rem;
}
.heading p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.66rem;
    font-weight: 900;
    gap: 0.5rem;
}
.icon {
    width: 2.5rem;
    height: auto;
    margin-right: 0.5rem;
}
/* Pierwsza część - podział 50/50 */
.first-part {
    display: flex;
    width: 100%;
    gap: 2rem;
    margin-bottom: 6rem;
}
/* Tekst (50% szerokości) */
.text-content {
    flex: 1;
}
.text-content p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2rem;
}
/* Pierwszy obrazek (50% szerokości) */
.image-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.image-content img {
    width: 100%;
    max-width: 100%;
    border-radius: 0.33rem;
}
.caption {
    font-size: 1rem;
    font-weight: 100;
    font-style: italic;
    color: rgba(28, 28, 28, 0.5);
    text-align: left;
    margin-top: 0.5rem;
}
/* Drugie zdjęcie - wyrównane do lewej */
.second-image {
    align-self: flex-start;
}
.second-image img {
    height: 30rem;
    width: auto;
}
/* ! --- UX RECOURCES --- */
/* ! --- Section 4: UX Resources --- */
.ux-resources {
    padding: 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden; /* Ukryj wychodzące elementy */
    margin-bottom: 0;
    padding-bottom: 0;
}
.ux-res {
    font-size: 2.66rem;
    font-weight: 900;
    margin-bottom: 2.7rem;
    display: inline-flex;
    align-items: center;
}
.ux-res-text {
    margin-bottom: 3.5rem;
    text-align: left;
    margin-left: 2.6rem;
}
/* Container for the tags */
.tags-wrapper {
    position: relative;
    overflow: visible; /* Umożliwia wyświetlanie cieni */
    padding-bottom: 2rem; /* Dodatkowe miejsce na cień */
}
.resources-tags {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start; /* Wyrównanie tagów do lewej */
    align-items: center; /* Wyrównanie elementów w pionie */
    position: relative; /* Już nie "absolute", aby nie wychodziło poza .tags-wrapper */
    will-change: transform;
    padding: 1rem 0;
}
.resources-tags > a{
    text-decoration: none;
    color: inherit;
}
.resources-tags > a:visited, a:focus, a:hover, a:active{
    text-decoration: none;
    color: inherit;
}
/* Individual tag styling */
.resource-tag {
    display: flex;
    align-items: center;
    padding: 0.33rem 1rem;
    border-radius: 6rem;
    font-size: 1em;
    font-weight: 500;
    box-shadow: 2px 2px 14px rgba(66, 68, 90, 0.2);
    flex-shrink: 0; /* Prevent tags from shrinking */
    padding-left: 0.4rem;
}
.resource-tag:hover {
    background-color:rgb(224, 224, 224);
}
/* Tag icon styling */
.resource-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin-right: 0.58rem;
    margin-left: 0;
}
/* Tag text styling */
.resource-text {
    white-space: nowrap;
}
/* ! --- E-mail --- */
.email {
    margin-left: 1.3rem;
    margin-right: 1.3rem;
    margin-bottom: 2rem;
}
/* ! --- Footer --- */
footer {
    display: flex;
    justify-content: space-between; /* Równy odstęp między elementami */
    align-items: center; /* Wyrównanie pionowe wszystkich elementów */
    padding: 1.3rem 2.6rem; /* Padding dla całego stopka */
    margin-bottom: 1rem;
    color: rgba(57, 57, 57, 0.5);
    font-size: 0.7rem;
}
footer .item {
    flex: 1; /* Równa przestrzeń dla każdego elementu */
    text-align: center; /* Wyrównanie tekstu w centrum */
    display: flex; /* Ustawienie flexbox dla elementów wewnętrznych */
    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe */
}
footer .item p,
footer .item a {
    margin: 0; /* Usunięcie domyślnych marginesów */
    padding: 0; /* Usunięcie domyślnych paddingów */
    line-height: 1; /* Spójny odstęp w pionie */
}
footer .left {
    text-align: left; /* Wyrównanie tekstu do lewej */
    justify-content: flex-start; /* Pozycjonowanie w lewo */
}
footer .right {
    text-align: right; /* Wyrównanie tekstu do prawej */
    justify-content: flex-end; /* Pozycjonowanie w prawo */
    gap: 1.5rem; /* Odstęp między ikonami */
}
footer a {
    text-decoration: none; /* Usunięcie podkreślenia */
    color: #333; /* Kolor linków */
    font-size: 0.9rem;
}
footer a i {
    font-size: 1.4rem; /* Rozmiar ikon */
}
footer .email {
    text-align: center; /* Wyśrodkowanie tekstu */
    line-height: 1; /* Wyeliminowanie potencjalnych różnic w odstępie */
    margin-bottom: 0;
}
/* ? --- Wyświetlanie wersji long obrazów --- */
.modal-content {
    display: block;
    margin: 0 auto; /* Automatyczne centrowanie obrazu */
    padding: 0; /* Usuń domyślne wcięcia */
    max-width: calc(100% - 12rem); /* Maksymalna szerokość z uwzględnieniem marginesów */
    max-height: none; /* Usuń ograniczenie wysokości */
}
.modal {
    display: none; /* Ukryj modal domyślnie */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Umożliwia przewijanie w pionie */
    background-color: rgba(0, 0, 0, 0.8); /* Przyciemnione tło */
}
.close {
    position: fixed; /* Stała pozycja w prawym górnym rogu */
    top: 20px;
    right: 35px;
    width: 40px;
    height: 40px;
    background-color: #333; /* Ciemnoszare koło */
    color: #fff; /* Kolor tekstu biały */
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    line-height: 40px; /* Centrowanie "X" wewnątrz koła */
    border-radius: 50%; /* Koło */
    cursor: pointer;
    z-index: 1001; /* Wyższy indeks, aby zawsze był nad obrazem */
    border: none; /* Usuń domyślną ramkę */
}
.close:hover,
.close:focus {
    background-color: #555; /* Jaśniejszy odcień szarości po najechaniu */
}
html {
    font-size: 24px;
}
@media (max-width: 768px) {
    html {
        font-size: 16px;
    }
    /* Wylaczenie nawigacji */
    header{
        display: none;
    }
    /* Nawigacja */
    ul {
        gap: 0.8rem;
    }
    ul li a {
        font-size: 0.8rem;
    }
    .jakub {
        font-size: 0.8rem;
    }
    .icons {
        gap: 1rem;
    }
    .icons a {
        font-size: 1rem;
    }
    /* Hello section */
    .hello {
        flex-direction: column; /* Układ pionowy */
        text-align: center; /* Wyśrodkowanie tekstu */
        padding: 6rem 1.5rem; /* Mniejsze paddingi */
        gap: 1.5rem;
    }
    .hello-content {
        flex: none;
        width: 100%; /* Pełna szerokość */
    }
    .Hi {
        justify-content: center; /* Wycentrowanie tekstu i ikony */
    }
    .introduction br {
        display: none;
    }
    .hello-image {
        display: flex;
        justify-content: center;
    }
    .hello-image img {
        max-width: 80%; /* Dostosowanie szerokości */
        margin-right: 0; /* Usunięcie marginesu */
    }
    .container {
        padding-left: 1.3rem;
        padding-right: 1.3rem;
        margin-bottom: 6rem;
    }
    /* Naprawa sekcji WORKS */
    .works {
        display: flex;
        flex-direction: column; /* Jedna kolumna */
        gap: 2rem; /* Odstęp między elementami */
        width: 100%; /* Pełna szerokość kontenera */
    }
    .work-item {
        display: flex;
        flex-direction: column; /* Zmiana układu na pionowy */
        gap: 1rem; /* Odstęp między elementami */
        width: 100%; /* Elementy zajmują całą szerokość */
        margin: 0 auto; /* Wycentrowanie */
        margin-bottom: 3rem;
    }
    .work-item > .left,
    .work-item > .right {
        width: 100%; /* Każdy element pełnej szerokości */
        margin: 0; /* Usuń marginesy */
    }
    .works .work-item > .left img {
        width: 100%;
        height: 14rem;
    }
    /* Resetowanie stylów kolumny */
    .works,
    .work-item {
        grid-template-columns: unset; /* Wyłącz grid, jeśli jest aktywny */
        width: 100%;
    }
    .about {
        display: flex;
        flex-direction: column; /* Jeden element pod drugim */
        gap: 2rem; /* Odstęp między elementami */
        width: 100%; /* Pełna szerokość kontenera */
    }
    /* Ustawienie kolejności elementów */
    .first-part {
        display: flex;
        flex-direction: column; /* Zmiana na kolumnowy układ */
        gap: 1rem;
    }
    .text-content, .image-content {
        flex: none; /* Usunięcie podziału 50/50 */
        width: 100%; /* Pełna szerokość */
    }
    .image-content img {
        width: 100%;
        max-width: 100%;
    }
    .second-image {
        align-self: center; /* Wycentrowanie drugiego obrazka */
    }
    .second-image img {
        height: auto;
        max-width: 100%;
    }
    /*UX - resources */
    .ux-resources {
        display: none;
    }
    /* Fotter */
    footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    footer .left,
    footer .email {
        display: none; /* Ukrycie "Jakub Filip" i e-maila */
    }
    footer .center {
        margin: 0; /* Usunięcie wszelkich marginesów */
        padding: 0; /* Usunięcie paddingu */
        text-align: left; /* Wyrównanie tekstu do lewej */
        flex: unset; /* Wyłączenie rozciągania */
    }
    footer .right {
        margin: 0; /* Usunięcie marginesów */
        padding: 0; /* Usunięcie paddingu */
    }
}
@media (min-width: 768px) and (max-width: 1079px) {
    html {
        font-size: 12px;
    }
    header {
        padding: 1rem 0;
    }
    .container {
        margin-bottom: 3rem;
    }
    .resource-tag {
        font-size: 1.2rem;
    }
    .resource-icon {
        width: 42px;
        height: 42px;
    }
    .email {
        display: none;
    }
    footer {
        display: flex;
        justify-content: flex-start; /* Wyrównanie elementów do lewej */
    }
    footer .center,
    footer .right {
        display: none; /* Ukrycie Resume i ikon */
    }
    footer .left,
    footer .email {
        display: inline; /* Ustawienie widoczności */
        margin: 0; /* Usunięcie marginesów */
        padding: 0; /* Usunięcie paddingu */
        flex: unset; /* Wyłączenie rozciągania */
    }
    footer .left {
        margin-right: 3rem; /* Odstęp między "Jakub Filip" a emailem */
    }
    footer .email {
        text-align: left; /* Wyrównanie tekstu po lewej stronie */
    }
}
@media (min-width: 1080px) and (max-width: 1439px) {
    html {
        font-size: 16px;
    }
    .email {
        display: none;
    }
    footer {
        display: flex;
        justify-content: flex-start; /* Wyrównanie elementów do lewej */
    }
    footer .center,
    footer .right {
        display: none; /* Ukrycie Resume i ikon */
    }
    footer .left,
    footer .email {
        display: inline; /* Ustawienie widoczności */
        margin: 0; /* Usunięcie marginesów */
        padding: 0; /* Usunięcie paddingu */
        flex: unset; /* Wyłączenie rozciągania */
    }
    footer .left {
        margin-right: 3rem; /* Odstęp między "Jakub Filip" a emailem */
    }
    footer .email {
        text-align: left; /* Wyrównanie tekstu po lewej stronie */
    }
}
@media (min-width: 1440px) and (max-width: 1920px) {
    html {
        font-size: 20px;
    }
    .email {
        display: none;
    }
    footer {
        display: flex;
        justify-content: flex-start; /* Wyrównanie elementów do lewej */
    }
    footer .center,
    footer .right {
        display: none; /* Ukrycie Resume i ikon */
    }
    footer .left,
    footer .email {
        display: inline; /* Ustawienie widoczności */
        margin: 0; /* Usunięcie marginesów */
        padding: 0; /* Usunięcie paddingu */
        flex: unset; /* Wyłączenie rozciągania */
    }
    footer .left {
        margin-right: 3rem; /* Odstęp między "Jakub Filip" a emailem */
    }
    footer .email {
        text-align: left; /* Wyrównanie tekstu po lewej stronie */
    }
}