Starlio-web/static/css/main.css

body {
    background-color: #2F3041;
    color: white;
}

* {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#content p {
    font-family: 'Roboto', sans-serif;
}

#devices {
    display: block;
    width: 90%;
    height: 90%;
}

@media (min-width: 0) {
    #devices {
        margin: 65% auto;
    }

    #title {
        font-size: 2.5em;
        margin-top: -160%;
    }

    #subtitle {
        margin-top: -5%;
    }

    #description, #subtitle, #title {
        text-align: center;
    }

    #google-play, #github {
        width: 45%;
        height: 45%;
    }

    #google-play {
        margin-top: 51%;
        margin-left: 5%;
    }
}

@media (min-width: 576px) {
    #devices {
        margin: 50% auto;
    }

    #title {
        font-size: 3em;
        margin-top: -130%;
    }

    #google-play, #github {
        width: 37%;
        height: 37%;
    }

    #get-it-on {
        margin-top: 5%;
        text-align: center;
    }
}

@media (min-width: 768px) {
    #devices {
        margin: 39% auto;
    }

    #title {
        font-size: 3.5em;
        margin-top: -110%;
    }

    #description {
        width: 90%;
        margin: 0 auto;
    }

    #google-play, #github {
        width: 30%;
        height: 30%;
    }

    #get-it-on {
        margin-top: 1%;
        text-align: center;
    }
}

@media (min-width: 992px) {
    #devices {
        margin: 30% auto;
    }

    #title {
        font-size: 4em;
        margin-top: -95%;
    }

    #description {
        width: 70%;
        margin: 0 auto;
    }

    #google-play, #github {
        width: 25%;
        height: 25%;
    }

    #get-it-on {
        margin-top: -2%;
        text-align: center;
    }
}

@media (min-width: 1200px) {
    #devices {
        margin: 25% auto;
    }

    #title {
        font-size: 4.5em;
        margin-top: -85%;
    }

    #description {
        width: 55%;
        margin: 0 auto;
    }

    #google-play, #github {
        width: 20%;
        height: 20%;
    }

    #get-it-on {
        margin-top: -3%;
        text-align: center;
    }
}


@media (min-width: 1400px) {
    #devices {
        width: 50%;
        height: 50%;
        margin: 15% 2%;
    }

    #title {
        font-size: 4em;
        margin-top: -37%;
        margin-left: 50%;
    }

    #subtitle {
        font-size: 2em;
        margin-top: -2%;
        margin-left: 50%;
    }

    #description {
        font-size: 1.1em;
        width: 30%;
        margin: 2% 60%;
    }

    #google-play, #github {
        width: 35%;
        height: 35%;
    }

    #get-it-on {
        margin-top: -25%;
        margin-left: 47%;
    }
}