.user > .fullname, .user > .username, .email, .password {
    color: var(--color1);
    text-align: left;
    background-color: none;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
}

form > div > input,
form > div > div > input {
    padding: 10px;
    border: none;
    outline: none;
    background: none;
    margin: 25px;
    border-bottom: 2px solid var(--color5);
    font-size: 20px;
    color: var(--color5);
}

input::placeholder {
    color: var(--color4);
}

label {
    display: none;
}

.terms {
    font-size: 1.1em;
    color: var(--color5);
}

.terms > input {
    margin: 5px;
}

.button {
    padding: 10px;
    width: 85%;
    margin: 60px 0px;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: var(--color0);
    color: #F2F2F8;
    border-radius: 4px;
    transition: .2s all;
    font-size: 1.5em;
}

.button:hover {
    box-shadow: 1px 1px 5px var(--color0);
}

.button:focus {
    background-color: var(--color2);
    color: var(--color0);
}

.join {
    margin-bottom: 20px;
}