body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-items: center;
    & > div {
        padding: 4%;
        border-radius: 1vh;
        background-color: lightgray;
        margin: auto;
        height: 240px;
        width: 480px;
        h1 {
            text-align: center;
        }
        form {
            display: flex;
            flex-direction: column;
            div {
                display: flex;
                &.align {
                    align-self: flex-end;
                    width: 70%;
                    label {
                        width: 100%;
                    }
                }
                label {
                    display: block;
                    width: 30%;
                }
                input:not([type="checkbox"]) {
                    padding: 4px;
                    display: block;
                    width: 70%;
                    &[type="submit"] {
                        background-color: blue;
                        border: none;
                        border-radius: 4px;
                        color: white;
                        width: 15%;
                    }
                }
            }
        }
    }
}

@media (max-width: 600px) {
    body > div {
        height: 100%;
        width: 100%;
        form {
            flex-wrap: wrap;
            div {
                flex-direction: column;
                input, label {
                    width: 100%;
                }
            }
        }
    }
}