@media screen and (max-width: 890px) {
    #wren {
        margin-top: 2rem;
        margin-left: 40px;
        float: none;
        height: 125px;
    }
    #robin {
        padding: 0 0 90px;
        height: unset;
        float: none;
        margin-top: 0;
        margin-left: 30%;
    }

    #bluetit {
        margin: 2rem 20px auto auto;
        float: none;
        padding: 90px 0 0 0;
    }

    #chaffinch {
        float: none;
        margin-left: 1rem;
        height: 120px;
    }

    #thrush {
        margin-left: auto;
        float: none;
        padding: 1rem 0 0 0;
        margin-right: 1rem;
    }
    #baselevel {
        height: unset;
        width: 900px;
        max-width: 100vw;
    }
    p.narrativer,
    p.narrativel {
        margin: 1rem;
        padding: 0.5rem;
        text-align: left;
        float: none;
        background-color: rgba(250,250,250,0.5);
        border-radius: 0.5rem;
        width: 100%;
        max-width: 60%;
        font-size: 15px;
    }
    p.narrativer {
        margin-left: auto;
        margin-right: 1rem;
    }
}

@media screen and (max-width: 440px) {
    #wren,
    #robin,
    #bluetit,
    #thrush,
    #chaffinch {
        display: block;
        margin: 2rem auto;
        padding:120px 0 0 0;
    }
    #wren {
        padding-top: 140px;
        margin-bottom: 3rem;
    }
    #robin {
        padding: 100px 0 0 0;
    }
    #toplevel,
    #baselevel {
        height: unset;
    }
    p.narrativer,
    p.narrativel {
        display: block;
        margin: 2rem auto;
        max-width: 85%;
        padding: 1rem;
    }
}