@charset "utf-8";
/* CSS Document */

/* Vertically centered using transfonter.org */
/* latin */
@font-face {
    font-family: 'Katibeh';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Katibeh-Regular-latin.woff2') format('woff2'),
        url('../fonts/Katibeh-Regular-latin.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

html, body, p, h1, h2, h3 {
    font: max(0.9375vw, 14px) "Poiret One", sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    width: 100%;
    line-height: 1.5;
}

a:hover {
    filter: brightness(120%);
}

#hero {
    background-image: url('../images/cosmic-ally-hero-home.jpg');
    background-image: -webkit-image-set(
        '../images/cosmic-ally-hero-home.webp' type('image/webp'),
        '../images/cosmic-ally-hero-home.jpg' type('image/jpeg')
    );
    background-image: image-set(
        '../images/cosmic-ally-hero-home.webp' type('image/webp'),
        '../images/cosmic-ally-hero-home.jpg' type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100vw;
    height: 0;
    padding-top: 49.5833%;
    position: relative;
    align-items: flex-start;
}

.hero-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-top: 5%;
}

.hero-content h1 {
    background-image: url('../images/cosmic-ally-logo-large.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    width: 42vw;
    height: 100%;
    position: relative;
    margin: -13.6vw auto 0;
    padding: 0;
    overflow: visible;
}

.hero-content h1 span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

main > :nth-child(1) {
    order: 1;
    font: 10.5vw "Katibeh", serif;
    color: #006699;
    text-align: center;
    text-indent: -20%;
    line-height: 0.75;
}

main > :nth-child(1) span {
    text-indent: 19%;
    display: block;
}

main > :nth-child(2) {
    order: 2;
    width: 44%;
}

main > :nth-child(2) img,
main > :nth-child(5) img,
main > :nth-child(6) img,
main > :nth-child(7) img,
main > :nth-child(10) img,
main > :nth-child(11) img,
main > :nth-child(12) img,
main > :nth-child(13) img,
main > :nth-child(14) img,
main > :nth-child(16) img,
main > :nth-child(17) img,
main > :nth-child(18) img {
    width: 100%;
    height: 100%; /* ensure image covers the full height of the picture container */
    object-fit: cover;
    display: block; /* to avoid a bit of space below the img in the picture element */
}

main > :nth-child(3) {
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 55%;
    padding-bottom: 23%;
}

main > :nth-child(3) p:first-child {
    color: #009999;
    font-size: max(1.875vw, 28px);
    font-weight: 400;
    -webkit-text-stroke: 0.06em #009999;
}

main > :nth-child(3) p {
    width: max(73%, 522px);
    color: #006699;
    padding: 0.5em 0;
    -webkit-text-stroke: 0.03em #006699;
}

main > :nth-child(4) {
    order: 4;
    font-family: "Italiana", sans-serif;
    font-size: max(2.5vw, 32px);
    color: #009999;
    width: max(20vw, 255px);
    margin: auto;
    -webkit-text-stroke: 0.01em #009999;
}

main > :nth-child(4) span {
    display: block;
}

main > :nth-child(5) {
    order: 5;
    z-index: 5;
    width: 59.5vw;
    outline: 2.75vw solid #ffffff;
    margin-top: -15vw;
    margin-right: 6.25vw;
}

main > :nth-child(6) {
    order: 6;
    width: 100vw;
    max-width: 100%;
}

main > :nth-child(7) {
    order: 7;
    width: 49%;
}

main > :nth-child(8) {
    order: 8;
    background-color: #faf1e6;
    margin: 12% 0;
    padding: 0;
    width: 51%;
}

main > :nth-child(8) p {
    color: #006699;
    padding: 0.75em 10vw;
    padding-left: 4.25vw;
    -webkit-text-stroke: 0.03em #006699;
}

main > :nth-child(8) p:first-child {
    font-size: max(1.875vw, 28px);
    font-weight: 400;
    padding-top: 2.5em;
    padding-bottom: 0.2em;
    -webkit-text-stroke: 0.06em #006699;
}

main > :nth-child(8) p a {
    color: inherit;
    text-decoration: none;
}

main > :nth-child(n + 8):nth-child(-n + 11) h3 {
    margin: 0;
}

main > :nth-child(9) {
    order: 9;
    font: max(6.67vw, 68px) "Italiana", sans-serif;
    color: #009999;
    text-align: center;
    text-indent: -30%;
}

main > :nth-child(9) span {
    display: block;
    text-indent: 22%;
}

main > :nth-child(10) {
    order: 10;
}

main > :nth-child(1) {
    width: 100%;
    margin: 9% 0 10%;
}

main > :nth-child(6) {
    width: 100%;
    margin: 9.5% 0 7.5%;
}

main > :nth-child(9) {
    width: 100%;
    margin: 9.5% 0;
}

main > :nth-child(15) {
    width: 100%;
    margin: 6.25% 0;
}

main > :nth-child(18) {
    width: 100%;
    margin: 9.5% 0;
}

main > :nth-child(n + 10):nth-child(-n + 13) {
    display:flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8.5%;
}

main > :nth-child(10) picture {
    width: 50%;
}

main > :nth-child(11) picture {
    width: 58%;
}

main > :nth-child(12) picture {
    width: 46%;
}

main > :nth-child(13) picture {
    width: 49%;
}

main > :nth-child(11) picture,
main > :nth-child(13) picture {
    order: 2;
}

main > :nth-child(11) .text-group,
main > :nth-child(13) .text-group {
    order: 1;
}

main > :nth-child(10) .text-group {
    width: 50%;
}

main > :nth-child(11) .text-group {
    width: 42%;
}

main > :nth-child(12) .text-group {
    width: 54%;
    padding-bottom: 14%;
}

main > :nth-child(13) .text-group {
    width: 51%;
    padding-bottom: 16%;
}

main div h3 {
    font: 4.167vw "Katibeh", serif;
    color: #006699;
}

main > :nth-child(11) h3, main > :nth-child(13) h3 {
    color: #009999;
}

main > :nth-child(n + 10):nth-child(-n + 13) h3, 
main > :nth-child(n + 10):nth-child(-n + 13) p {
    padding: 2% 9%;
}

main > :nth-child(n + 10):nth-child(-n + 13) h3 {
    padding-bottom: 0.5em;
}

main > :nth-child(n + 10):nth-child(-n + 13) p {
    font-size: 1.67vw;
    color: #000000;
}

main > :nth-child(11) {
    order: 11;
}

main > :nth-child(12) {
    order: 12;
}

main > :nth-child(13) {
    order: 13;
}

main > :nth-child(14) {
    order: 14;
    width: 54%;
    z-index: 5;
    margin-top: -19%;
    margin-left: 4.5vw;
    outline: 3vw solid #ffffff;
}

main > :nth-child(15) {
    order: 15;
    color: #006699;
    text-align: center;
    text-decoration: none;
}

main > :nth-child(15) h2 {
    font: 11vw "Katibeh", serif;
    line-height: 1;
}

main > :nth-child(16) {
    order: 16;
    width: 100%;
}

main > :nth-child(17) {
    order: 17;
    width: 100vw;
    display: flex;
    flex-direction: row;
}

main > :nth-child(17) p {
    width: 41%;
    font: 6.25vw "Italiana", sans-serif;
    line-height: 0.9;
    color: #009999;
    margin: 0 auto;
    padding: 12vw 7vw;
}

main > :nth-child(17) picture {
    width: 47%;
    z-index: 5;
    margin-top: -6vw;
    outline: 3.25vw solid #ffffff;
}

main > :nth-child(18) {
    order: 18;
    display: block;
    width: 100%;
    max-width: 100vw;
    margin-bottom: 4.25vw;
}

footer {
    color: #006699;
    text-align: center;
}

footer img {
    margin: 0 auto;
    min-width: 192px;
    width: 13.3854vw;
    height: auto;
    display: block;
}

footer p {
    margin: 0 auto calc(10vh + 0.75em);
    font-size: max(2.5vw, 36px);
    font-weight: 400;
    -webkit-text-stroke: 0.0425em #006699;
}

footer :nth-child(3) {
    font-size: max(0.7292vw, 10px);
    -webkit-text-stroke: 0.03em #006699;
}

@media (max-width: 1024px) {

    html, body, p, h1, h2, h3 {
        font-size: max(1.9vw, 14px);
    }

    .hero-content h1 {
        width: 51.5vw;
        margin: -3.2vw auto 0;
    }

    main {
        display: flex;
        flex-wrap: wrap;
    }

    main > :nth-child(1), main > :nth-child(6), main > :nth-child(9), 
    main > :nth-child(15), main > :nth-child(18) {
        margin: 5% 0;
    }

    main > :nth-child(1) {
        order: 2;
        max-width: 50%;
        text-indent: -25%;
        margin: 14.5% auto;
        font-size: 11.25vw;
    }

    main > :nth-child(1) span {
        text-indent: 23%;
    }

    main > :nth-child(2) {
        order: 1;
        width: 48%;
        margin-top: 2.5%;
    }

    main > :nth-child(3) {
        order: 5;
        max-width: 100%; 
        margin: max(3.8%, 24px) auto 0;
        padding-bottom: 0;
    }

    main > :nth-child(3) p:first-child {
        font-size: max(4.2vw, 22px);
    }

    main > :nth-child(3) p {
        font-size: max(1.87vw, 12px);
        width: 82%;
        padding: 0.75em 0;
    }

    main > :nth-child(4) {
        order: 3;
        width: 30vw;
        font-size: 3.9vw;
        line-height: 1.4;
    }

    main > :nth-child(5) {
        order: 4;
        width: 62vw;
        outline-width: 3.25vw;
        margin-top: -16.25vw;
        margin-right: 0;
    }

    main > :nth-child(8) {
        margin: 5% 0 0;
        padding: 5% 0 10%;
    }

    main > :nth-child(8) p:first-child {
        padding-top: 1.25em;
        font-size: max(4.25vw, 28px);
    }

    main > :nth-child(8) p {
        padding: 0.5em 16vw;
        padding-left: 8vw;
    }

    main > :nth-child(7), main > :nth-child(8), 
    main > :nth-child(9), main > :nth-child(n + 10):nth-child(-n + 17) {
        width: 100%;
        max-width: 100%;
    }

    main > :nth-child(9) {
        font-size: 10vw;
        text-indent: -40%;
        margin: 7% 0;
    }

    main > :nth-child(9) span {
        text-indent: 31%;
    }

    main > :nth-child(n + 10):nth-child(-n + 13) {
        flex-direction: column;
    }

    main > :nth-child(n + 10):nth-child(-n + 13) picture, 
    main > :nth-child(n + 10):nth-child(-n + 13) img, 
    main > :nth-child(n + 10):nth-child(-n + 13) .text-group {
        width: 100%;
    }

    main > :nth-child(n + 10):nth-child(-n + 13) h3 {
        font-size: 9vw;
        padding: 6% 5% 8%;
    }

    main > :nth-child(n + 10):nth-child(-n + 13) p {
        font-size: 3.5vw;
        line-height: 1.2;
        padding: 2% 5%;
        -webkit-text-stroke: 0.023em #000000;
    }

    main > :nth-child(11) picture,
    main > :nth-child(13) picture {
        order: 1;
    }

    main > :nth-child(11) .text-group,
    main > :nth-child(13) .text-group {
        order: 2;
    }

    main > :nth-child(11) p {
        padding-right: 23% !important;
    }

    main > :nth-child(12) p {
        padding-right: 12% !important;
    }

    main > :nth-child(13) p {
        padding-right: 12% !important;
    }

    main > :nth-child(12) .text-group,
    main > :nth-child(13) .text-group {
        padding-bottom: 0;
    }

    main > :nth-child(14) {
        margin-top: 0;
        margin-left: 0;
        outline: 0;
    }

    main > :nth-child(15) {
        margin: 6.25% 0;
    }

    main > :nth-child(15) h2 {
        font-size: 24vw;
    }

    main > :nth-child(17) p {
        font-size: 7.5vw;
        padding: 9vw 3.5vw;
    }

    main > :nth-child(17) picture {
        width: 47.5%;
        outline-width: 3.25vw;
        margin-top: -6vw;
    }

    main > :nth-child(18) {
        margin-top: 10%;
        margin-bottom: max(7%, 45px);
    }

    footer img {
        width: max(29vw, 193px);
    }

    footer p {
        font-size: max(5.25vw, 34px);
        margin-bottom: calc(10vw + 1em);
        margin-top: -1%;
    }

    footer :nth-child(3) {
        font-size: max(1.5vw, 10px);
    }

}