form {
    width: 100%;
    margin-top: 1rem;
    border: 1px solid var(--primary-color-ligher);
    border-radius: 3px;
    background: rgba(var(--primary-color-darker), .2);
    padding: 2rem;

    div {
        padding: .5rem;

        label {
            display: block;
        }
    }
}

input[type="password"],
input[type="email"],
input[type="text"] {
    @include breakpoint('screen', 'm', 'full') {
        width: rem(400);
    }
    line-height: 1rem;
    padding: .5rem 1rem;
    border: 1px solid var(--secondary-color-darker);
    color: var(--fg-color);
    border-radius: 5px;
    transition: background-color .5s;
    text-decoration: none;
}

.button, button {
    @extend .nofx, .noexternal-fx;
    line-height: 1rem;
    padding: .5rem 1rem;
    border: 1px solid var(--secondary-color-darker);
    background: linear-gradient(rgb(var(--secondary-color)), rgb(var(--secondary-color-darker)));
    color: #151515 !important;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .5s;
    text-shadow: none;
}

.button:hover, button:hover {
    background: linear-gradient(rgb(var(--secondary-color-lighter)), rgb(var(--secondary-color)));
}