@font-face {
    font-family: "San Francisco Medium";
    src: url(./Assets/Fonts/SFNSText-Medium.otf);
}
@font-face {
    font-family: "San Francisco Regular";
    src: url(./Assets/Fonts/SFNSText-Regular.otf);
}

:root {
    --font-color-base: #111827;
    --font-color-sub: #9CA3AF;

    --modal-padding: 1.5rem;
}

body {
    font-family: 'San Francisco Medium', sans-serif;

    color: var(--font-color-base);

    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0
}

.dodatek {
    font-size: 75%;
    color: #6B7280;
}

.corkScreenshot {
    /*filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));*/
}

#tagline {
    text-align: center;
}
#tagline h2 {
    margin-bottom: 0;
}
#tagline p {
    margin: 0;
}

button, .buttonLike {
    font-size: 1.5rem;

    text-decoration: none;

    padding: 0.5rem 1.5rem;

    color: #EBF5FF;

    border-radius: 5px;

    background-color: #233876;
    border: none;

    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    cursor: pointer;

    transition: 0.5s ease;
}
button:hover, .buttonLike:hover {
    transform: translateY(-2px);

    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

header, content, footer {
    padding: 5vh 20vw;
}

header {
    display: flex;

    gap: 2rem;
}

h1 {
    font-size: 2.5rem;
    font-family: 'San Francisco Regular';
    line-height: 1.1;
}

#headerImageComplex {
    position: relative;
    width: 90%;
}
#headerImageComplex #icon {
    position: absolute;
    max-width: 10rem;
    right: -20px;
    bottom: -20px;
}

header img {
    width: 120%;
    object-fit: cover;
}

content {
    display: grid;
    gap: 5rem;
}

section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

article {
    display: flex;
    gap: 2rem;
}
article:not(:last-of-type) {
    margin-bottom: 2rem;
}
article imgContainer {
    max-width: 60%;
}
article img {
    max-width: 100%;
}

h3 {
    margin: 0;
}
h3 + p {
    color: var(--font-color-sub);
    margin-top: 0.5rem;
}

header {
    background-color: #EBF5FF;
}

inlineBlock {
    display: flex;
    align-items: baseline;
}
inlineBlock.tight {
    gap: 1rem;
}
inlineBlock.loose {
    gap: 5rem
}
modal inlineBlock.loose {
    flex-direction: row-reverse;
    justify-content: space-between;
}
header inlineBlock {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

a {
    text-decoration: none;

    color: #3F83F8;

    /*border-bottom: 2px dashed #3F83F8;*/
}

#centered {
    text-align: center;
}
#centered article {
    justify-content: center;
}

modalOverlay {
    position: fixed;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;

    /*backdrop-filter: grayscale(30%) saturate(50%);*/

    transition: 0.4s ease;

    z-index: 1000;
}
modalOverlay {
    filter: opacity(0);
    transform: translateY(10px);
    pointer-events: none;
}
modalOverlay.opened {
    filter: opacity(1);
    transform: translateY(0);
    pointer-events: all;
}

modalOverlay:not(.opened) modal {
    filter: opacity(0);
}
modalOverlay.opened modal {
    filter: opacity(1);
}

modal {
    position: relative;

    padding: var(--modal-padding);

    background-color: #fff;

    border-radius: 15px;

    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    transition: 0.4s ease;
}
modalCloseButton {
    display: inline-block;

    font-size: 100% !important;

    text-align: center;
    vertical-align: middle;

    border-radius: 15px !important;

    padding: 0.3rem 0.6rem !important;

    background-color: #233876 !important;
    color: #fff;
}
modal h4 {
    margin: 0;
}

languageContainer img:not(:first-of-type) {
    margin-top: -70%;
}
languageContainer img:first-of-type {
    margin-left: 20%;
}
languageContainer img:nth-of-type(2) {
    margin-left: 10%;
}

#comparisonList {
    margin-top: 0;
}
#comparisonList li {
    line-height: 1.5;
}
#comparisonList li:not(:first-of-type) {
    margin-top: 0.75rem;
}
#comparisonList .dodatek {
    color: var(--font-color-sub);
    font-size: 1rem;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F9FAFB;
}
footer div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
footer h2 {
    margin: 0;
}
#copyright {
    color: #E5E7EB;
    font-size: 400%;
    margin: 0;
}

@media screen and (max-device-width: 1100px) {
    header, content, footer {
        padding: 5vh 10vw;
    }
}
@media screen and (max-device-width: 900px) {
    header {
        gap: 2rem;
        flex-flow: column-reverse;
    }
    header img {
        max-width: 100%;
    }
    header inlineBlock {
        align-items: center;
    }
    header inlineBlock button {
        width: 100%;
    }
}
@media screen and (max-device-width: 800px) {
    article {
        flex-flow: column;
    }
    article imgContainer {
        max-width: 100%;
    }
    article img {
        max-width: 100%;
    }

    languageContainer img:not(:first-of-type) {
        margin-top: -70%;
    }
    languageContainer img:first-of-type {
        margin-left: -10%;
    }
    languageContainer img:nth-of-type(2) {
        margin-left: 0%;
    }
    languageContainer img:last-of-type {
        margin-left: 10%;
    }

    #copyright {
        font-size: 200%;
        text-align: end;
    }
}
@media screen and (max-device-width: 600px) {
    button, .buttonLike {
        font-size: 120%;
        padding: 0.3rem 1.1rem;
    }

    header inlineBlock {
        flex-flow: column;
    }

    modalOverlay {
        align-items: flex-start;
    }
    #supportButtonComplex {
        flex-flow: column-reverse !important;
    }
    #supportButtonComplex a {
        padding: 0.6rem 2rem;
    }
}