@media screen and (max-width: 600px) {
    header {
        font-size: 1.6rem;
        padding: 0.2rem;
    }

    .password-box {
        font-size: 2.5rem;
    }

    .letters-box {
        width: 100%;
        font-size: 2rem;
        min-height: 10rem;
        border-right: none;
    }

    .picture-box {
        width: 100%;
        border-left: none;
    }

    .active {
        width: 30px;
        height: 30px;
    }
    
    .inactive {
        width: 30px;
        height: 30px;
    }

    img {
        height: 80%;;
    }

    button {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 850px) and (orientation: landscape) {
    header {
        font-size: 1.6rem;
        padding: 0.2rem;
    }

    .password-box {
        font-size: 2.5rem;
    }

    .letters-box {
        width: 50%;
        font-size: 2rem;
        min-height: 15rem;
        border-right: none;
    }

    .picture-box {
        width: 50%;
        border-left: none;
    }

    .active {
        width: 30px;
        height: 30px;
    }
    
    .inactive {
        width: 30px;
        height: 30px;
    }

    img {
        max-height: 15rem;
    }

    button {
        font-size: 1.6rem;
    }
}