:root {
    /* colors */
    --black: #000000;
    --white: #FFFFFF;
    --akcent: #FF3355;
    --grey: #E5E5E5;

    /* fonts */
    --font-family-headers: Lexend Giga, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    --font-family-default: Poppins, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;

    --font-weight-regular: 400;
    --font-weight-bold: 600;
    --font-weight-boldest: 800;

    /* sizes */
    --size: 4px;
    font-size: var(--size);
    --border-radius: 20px;
}

/* Normalize */
html{line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button; appearance:button}button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{padding:0;border-style:none}button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0}[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto}[type='search']{outline-offset:-2px;-webkit-appearance:textfield; appearance:textfield}[type='search']::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* Mobile first design - Viewport Width 390px */

body {
    background: #F4F4F4 url(/assets/bloblighter.svg) no-repeat fixed top;
    background-size: cover;
    font-family: var(--font-family-default);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    color: var(--black);
    box-sizing:border-box;
}

p {
    /* 12px = 3.077vw */
    margin: 3.077vw 0;
}

a {
    color: inherit;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

strong {
    font-weight: var(--font-weight-bold);
}
.wrapper {
    display: flex;
    max-width: 1400px;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    /* 24px = 6.154vw */
    margin: 0 6.154vw;
}

header, section, footer {
    position: relative;
    display: flex;
}

header {
    /* 777px = 92vw */
    min-height: 199.231vw;
    line-height: 1.2;
}

header.regulamin {
    min-height: 110vw;
}

section {
    /* 700px = 179.487vw */
    min-height: 179.487vw;
}
#logo {
    width: 124px;
}

#kwiatek {
    width: 60px;
}

.hero {
    position: relative;
    display: flex;
    flex: 1 0 0;
    padding-bottom: 6.154vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px = 10.256vw */
    gap: 10.256vw;
    align-self: stretch;
}

.kwiatki {
    display: none;
}

h1 {
    /* 40px = 10.256vw */
    padding: 10.256vw 0px;
    margin: 0;
    text-align: center;
    font-family: var(--font-family-headers);
    font-weight: var(--font-weight-boldest);
    background: linear-gradient(328deg, rgba(0,0,0,1) 32%, rgba(255,51,85,1) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

h1.title {
    font-size: 11rem;
}

.aboutus {
    position: relative;
    display: flex;
    flex: 1 0 0;
    /* 20px = 5.128vw */
    padding: 10.256vw 5.128vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10.256vw;
    align-self: stretch;
    border-radius: var(--border-radius);
    overflow: hidden;
    min-height: 100vh;
}

.aboutus:not(#regulamin):before {
    position: absolute;
    content: "";
    background: url(/assets/portbggraph.svg) top;
    background-size: cover;
    mix-blend-mode: overlay;
    width: 100%;
    height: 100%;
}

.isolate {
    z-index: 2;
}

.aboutus p, .contact p, button, .button {
    margin: 0;
    text-align: center;
    font-size: 6rem;
    font-weight: var(--font-weight-bold);
}


.aboutus img {
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    right:0;
    bottom:0;
    left:0;
    object-fit:cover;
    mix-blend-mode: overlay;
}

#regulamin {
    max-width: 600px;
    min-height: auto;
    background-color: #E5E5E5;
    justify-content: flex-start;
    gap: 20px;
}

#regulamin p {
    font-size:20px;
    font-weight: var(--font-weight-regular);
    line-height:1.2;
}

button, .button {
    width: 100%;
    padding: 5.128vw;
    margin-top: 5.128vw;
    border-radius: var(--border-radius);
    background: url(/assets/btnbg.svg) center;
    background-size: cover;
    color: var(--black);
    border: #968989 4px solid;
    line-height: 1.5;  
    transition: all .5s ease;
    cursor: pointer;
    outline: none;
}

button:hover {
    transform:translateY(-6px);
    filter:  brightness(1.2);
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.15);  
}

button:active {
    filter: brightness();
    scale:.95;
    box-shadow:none
}

.hidden {
    display:none
}

.contact {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 44px = 11.282vw */
    gap: 11.282vw;
    align-self: stretch;
    min-height: 800px;
}

.contact h1 {
    font-size: 8rem;
}

footer {
    display: flex;
    max-width: 900px;
    /* 64px = 16.410vw */
    padding-top: 16.410vw;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* 28px = 7.179vw */
    gap: 7.179vw;
    align-self: center;
    margin-bottom: 10.256vw;
}

footer p a {
    text-decoration: underline;
}

footer p a:hover {
    text-decoration: none;
}

footer p {
    margin: 0;
    text-align: center;
    font-size: 3.5rem;
}

@media only screen and (min-width: 600px), (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    :root {
        --size: 8px;
    }

    /* Vieport width 834px */

    header {
        /* 1195px */
        min-height: 143.285vw;
    }

    header.regulamin {
        min-height: 100vw;
    }

    .hero {
        padding-bottom: 0;
        /* 85px */
        gap: 10.192vw;
    }

    h1 {
        padding: 10.192vw 0;
    }

    .aboutus {
        /* 43px = 5.156vw */
        padding: 10.192vw 5.156vw;
        gap: 10.192vw;
    }

    button, .button {
        padding: 5.156vw;
    }

    #regulamin .button {
        padding: 1.5vw;
        font-size: 3rem;
    }

    .contact {
        /* 94px */
        gap: 11.271vw;
        justify-content: flex-start;
        height: auto;
        /* 320px */
        padding: 38.369vw 0;
    }

    .contact.regulamin {
        padding: 15vw 0;
    }

    footer {
        /* 137px */
        padding-top: 16.427vw;
        /* 60px */
        gap: 7.194vw;
        /* 40px */
        margin-bottom: 4.796vw;
    }

    #logo {
        width: 264px;
    }

    #kwiatek {
        width: 128px;
    }

}

@media only screen and (min-width:992px) {
    /* Vieport width 1440px */

    header {
        min-height: 100vh;
        /* 40px */
        margin-top: 2.778vw;
    }

    header.regulamin {
        min-height: 50vh;
    }

    .hero {
        padding-bottom: 0;
        /* 60px */
        gap: 4.167vw;
    }

    .hero #logo {
        width: 124px;
    }

    #kwiatek:not(.kwiatki #kwiatek, .contact #kwiatek) {
        display: none;
    }
    
    .kwiatki {
        display: block;
        position: absolute;
        z-index: 4;
        width: 100%;
        height: 100%;
    }

    .kwiatki svg#kwiatek {
        position: relative;
        width: 40px;
    }

    .kwiatki svg:nth-child(1) {
        top: 0;
        left:0;
        transform: rotate(40deg);
    }
    .kwiatki svg:nth-child(2) {
        top: 19%;
        left: 8%;
        transform: rotate(150deg);
    }
    .kwiatki svg:nth-child(3) {
        top: 0;
        left:19%;
        transform: rotate(90deg);
    }
    .kwiatki svg:nth-child(4) {
        top: 13%;
        left:24%;
        transform: rotate(0);
    }
    .kwiatki svg:nth-child(5) {
        top: 5%;
        left:45%;
        transform: rotate(-25deg);
    }
    .kwiatki svg:nth-child(6) {
        top: 18%;
        left:51%;
        transform: rotate(200deg);
    }
    .kwiatki svg:nth-child(7) {
        top: -2%;
        left:71%;
        transform: rotate(-50deg);
    }
    .kwiatki svg:nth-child(8) {
        top: 12%;
        left:74%;
        transform: rotate(90deg);
    }
    .kwiatki svg:nth-child(9) {
        top: 8%;
        left:55%;
        transform: rotate(30deg);
    }
    .kwiatki svg:nth-child(10) {
        top: 66%;
        left:-28%;
        transform: rotate(-40deg);
    }
    .kwiatki svg:nth-child(11) {
        top: 81%;
        left:-3%;
        transform: rotate(0);
    }
    .kwiatki svg:nth-child(12) {
        top: 73%;
        left:12%;
        transform: rotate(10deg);
    }
    .kwiatki svg:nth-child(13) {
        top: 77%;
        left:35%;
        transform: rotate(120deg);
    }
    .kwiatki svg:nth-child(14) {
        top: 66%;
        left:42%;
        transform: rotate(180deg);
    }


    h1 {
        padding-top: 0;
        padding-bottom: 8.9vw;
    }

    section {
        /* 1000px = 69.444vw */
        min-height: 69.444vw;
    }

    .aboutus {
        /* 43px = 5.156vw */
        padding: 5.903vw 2.986vw;
        gap: 5.903vw;
        min-height: 150vh;
        transition: all .3s ease;
    }

    button, .button {
        padding: 2.986vw;
    }

    .contact {
        /* 94px */
        gap: 6.528vw;
        justify-content: flex-start;
        height: auto;
        /* 320px */
        padding: 22.222vw 0;
    }

    .contact h1 {
        padding: 2.778vw 0;
    }

    footer {
        /* 137px */
        padding-top: 9.514vw;
        /* 30px */
        gap: 2.083vw;
        /* 40px */
        margin-bottom: 2.778vw;
    }
    
    .fslightbox-slide-btn-container {
        scale: 1.5;
    }

}