@media (max-width: 768px) {
    body {
        font-size: 0.8em;
    }

    .header-title {
        font-size: 1.4em;
    }

    .navbar a {
        font-size: 1.0em;
    }

    h2 {
        font-size: 1.2em;
    }
}

@media (max-width: 500px) {
    body {
        font-size: 0.6em;
    }

    .header-title {
        font-size: 1.2em;
    }

    .navbar a {
        font-size: 0.8em;
    }

    h2 {
        font-size: 1em;
    }

    ul,
    ol {
        padding-inline-start: 10px;
    }

    main {
        margin: 0 2%;
    }

    #about-img {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 330px) {
    .header-title {
        font-size: 1em;
    }

    .navbar a {
        font-size: 0.6em;
        padding: 4px;
    }

    h2 {
        font-size: 0.8em;
    }

    main {
        margin: 0 1%;
    }
}

@media (max-width: 250px) {
    .navbar a {
        padding: 5px 0;
    }
}