@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/segoeui.woff2') format('woff2'), url('../fonts/segoeui.woff') format('woff'), url('../fonts/segoeui.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gruppo';
    src: url('../fonts/gruppo.woff2') format('woff2'), url('../fonts/gruppo.woff') format('woff'), url('../fonts/gruppo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #0A0A0A;
    color: #ffffff;
    font-family: "Segoe UI";
}

header, footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer {
    row-gap: 1rem;
}

logo {
    display: block;
}

slogan {
    font-family: "Gruppo";
    font-size: 2rem;
}

a, a:link, a:visited, a:hover, a:active {
    color: #b52561;
    text-decoration: none;
}

    a.button, a.button:link, a.button:visited, a.button:hover, a.button:active {
        padding: 0.8rem 1.6rem 1.3rem 1.6rem;
        background-color: #b52561;
        border: 1px solid #c2b0bb;
        border-radius: 50px 20px;
        color: white;
        text-decoration: none;
        display: inline-block;
    }

h1 {
    font-family: "Gruppo";
    font-size: 2rem;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #b52561;
    padding-bottom: 1rem;
    color: #c2b0bb;
}

h2 {
    font-size: 1rem;
    padding: 1rem 0 1rem 0;
    color: #efe552;
}

ul {
    list-style: none;
}

    ul li::before {
        content: "\2022";
        color: #7ce1bd;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

li ~ li {
    margin-top: 1rem;
}

item {
    display: block;
}

    item.horizontal ~ item.horizontal {
        margin-top: 1rem;
    }

connection {
    color: #ffffff;
    width: 11rem;
    height: 2rem;
    padding: 0.8rem 1.6rem 1.3rem 1.6rem;
    background-color: #b52561;
    display: flex;
    justify-content: center;
}

    connection > a, connection > a:link, connection > a:visited, connection > a:hover, connection > a:active, connection > a.button, connection > a.button:link, connection > a.button:visited, connection > a.button:hover, connection > a.button:active {
        color: #ffffff !important;
        font-size: 2rem;
    }

features {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    flex-wrap: wrap;
}

feature {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
}

    feature:nth-of-type(1n) {
        background-color: #292929;
    }

    feature:nth-of-type(2n) {
        background-color: #1F1F1F;
    }

    feature:nth-of-type(3n) {
        background-color: #333333;
    }

feature-glyph {
    text-align: center;
}

    feature-glyph > img.artist {
        width: 16rem;
		height: 271px;
    }

    feature-glyph > img.programmer {
        width: 13rem;
		height: 16.5rem;
    }

    feature-glyph > img.public {
        width: 14rem;
		height: 15rem;
    }

    feature-glyph > img.piggybank {
        width: 14rem;
        height: 203px;
    }

socials, partners {
    display: flex;
    justify-content: space-between;
}

    partners > a {
        display: flex;
    }

@media only screen and (max-width: 600px) {
    header, footer {
        padding: 3rem;
    }

    logo {
        width: 343px;
        height: 64px;
        background: transparent url(../img/saltimbanques-logo-64.png) no-repeat;
    }

    h1, slogan {
        font-size: 1.6rem;
    }

    download {
        transform: scale(0.8);
    }

        download ~ download {
            margin-top: 0.1rem;
        }

    feature {
        padding: 4rem 2rem 4rem 2rem;
        gap: 1rem;
    }

    slogan {
        margin-top: 1rem;
    }

    connection {
        width: 9rem;
        height: 1.3rem;
    }

    connection > a, connection > a:link, connection > a:visited, connection > a:hover, connection > a:active, connection > a.button, connection > a.button:link, connection > a.button:visited, connection > a.button:hover, connection > a.button:active {
        font-size: 1.6rem;
    }
}

@media only screen and (min-width: 600px) {
    header, footer {
        padding: 5rem;
    }

    logo {
        width: 514px;
        height: 96px;
        background: transparent url(../img/saltimbanques-logo-96.png) no-repeat;
    }

    feature {
        padding: 5rem 3rem 5rem 3rem;
        gap: 1rem;
    }

    slogan {
        margin-top: 1rem;
    }
}

@media only screen and (min-width: 768px) {
    header, footer {
        padding: 5rem;
    }

    logo {
        width: 685px;
        height: 128px;
        background: transparent url(../img/saltimbanques-logo-128.png) no-repeat;
    }

    feature {
        padding: 7rem 5rem 7rem 5rem;
        justify-content: space-evenly;
    }

    slogan {
        margin-top: 0;
    }
}

@media only screen and (min-width: 992px) {
    header, footer {
        padding: 5rem;
    }

    logo {
        width: 685px;
        height: 128px;
        background: transparent url(../img/saltimbanques-logo-128.png) no-repeat;
    }

    feature:nth-of-type(4n) {
        background-color: #292929;
    }

    feature {
        padding: 7rem 5rem 7rem 5rem;
        justify-content: space-evenly;
    }

    feature-glyph {
        flex: 1;
    }

    feature-body {
        flex: 2;
    }

    slogan {
        margin-top: 0;
    }
}

@media only screen and (min-width: 1200px) {
    header, footer {
        padding: 10rem;
    }

    logo {
        width: 1028px;
        height: 192px;
        background: transparent url(../img/saltimbanques-logo-192.png) no-repeat;
    }

    feature {
        padding: 7rem 5rem 7rem 5rem;
        justify-content: space-evenly;
    }

    feature-glyph {
        flex: 1;
    }

    feature-body {
        flex: 2;
    }

    slogan {
        margin-top: 0;
    }
}