@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
    --font-xl: clamp(1.5rem, 3vw, 3rem);
    --font-l: clamp(1.4rem, 3vw, 2.5rem);
    --font-m: clamp(1.3rem, 3vw, 1.7rem);
    --font-xm: clamp(1.2rem, 3vw, 1.4rem);
    --font-s: clamp(0.9rem, 3vw, 1.1rem);
    --font-xs: clamp(0.5rem, 3vw, 0.8rem);
}
* {
    padding: 0; 
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.2pt;
    list-style: none;
}
html, body {
    background-color: whitesmoke;
}
a {
    color: green;
}
header, main, img, h2::before, section, dt::before, dt, footer, ul.kontakt  {
    display: flex;
    justify-content: center;
    align-items: center;
}
img, .f-row, .f-p, .card {
    width: 100%;
}
header {
    flex-direction: column;
    padding-block: clamp(0.8rem, 6vw + 1rem, 5rem);
}
h1, h2, h3, h4, p, dt, dd, li {
    text-align: center;
}
h1 {
    font-size: var(--font-xl);
    font-weight: 700;
}
h2 {
    font-size: var(--font-l);
    padding-block-start: clamp(4rem, 6vw + 1rem, 10rem);
    padding-block-end: clamp(0.2rem, 1vw + 0.5rem, 2rem);
}
h2::before {
    position: relative;
    content: "";
    background-color: green;
    width: 8rem;
    height: 3px;
    border-radius: 50%;
    top: clamp(-2rem, 3vw + 1rem, -4rem);
    margin-inline: auto;
}
h3 {
    font-size: var(--font-m);
}
h4 {
    font-size: var(--font-xm);
}
p {
    font-size: var(--font-s);
    font-weight: 400;
}
b {
    font-weight: 500;
}
img {
    max-width: 500px;
    margin-block-end: clamp(3rem, 3vw + 1rem, 8rem);
    box-shadow: 2px 2px 20px hsl(180, 1%, 85%);
    border-radius: 10px;
}
main {
    flex-direction: column;
    width: 90vw; 
    margin-inline: auto;
}
section {
    flex-direction: column;
    gap: 2rem;
    margin-block: clamp(3rem, 6vw + 1rem, 12rem);
}
.card {
    padding: 3rem;
    box-shadow: 2px 2px 20px hsl(180, 1%, 85%);
    border-radius: 10px;
}
dl, ul {
    font-size: var(--font-s);
}
dt {
    flex-direction: column;
    font-size: var(--font-s);
    font-weight: 600;
}
dt::before {
    content: "*";
    color: green;
    font-size: var(--font-l);
    top: 0.4rem;
    margin-inline: auto;
}
dd, li {
    padding-block-start: 1.5rem;
}
footer {
    flex-direction: column;
    border-top: 1px solid green;
    background: 
        linear-gradient(117deg, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0.4) 70%),
        linear-gradient(217deg, hsla(120, 100%, 50%, 1), hsla(120, 100%, 50%, 0.2) 5%), 
        linear-gradient(100deg, hsla(0, 100%, 50%, 1), hsla(0, 100%, 50%, 0.1) 80%), 
        linear-gradient(330deg, hsla(55, 98%, 50%, 1), hsla(49, 98%, 50%, 0.1) 20%);
}
.f-row {
    padding: 2rem;
    justify-content: center;
}
.f-row:nth-child(2) {
    border-top: 1px solid red;
}
ul.kontakt {
    flex-direction: column;
    list-style: none;
    gap: 2rem;
}
li.f-link:nth-child(2) p {
    font-size: var(--font-xm);
}
.f-copy {
    font-size: var(--font-xs);
    margin-inline: auto;
}
@media only screen and (min-width: 1200px) {
    section {
        flex-direction: row;
        align-items: stretch;
    }
    p {
        width: 60%;
    }
    a:is(:hover, :focus) {
        color: red;
        transition: ease 0.3s;
    }
    ul.kontakt {
        flex-direction: row;
        gap: 5rem;
    }
}
@media print {
    * {
        background: white;
        font-family: 'Georgia', 'Times New Roman', serif;
        font-size: 10.5pt;
        padding: 0;
        margin: 0;
    }
    header {
        padding-block: 20px;
    }
    h1 {
        font-size: 12pt;
        font-weight: 400;
    }
    h2 {
        padding-block-start: 20px;
    }
    footer {
        display: none;
    }
    p {
        padding-block-end: 50px;
    }
    img {
        width: 50%;
        box-shadow: none;
    }
    section {
        margin: 0;
    }
    .card {
        width: 100%;
        padding: 0;
        box-shadow: none;
    }
    h3 {
        padding-block-start: 30px;
    }
    li {
        padding-block-start: 10px;
    }
}