Home.module.css

.container {
    position: relative;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.appExample {
    width: 50%;
    margin: 0 auto;
}

.appExample img {
    width: 100%;
    height: auto;
}

.section {
    width: 60%;
    margin: 50px auto 0 auto;
}

.section:nth-child(n + 2) {
    margin-top: 100px;
}

.sectionTitle {
    font-size: 35px;
}

.sectionDescription {
    font-size: 20px;
    width: 50%;
    color: rgb(200, 200, 200);
    margin: 0 auto;
}

.downloadLinks {
    position: relative;
    display: grid;
    width: 50%;
    margin: 50px auto 0 auto;
    grid-template-columns: repeat(auto-fill, 50%);
    gap: 20px 0;
}

.downloadLinks a,
.downloadLinks span {
    display: block;
    user-select: none;
}

.downloadLinks a.disabledLink {
    pointer-events: none;
    opacity: 0.5;
}

.downloadLinks img,
.downloadLinks ms-store-badge::part(img) {
    width: 150px !important;
    height: auto;
}

.featuresList {
    position: relative;
    display: grid;
    width: 100%;
    margin: 50px auto 0 auto;
    grid-template-columns: repeat(auto-fill, calc(32.5% - 25px));
    grid-gap: 25px 50px;
}

.featuresFeature {
    position: relative;
    flex-basis: 300px;
}

.featuresFeatureItem {
    color: rgb(235, 235, 235);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    background-color: rgb(100, 100, 100);
    padding: 2.25rem 1.5rem;
    border: 1px solid hsla(0, 0%, 71%, 0.56);
    border-radius: 16px;
    box-sizing: border-box;
}

.featureIcon {
    font-size: 60px;
}

.featureIconBrush {
    --fa-secondary-color: rgb(103, 255, 126);
}

.featureIconRocket {
    --fa-secondary-color: rgb(111, 193, 255);
}

.featureIconMeteor {
    --fa-primary-opacity: 0.5;
    --fa-secondary-opacity: 0.75;
    --fa-secondary-color: rgb(255, 111, 111);
}

.featureIconBook {
    --fa-primary-color: rgb(150, 200, 229);
    --fa-secondary-color: rgb(133, 81, 189);
    --fa-primary-opacity: 0.75;
    --fa-secondary-opacity: 0.75;
}

.featureIconLastFM {
    color: rgb(210, 30, 30);
}

.featureDescription {
    font-size: 18px;
    line-height: 25px;
}

.featureDescription a {
    color: #fa586a;
    text-decoration: none;
    transition: text-shadow 0.25s ease-in-out;
}

.featureDescription a:hover {
    text-shadow: 0 0 10px #fa586a;
}

.featureNote {
    font-size: 14px;
    color: rgb(200, 200, 200);
}

.comingSoonContainer {
    margin: 20px auto 0;
}

.comingSoon {
    font-size: 0.7em;
    color: #fa586a;
    border: solid 1px #fa586a;
    padding: 4px 11px;
    border-radius: 16px;
}

.comingSoonContainer a {
    text-decoration: none;
}

.smallNote {
    font-size: 0.8em;
    opacity: 0.9;
    margin-left: 5px;
    vertical-align: top;
}

@media screen and (max-width: 500px) {
    .sectionDescription {
        width: 100%;
    }

    .appExample {
        width: 90%;
    }

    .featuresList {
        grid-template-columns: auto;
    }

    .footer {
        width: 75%;
        flex-direction: column;
        justify-content: center;
    }

    .footer > *:nth-child(n + 2) {
        margin-top: 15px;
    }

    .downloadLinks {
        width: 75%;
        grid-template-columns: auto;
    }
}

@media screen and (max-width: 1200px) {
    .section {
        width: 90%;
    }

    .appExample img {
        width: 100%;
        height: 100%;
    }
}

@media screen and (min-width: 500px) and (max-width: 1200px) {
    .featuresList {
        grid-template-columns: repeat(auto-fill, calc(50% - 25px));
    }

    .appExample {
        width: 60%;
    }
}