/* 
base colors i am going to use (probably)
background: #666A86 (blue slate)
box: #788AA3 (slate grey)
Details OR text: #92B6B1 (muted teal) OR #B2C9AB (celadon)
button: #E8DDB5 (pearl beige)

shades for these colors may also be used. 
Shades are provided by using coolors.co website.
Currently using 4th from bottom:
Background:     #2B2E3B
Box:            #29303D
Details:        #293D3B
Text:           #2D3E28
Button          #4E4218
*/

:root {
    font-family: 'Courier New', Courier, monospace;
}

body {
    background-color: #2B2E3B;
}

form {
    background-color: #29303D;
    width: 250px;
    margin: auto;
    margin-top: 100px;
    padding: 20px;

    border-radius: 25px;
    box-shadow: 0px 0px 10px #080A0C;
}

.label {
    color: #E7E9EF;
}

.textfield {
    font-family: 'Courier New', Courier, monospace;
    background-color: #212631;
    color: #E7E9EF;
    margin: 5px 0px;
    padding: 6px;
    border-radius: 8px;
    border: solid 2px #293D3B;
    transition: border 500ms;
}

.textfield:hover {
    border: solid 2px #62938C; 
}

.textfield:focus {
    outline: none;
    border: solid 2px #A9C6C2;
}

.submit {
    margin-top: 7px;
    padding: 7px 15px;
    border-radius: 10px;
    border: none;
    font-weight: bolder;
    background-color: #517048;
    transition: background-color 500ms;
}

.submit:hover {
    background-color: #75A06A;
}

.submit:active, .submit:focus {
    outline: none;
    transition: background-color 10ms;
    background-color: #BACFB4;
}