:root {
    --landing-percent: 40%;
    --form-percent: 40%;
}

body {
    background-image: 
        linear-gradient(75deg, #FFFFFFFF var(--landing-percent), #FFFFFF00 calc(var(--landing-percent) + 24%)),
        url("/img/jarocin.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2.5rem;
}

.landing {
    max-width: var(--landing-percent);
    height: 100%;

    display: flex;
    flex-direction: column;
}

.main__wrapper {
    display: flex;

    height: 100%;
}

main {
    margin: auto 0;

    user-select: none;

    position: relative;
}
 
main .logo {
    display: none;
}

main .subtitle {
    letter-spacing: 0.3125rem;
    font-size: 0.6875rem;
}

main h1 {
    margin-top: 1.25rem;

    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.25;

    text-shadow: 
        -2px -2px 0 #FFFFFF, 
         2px -2px 0 #FFFFFF, 
         2px  2px 0 #FFFFFF, 
        -2px  2px 0 #FFFFFF;
}

main h1 span {
    color: var(--primary);
}

main .description {
    letter-spacing: 0.09375rem;
    font-size: 0.875rem;
    line-height: 1.25;
}

main .description span {
    font-weight: 600;
}

main .description .notice {
    font-size: 0.8125em;
}

main .image-circles {
    --circle-size: 20rem;
    --circles-distance-x: 10/6;
    --circles-distance-y: 8/6;
    --circles-offset-x: -1;
    --circles-offset-y: -2/3;

    position: absolute;
    z-index: -1;

    top: calc(var(--circle-size) * var(--circles-offset-y));
    right: calc(var(--circle-size) * var(--circles-offset-x));

    width: calc(var(--circle-size) * var(--circles-distance-x));
    height: calc(var(--circle-size) * var(--circles-distance-y));

}

main .image-circle {
    position: absolute;

    border-radius: 50%;
    border: calc(var(--circle-size) * 0.04375) solid #FFFFFF;

    width: var(--circle-size);
    height: var(--circle-size);
}

main .image-circle img {
    border-radius: 50%;
}

main .image-circle.image-circle--shadow {
    box-shadow: 0 4px 16px 0 #00000040;
}

main .image-circle.image-circle--first {
    top: 0;
    left: 0;
}

main .image-circle.image-circle--second {
    bottom: 0;
    right: 0;
}

.signup-form-wrapper {
    width: var(--form-percent);
}


@media screen and (max-width: 1920px) {
    main .image-circles {
        --circles-offset-y: -7/12;
    }
}

@media screen and (max-width: 1770px) {
    main .image-circles {
        --circle-size: 17rem;
    }
}

@media screen and (max-width: 1600px) {
    :root {
        --landing-percent: 45%;
    }

    main h1 {
        font-size: 3rem;
    }

    main .image-circles {
        --circle-size: 16rem;
        --circles-offset-x: -7/10;
        --circles-offset-y: -7/12;
    }
}

@media screen and (max-width: 1536px) and (min-height: 768px) {
    main .image-circles {
        --circle-size: 15rem;
        --circles-distance-x: 9.5/6;
        --circles-offset-x: -7/10;
    }
}

@media screen and (max-width: 1536px) and (max-height: 768px) {
    main .image-circles {
        --circle-size: 15rem;
        --circles-distance-x: 9.5/6;
        --circles-offset-x: -6/10;
        --circles-offset-y: -1/2;
    }
}

@media screen and (max-width: 1440px) {
    main .image-circles {
        --circle-size: 14rem;
        --circles-offset-x: -7/10;
    }
}


@media screen and (max-width: 1300px) {
    :root {
        --landing-percent: 50%;
    }

    main .image-circles {
        --circle-size: 13rem;
        --circles-distance-x: 9.5/6;
        --circles-offset-x: -5/10;
    }
}


@media screen and (max-width: 1200px) {
    main .image-circles {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    .container {
        height: 100%;
    }

    .mobile-only {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --landing-percent: 100%;
        --form-percent: 100%;
    }

    body {
        background-color: #FFFFFF;
        background-image: none;
    }

    .desktop-only {
        display: none;
    }

    main .logo {
        display: block;

        margin-bottom: 4rem;

        text-align: center;
    }

    main .logo img {
        max-width: 200px;
    }

    main .title {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    main .description {
        letter-spacing: 0.09375rem;
    }

    main .image-circles {
        --circle-size: 13rem;
        --circles-distance-x: 9.5/6;
        --circles-distance-y: 9/6;
        --circles-offset-x: 0;
        --circles-offset-y: -2/10;

        display: inherit;
        margin: 0 auto;

        position: relative;
    }

    .signup-form-wrapper {
        background-image: 
            linear-gradient(175deg, #FFFFFFFF 15%, #FFFFFF00 32%),
            url("/img/jarocin.webp");
        background-repeat: no-repeat;
        background-size: cover;

        padding: 3rem var(--site-padding);
    }

    .container {
        gap: 0;
        margin: 0 auto;
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    main .image-circles {
        --circle-size: 10rem;
    }
}

@media screen and (max-width: 600px) {
    main h1 {
        font-size: 2.5rem;
    }

    main .image-circles {
        --circle-size: 8rem;
    }
}

@media screen and (max-width: 500px) {
    .signup-form {
        padding: 2.5rem 1.5rem;
    }

    main .image-circles {
        display: none;
    }
}

@media print {
    :root {
        --landing-percent: 100%;
    }

    body {
        background-color: #FFFFFF;
        background-image: none;

        text-align: center;
    }   

    main .image-circles {
        display: none;
    }

    .signup-form-wrapper {
        display: none;
    }
}