* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
}

/* Default styles */
:root {
    --color-pancho: #E2B48E;
    --color-crusta: #ED8856;
    --color-twine: #BE8252;
    --color-hemlock: #6E6D49;
    --color-camouflage-green: #788568;
    --color-gray: #605C59;
}

body {
    background-image: url("../images/landing-background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

/* ########## HEADER ######### */
.header {
    height: 70px;
    display: grid;
    align-content: center;
    background-color: rgba(223, 181, 143, .75);
    padding-left: 170px;
    padding-right: 170px;
}

/* logo */
#logo {
    display: flex;
    align-items: center;
}

#logo h5 {
    font-size: 24px;
    color: white;
    font-weight: bold;
}

/* menu */
#menu {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    list-style: none;
    color: white;
}

#menu li {
    cursor: pointer;
}

#menu li:hover {
    border-bottom: var(--color-crusta) solid 2px;
}

/* body */
.body {
    background-color: rgba(223, 181, 143, .75);
    padding-left: 170px;
    padding-right: 170px;
    padding-bottom: 170px;
    padding-top: 200px;
}

/* heading */
#heading {
    color: white;
    text-align: center;
    font-size: 48px;
}

/* form container */
.form-container {
    background-color: white;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
}

/* login sign up buttons */
.buttons {
    width: 100%;
    height: 100px;
    border-radius: 20px;
    position: relative;
    font-size: 24px;
    background-color: var(--color-pancho);
    color: white;
}

.buttons:hover {
    color: white;
}

/* button container */
#login {
    position: relative;
    right: 15px;
    cursor: pointer;
}

/* login text */
#login-text {
    position: relative;
    left: 100px;
    top: 10px;
    cursor: pointer;
}

/* sign up text */
#signup-text {
    position: relative;
    left: 50px;
    top: 10px;
    cursor: pointer;
}

#sign-up {
    position: relative;
    left: 15px;
    color: var(--color-hemlock);
    background-color: white;
    cursor: pointer;
}

/* form */
form {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 70px;
}

/* email */
#email-address {
    height: 60px;
    border-radius: 20px;
    text-align: center;
    font-size: 24px;
    color: var(--color-hemlock);
}

/* password */
#password {
    height: 60px;
    border-radius: 20px;
    margin-top: 40px;
    text-align: center;
    font-size: 24px;
}

#password::placeholder,
#email-address::placeholder {
    color: var(--color-hemlock);
}

/* form button */
.btn-login {
    color: white;
    background-color: var(--color-twine);
    width: 100%;
    height: 60px;
    border-radius: 20px;
    margin-top: 40px;
    font-size: 24px;
}

.btn-login:hover {
    color: white;
    background-color: var(--color-crusta);
}

/* ###### SIGN UP FORM ####### */
#sign-up-form {
    display: none;
}

/* first name */
#first-name {
    height: 60px;
    border-radius: 20px;
    text-align: center;
    font-size: 24px;
    color: var(--color-hemlock);
    margin-bottom: 40px;
}

#first-name::placeholder {
    color: var(--color-hemlock);
}

/* Last name */
#last-name {
    height: 60px;
    border-radius: 20px;
    text-align: center;
    font-size: 24px;
    color: var(--color-hemlock);
    margin-bottom: 40px;
}

#last-name::placeholder {
    color: var(--color-hemlock);
}

/* Modal */
.modal-content {
    border-radius: 20px;
}

/* header */
#modal-heading {
    text-align: center;
    color: var(--color-hemlock);
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* upload */
#upload {
    border: solid 3px var(--color-hemlock);
    color: var(--color-hemlock);
    width: 100%;
    height: 60px;
    border-radius: 20px;
    margin-bottom: 40px;
    font-size: 24px;
}

/* next step */
#next-step {
    color: white;
    background-color: var(--color-twine);
    width: 100%;
    height: 60px;
    border-radius: 20px;
    font-size: 24px;
    margin-bottom: 40px;
}

/* request custom frame */
#custom-frame {
    color: white;
    background-color: var(--color-pancho);
    width: 100%;
    height: 60px;
    font-size: 24px;
    border-radius: 20px;
}

/* counties */
#counties {
    font-size: 24px;
    color: var(--color-hemlock);
    height: 60px;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 20px;
    text-align: center;
}

/* address */
#address {
    font-size: 24px;
    height: 60px;
    border-radius: 20px;
    text-align: center;
}

#address::placeholder {
    color: var(--color-hemlock);
}

#password {
    color: var(--color-hemlock);
}