:root {
    --primary-bg-color: #ffffff;
    --primary-button-color: #637963;
    --primary-text-color: #444444;
    --secondary-text-color: #494949;
}

html, body {
    height: 100%;
    transform: none;
    color: var(--primary-text-color);
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    background-color: var(--primary-bg-color);
}

h5 {
    margin-block-start: 1em;
    margin-block-end: 0.25em;
}

#register-page {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#accounts__form-side {
    display: flex;
    width: 100%;
    justify-content: center;
}

.accounts-form {
    justify-self: center;
    margin-top: 20vh;
    width: clamp(250px, 300px, 100%);
}

.accounts-form > div {
    display: flex;
    flex-direction: column;
    margin-block-start: 0.75em;
    margin-block-end: 0.75em;
}

input {
    min-height: 30px;
    border: solid 2px #b2b2b2;
    border-radius: 3px;
    padding-block: 0;
    padding-left: 3px;
    box-sizing: border-box;
    transform: none;
    scale: none;
    backface-visibility: hidden;
    width: 100%;
    background-color: white;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.submit-button {
    min-height: 35px;
    border-color: rgba(255, 255, 255, 0);
    border-radius: 3px;
    font-size: 18px;
    width: 100%;
    margin-top: 30px;
    color: white;
    background-color: var(--primary-button-color);
}

.submit-button:hover {
    background-color: #467046;
}