* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #18202b;

    background-color: #f7f7f5;
    background-image: url("images/architecture-bg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
}

/* Główna zawartość */

#main {
    position: relative;
    z-index: 1;

    width: 100%;
    /*    min-height: 100vh;*/

    display: flex;
    justify-content: center;

    padding: 55px 20px 80px;
}

/* Jasna powierzchnia pod tekstem */

.content {
    width: min(700px, 100%);

    padding: 50px;

    text-align: center;

    background: rgba(255, 255, 255, 0.20);

    border: 1px solid rgba(255, 255, 255, 0.95);

    box-shadow:
        0 15px 50px rgba(30, 40, 50, 0.08);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Logo */

.logo {
    display: block;

    width: auto;
    max-width: 240px;
    height: auto;

    margin: 0 auto 28px;
}

/* Imię i nazwisko */

h1 {
    margin: 0;
    /*    padding: 0 0 18px; */

    font-size: clamp(30px, 5vw, 44px);
    font-weight: 400;

    line-height: 1.15;

    letter-spacing: -0.7px;

    color: #111820;

    /*    border-bottom: 1px solid rgba(24, 32, 43, 0.30); */
}

/* Zawód */

h2 {
    position: relative;

    display: inline-block;

    margin: 18px 0 42px;
    padding: 0 35px;

    font-size: 19px;
    font-weight: 400;

    line-height: 1.3;

    letter-spacing: 4px;

    text-transform: lowercase;

    color: #59636d;
}

/* Linie po obu stronach słowa "architekt" */

h2::before,
h2::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 55px;
    height: 1px;

    background: rgba(24, 32, 43, 0.35);
}

h2::before {
    right: 100%;
}

h2::after {
    left: 100%;
}

/* Tabela kontaktowa */

#mainTab {
    width: 100%;

    margin: 0 auto;

    border-collapse: collapse;

    font-size: 16px;
    line-height: 1.5;

    text-align: left;
}

/* Wiersze */

#mainTab tr {
    border-bottom: 1px solid rgba(24, 32, 43, 0.13);
}

#mainTab tr:last-child {
    border-bottom: none;
}

/* Lewa kolumna */

#mainTab .left {
    width: 34%;

    padding: 17px 20px 17px 0;

    text-align: right;
    vertical-align: top;

    color: #737b83;

    font-size: 12px;
    font-weight: 400;

    letter-spacing: 1px;

    text-transform: lowercase;
}

/* Prawa kolumna */

#mainTab .right {
    width: 66%;

    padding: 17px 0 17px 20px;

    text-align: left;
    vertical-align: top;

    color: #18202b;
}

/* Linki */

a:link,
a:visited,
a:active {
    color: #18202b;

    text-decoration: none;

    border-bottom: 1px solid rgba(24, 32, 43, 0.30);

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

a:hover {
    color: #68737e;

    text-decoration: none;

    border-bottom-color: #68737e;
}

/* Telefon i e-mail */

a[href^="tel:"] {
    border-bottom-color: transparent;
}

/* Małe ekrany */

@media (max-width: 700px) {

    body {
        background-size: auto 60%;
        background-position: center bottom;
        background-attachment: scroll;
    }

    #main {
        padding: 25px 14px 50px;
    }

    .content {
        padding: 30px;
    }

    .logo {
        max-width: 200px;
        margin-bottom: 25px;
    }

    h1 {
        font-size: 32px;
        padding-bottom: 14px;
    }

    h2 {
        margin-top: 15px;
        margin-bottom: 30px;

        padding: 0 20px;

        font-size: 17px;
        letter-spacing: 3px;
    }

    h2::before,
    h2::after {
        width: 30px;
    }

    #mainTab {
        font-size: 14px;
    }

    #mainTab .left {
        width: 30%;

        padding-right: 10px;

        font-size: 11px;
        letter-spacing: 0.5px;
    }

    #mainTab .right {
        width: 70%;

        padding-left: 10px;
    }
}

/* Bardzo małe telefony */

@media (max-width: 420px) {

    #main {
        padding: 15px 10px 35px;
    }

    .content {
        padding: 30px 18px 35px;
    }

    .logo {
        max-width: 170px;
    }

    h1 {
        font-size: 27px;
    }

    h2 {
        margin-bottom: 25px;

        font-size: 15px;
        letter-spacing: 2px;
    }

    h2::before,
    h2::after {
        width: 20px;
    }

    #mainTab {
        font-size: 13px;
    }

    #mainTab .left {
        width: 28%;

        padding-right: 8px;

        font-size: 10px;
    }

    #mainTab .right {
        width: 72%;

        padding-left: 8px;
    }
}