@media screen and (max-width: 768px) {
    .image h1 {
        top: 10vh;
        width: 80%;
        font-size: 7vw;
    }

    .subheading {
        width: 80%;
        font-size: 8vw !important;
    }

    .waves {
        height: 10vh !important;
    }

    .card h2 {
        font-size: 6vw !important;
    }

    .radio-selection {
        font-size: 7vw !important;
    }

    input[type="radio"] {
        width: 0.9em;
        height: 0.9em;
        border: 0.1em solid rgba(255, 255, 255, 0.3);
    }

    input[type="radio"]:hover {
        border: 0.1em solid rgba(255, 255, 255, 0.6);
    }

    input[type="radio"]::before {
        width: 0.45em;
        height: 0.45em;
    }

    input[type="radio"]:checked {
        border: 0.1em solid rgba(255, 255, 255, 0.7);
    }

    form div {
        margin: 10px 0;
    }

    form {
        float: left;
        width: 60%;
    }

    .emissions {
        margin-top: 5vh;
        position: static;
        bottom: unset;
        right: unset;
        width: 100%;
    }

    form {
        width: 100%;
    }

    #distance,
    #paper {
        width: 35%;
    }

    #co2-neutral {
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        width: 100%;
    }

    .emissions p {
        font-size: 35px;
    }

    #fact img {
        width: 50px;
    }

    .paper.emissions {
        margin: 25px 0;
    }

    .paper.emissions p {
        font-size: 50px;
    }

    .heat, .drought {
        width: 90vw;
    }

    .learn-more {
        top: 10vh;
        padding: 8px 16px;
        font-size: 4vmin;
    }

    .learn-more img {
        width: 12px;
        height: 12px;
    }

    .text p {
        margin-top: 7vh;
        font-size: 3vw !important;
    }
}