:root {
    --font-size: 1.4rem;
}

@font-face {
    font-family: "Comili-Book";
    font-style: normal;
    font-weight: unset;
    font-display: swap;
    src: url("./Comili-Book.otf") format("truetype");
}

body {
    font-family: 'Comili-Book';
}

footer {
    font-size: calc(var(--font-size) - 0.8rem);
}

.infos p {
    font-size: calc(var(--font-size) - 0.4rem) !important;
}

 /* Extra small devices (smartwatch, phones, 300px and down) */
@media only screen and (max-width: 300px) {
    h1 {
        font-size: calc(var(--font-size) - 0.2rem);
    }

    h2 {
        font-size: calc(var(--font-size) - 0.3rem);
    }

    h3 {
        font-size: calc(var(--font-size) - 0.4rem);
    }

    h4 {
        font-size: calc(var(--font-size) - 0.5rem);
    }

    h5 {
        font-size: calc(var(--font-size) - 0.6rem);
    }

    h6 {
        font-size: calc(var(--font-size) - 0.5rem);
    }

    p {
        font-size: calc(var(--font-size) - 0.4rem);
    }

    button, .button, input[type="submit"] {
        font-size: calc(var(--font-size) - 0.4rem);
    }
}

/* Medium devices (landscape tablets, 400px and up) */
@media only screen and (min-width: 300px) {
    h1 {
        font-size: calc(var(--font-size) + 0.1rem);
    }

    h2 {
        font-size: calc(var(--font-size) + 0.0rem);
    }

    h3 {
        font-size: calc(var(--font-size) - 0.1rem);
    }

    h4 {
        font-size: calc(var(--font-size) - 0.2rem);
    }

    h5 {
        font-size: calc(var(--font-size) - 0.3rem);
    }

    h6 {
        font-size: calc(var(--font-size) - 0.4rem);
    }

    p {
        font-size: calc(var(--font-size) - 0.0rem);
    }

    button, .button, input[type="submit"] {
        font-size: calc(var(--font-size) - 0.2rem);
    }
}

/* Medium devices (landscape tablets, 600px and up) */
@media only screen and (min-width: 600px) {
    h1 {
        font-size: calc(var(--font-size) + 0.2rem);
    }

    h2 {
        font-size: calc(var(--font-size) + 0.1rem);
    }

    h3 {
        font-size: calc(var(--font-size) - 0.0rem);
    }

    h4 {
        font-size: calc(var(--font-size) - 0.1rem);
    }

    h5 {
        font-size: calc(var(--font-size) - 0.2rem);
    }

    h6 {
        font-size: calc(var(--font-size) - 0.3rem);
    }

    p {
        font-size: calc(var(--font-size) + 0.1rem);
    }

    button, .button, input[type="submit"] {
        font-size: calc(var(--font-size) - 0.1rem);
    }
}

/* Medium devices (landscape tablets, 800px and up) */
@media only screen and (min-width: 800px) {
    /*  */
}

/* Large devices (laptops/desktops, 1000px and up) */
@media only screen and (min-width: 1000px) {
    /*  */
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /*  */
}