@font-face {
    font-family: 'Axiforma';
    src: url('assets/axiforma/Axiforma-Book.woff2') format('woff2'),
         url('assets/axiforma/Axiforma-Book.woff') format('woff'),
         url('assets/axiforma/Axiforma-Book.ttf') format('ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Axiforma';
    src: url('assets/axiforma/Axiforma-Heavy.woff2') format('woff2'),
         url('assets/axiforma/Axiforma-Heavy.woff') format('woff'),
         url('assets/axiforma/Axiforma-Heavy.ttf') format('ttf');
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

html {
    font-size: 10px; /* 62.5% of 16px */
    max-width: 100vw;
    max-height: 100svh;
    overflow: hidden;
}

body {
    margin: 0;
    font-family: "Axiforma", Arial, sans-serif;
    background-color: #fff;
    color: #012045;
    overflow: hidden;
    position: relative;
    font-size: 1.6rem;
    min-width: 100%;
    width: 100vw;
    width: 100dvw;
    min-height: 100%;
    height: 100vh;
    height: 100svh;
    background-image: url('assets/bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 4rem 10rem 10rem;
}

.no-webp body {
    background-image: url('assets/bg.jpg');
}

.golden-texture-left,
.golden-texture-right {
    position: absolute;
    z-index: 3;
    display: flex;
}

.golden-texture-left {
    left: 0;
    bottom: 0;
    justify-content: flex-start;
}

.golden-texture-right {
    right: 0;
    top: 0;
    justify-content: flex-end;
}

.golden-texture-left img {
    width: 54.32vw;
    height: auto;
    max-width: 100%;
    display: block;
}

.golden-texture-right img {
    width: 42.81vw;
    height: auto;
    max-width: 100%;
    display: block;
}

header {
    position: absolute;
    top: 6vh;
    right: 10vw;
    z-index: 10;
}

.logo {
    height: 40rem;
    width: auto;
    filter: drop-shadow(15px 4px 19.5px rgba(1, 32, 69, 0.25));
}
main {
    width: 100%;
    max-width: 192rem;
    position: relative;
    z-index: 5;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.content h1 {
    font-size: 10.64rem;
    line-height: 10.6rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0;
}

.content p {
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 1rem;
    margin-bottom: 5rem;
}

.social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #012045;
    width: 70vw;
    padding: 1.2rem;
    border-radius: 2.4rem;
    display: inline-flex;
}

.social-icons img {
    width: 6.1rem;
    height: 6.1rem;
}
.social-icons span, .social-icons a {
    margin: 1.2rem;
}
.social-icons span {
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 500;
    color: #FFFBE8;
    letter-spacing: 0;
}

.txt,
.social-icons a,
.social-icons span {
    z-index: 12;
}
/* Style responsywne - aktualizacja bazowego font-size */
@media (max-width: 1600px) {
    html {
        font-size: 8.8px; /* 55% of 16px */
    }
}

@media (max-width: 1400px) {
    html {
        font-size: 8px; /* 50% of 16px */
    }
}

@media (max-width: 1200px) {
    html {
        font-size: 6.8px; /* 42.5% of 16px */
    }
}

@media (max-width: 992px) {
    html {
        font-size: 5.6px; /* 35% of 16px */
    }
}

@media (max-width: 768px) {
    html {
        font-size: 4.8px; /* 30% of 16px */
    }
    body {
        padding: 4rem 6vw 6vw;
        justify-content: flex-end;
        align-items: center;
    }
    header {
        top: 4vh;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .logo {
        height: 22vh;
    }
    main {
        align-items: center;
        margin-bottom: 4vh;
    }
    .content {
        align-items: center;
        text-align: center;
    }
    .social-icons {
        height: auto;
        width: auto;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 4px; /* 25% of 16px */
    }
    header {
        top: 3vh;
    }
    .logo {
        height: 20vh;
    }
    main {
        margin-bottom: 3vh;
    }
}

@media (max-height: 500px) {
    html {
        font-size: 4px; /* 25% of 16px */
    }
}