@import './nav.css';
@import './lists.css';

body {
    margin: 0 auto;
    max-width: 640px;
    font-family: "lato", sans-serif;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 400;
}

h1 {
    padding: 20px 0 12px 12px;
}

button, .button {
    padding: 16px 16px;
    cursor: pointer;
    font-size: 18px;
    color: white;
    border-radius: 20px;
    border: none;

    &.primary {
        background: rgb(62, 62, 153);
        color: white;
    }

    &.secondary {
        background: rgb(236, 236, 236);
        color: #333;
    }
}

.popup {
    width: 100vw;
    max-width: 640px;
    top: 20px;
    margin: 0 auto;
    flex-direction: column;
    position: fixed;
    background: white;

    form {
        padding: 20px;
        display: flex;
        flex-direction: column;
        row-gap: 20px;

        input {
            padding: 12px;
            font-size: 18px;

            &[type="submit"] {
                width: 100%;
                padding: 16px;
            }
        }

        .row {
            display: flex;
            flex-direction: row;
            column-gap: 12px;
        }

        button {
            width: 100%;
        }
    }

}