@media screen and (min-width: 320px) and (max-width: 768px) {
    html {
        background: none;
        font-size: small;
    }

    header h2 {
        font-size: medium;
    }

    header a {
        display: none;
    }

    #landing-text {
        font-size: xx-large;
    }

    #landing-secondary-text {
        font-size: small;
        margin-top: 1.5rem;
    }

    .button {
        font-size: small;
    }

    #projects {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 4rem;
    }

    .subtitle {
        font-size: xx-large;
        margin-top: 6rem;
    }

    .card {
        width: 80%;
    }

    .card-title {
        font-size: large;
    }

    footer {
        font-size: x-small;
    }

    .card-desc {
        opacity: 1;
    }

    .flex {
        flex-direction: column-reverse;
        gap: 2rem;
        align-items: center;
    }

}