* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

h1 { font-size: 1.8rem; margin: 0.9rem 0; }
h2 { font-size: 1.6rem; margin: 0.8rem 0; }
h3 { font-size: 1.4rem; margin: 0.8rem 0; }
h4 { font-size: 1.3rem; margin: 0.7rem 0; }
h5 { font-size: 1.2rem; margin: 0.7rem 0; }
h6 { font-size: 1.1rem; margin: 0.7rem 0; }

ul { padding-left: 1rem; }
li { margin: 0.5rem 0; }

a { text-decoration: none; color: darkslateblue; }

html :not(pre *,code,code *) {
    font-family: Ubuntu, sans-serif;
}

@media all and (max-width: 512px) {
    * {
        font-size: calc(15px + 1vw);
    }

    body > .container {
        width: 100%;
        padding: calc(20px + 1vw);
    }
}

@media all and (min-width: 513px) and (max-width: 1024px) {
    * {
        font-size: calc(20px + 0.2vw);
    }

    body > .container {
        width: 100%;
        padding: 3vw 10vw;
    }
}

@media all and (min-width: 1025px) {
    * {
        font-size: calc(25px + 0.3vw);
    }

    body > .container {
        width: 100%;
        padding: 2vw 15vw;
    }
}