@font-face {
    font-family: "Cantarell var";
    src: url("../fonts/Cantarell-VF.woff2") format("woff2 supports variations"), url("../fonts/Cantarell-VF.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: "Regular";
}

*,
*::before,
*::after {
    box-sizing: inherit
}

html,
body,
p,
ol,
ul,
li {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal
}

ul {
    list-style: none
}

button {
    margin: 0
}

img {
    height: auto;
    max-width: 100%
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

html {
    font-family: 'Cantarell var', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: #222;
    color: white;
    box-sizing: border-box;
}

body,
main {
    display: flex;
    flex-direction: column;
}

main {
    align-items: center;
}

#features {
    max-width: 100vw;
}

#cli, #features {
    padding-top: 2rem;
}

body>main>section:not(#features)>div,
footer>div {
    max-width: min(100rem, 100vw);
}

.apps {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
}

.apps img {
    width: 64px;
}

h1 {
    font-size: 2.25rem;
    font-variation-settings: "wght" 900, "slnt" 0;
}

h2 {
    font-size: 1.5rem;
    font-variation-settings: "wght" 400, "slnt" 0;
}

h3 {
    font-variation-settings: "wght" 200, "slnt" 0;
}

.paragraph {
    font-size: 1.2rem;
    margin-bottom: 3rem;
}

.section-title,
.paragraph {
    max-width: min(100rem, 80vw);
}

footer {
    background-color: black;
    color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

footer a {
    color: #69E;
}

footer a:visited {
    color: #69E;
}

footer ul>li>a>img {
    max-width: 24px;
    max-height: 24px;
    min-width: 24px;
    min-height: 24px;
    transition-duration: 150ms;
}

footer ul>li>a {
    border-radius: 6px;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: background-color;
    transition-duration: 150ms;
}

footer ul>li>a.pink:hover {
    background-color: rgba(234, 74, 170, 0.2);
}

footer ul>li>a.pink:hover img {
    filter: brightness(0) saturate(100%) invert(46%) sepia(41%) saturate(4025%) hue-rotate(297deg) brightness(96%) contrast(92%);
}

footer ul>li>a.orange:hover {
    background-color: rgba(237, 91, 0, 0.2)
}

footer ul>li>a.orange:hover img {
    filter: brightness(0) saturate(100%) invert(39%) sepia(85%) saturate(3026%) hue-rotate(7deg) brightness(98%) contrast(101%);
}

footer ul>li>a:hover {
    background-color: rgba(102, 153, 238, 0.2);
}

footer ul>li>a:hover img {
    filter: brightness(0) saturate(100%) invert(61%) sepia(20%) saturate(3839%) hue-rotate(193deg) brightness(98%) contrast(91%);
}

footer ul {
    align-self: end;
    display: flex;
    gap: 1rem;
    margin-right: 2rem;
}

footer>article {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

#hero {
    min-height: 80vh;
    width: 100%;
    color: white;
    background: #1a5fb4;
    background: linear-gradient(to bottom, #1a5fb4 60%, #4070ac);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

#cli {
    background-color: #c061cb;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cli picture {
    display: flex;
}

#cli .paragraph {
    margin-bottom: 0;
}

.section-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    overflow-x: hidden;
}

#hero .app-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    text-align: center;
    filter: drop-shadow(0 0 .5rem #0000004C);
}

.flathub-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

#hero .app-logo {
    height: 128px;
    width: 128px;
}

.feature-scroll {
    display: flex;
    overflow-x: auto;
    width: 100vw;
    -webkit-overflow-scrolling: touch;
}

.feature-scroll picture {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-scroll img {
    max-width: 100%;
    height: auto;
    display: block;
}

.arrow {
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0px 0px 2px black);
}

.arrow img {
    width: 80px;
    height: auto;
}

.arrow.mpris {
    bottom: -130px;
    width: 273px;
    max-width: 100%;
    text-align: end;
}

.arrow.scrobble {
    top: -120px;
    width: 273px;
    max-width: 100%;
    text-align: start;
}

.scrobblers {
    height: 125px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 125px;
    background-image: url(../images/scrobblers.webp);
}


.section-content>.section-title {
    margin-bottom: 3rem;
}

#hero .section-content {
    overflow: visible;
}

/* @media only screen and (min-width:898px) {
    #hero .section-content {
        flex-direction: row
    }
} */

@media only screen and (min-width:479px) {
    #hero .app-card {
        flex-direction: row;
        text-align: left
    }

    .platform-icons {
        justify-content: start
    }
}

@media (prefers-color-scheme:light) {
    #hero {
        background: #c5f1a1;
        background: linear-gradient(to bottom, #c5f1a1 60%, #a9f06f);
        color: #251f32;
    }

    html {
        background-color: white;
        color: black
    }

    .feature-list>li {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

@media (prefers-reduced-motion) {
    #hero .app-logo:hover {
        animation: none;
    }
}