:root {
    --font-title: 'Libre Baskerville', serif;
    --font-text: 'Poppins', sans-serif;
    --btn-bg: var(--secondary-color, #B2BDA0);
    --btn-bg-hover: var(--primary-color, #8D9E6F);
    --bg-light-gray: #ededed;
    --font-color-gold: var(--accent-color, #DAA520);
}

p, label, input, textarea {
    font-family: var(--font-text);
    font-size: 0.95em;
}

p[id="p-user-fname"] {
    font-size: 1.25em;
}

.text-semibold {
    font-weight: 600;
}

input[type="text"],
input[type="number"],
textarea {
    /* Since the class form-control makes the background white, we need to set this as important. */
    background-color: #EEEEEE !important;
}

button.btn-light {
    background-color: var(--btn-bg);
}

button.btn-light:hover {
    /* Since the class btn-light makes the background grey, we need to set this as important. */
    background-color: var(--btn-bg-hover) !important;
}

textarea {
    resize: none;
}

div[id="divBackgroundImage"] {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--bg-light-gray);

    height: 80vh;
}

div[id="divCodeBackground"] {
    padding: 6rem 2rem;
}

div[id="divConfirmationForm"] {
    padding: 6rem 1rem;
    border-top: 1px solid var(--bg-light-gray);
}

div#divModalStatus .modal-body {
    padding: 0 1.9rem;
}

/* Removing lines in modal. */
.modal-header {
    border-bottom: 0 none;
}

.modal-footer {
    border-top: 0 none;
}

.gold-link {
    color: var(--font-color-gold);
    font-weight: 500;
    text-decoration: inherit;
}

.gold-link:hover {
    color: var(--font-color-gold);
    font-weight: 600;
}


/* Medium screens */
@media only screen and (min-width: 768px)  {
    p, label, input, textarea {
        font-size: 1.00em;
    }

    div[id="divCodeBackground"] {
        padding: 4rem;
    }

    div[id="divConfirmationForm"] {
        padding: 6rem 0rem;
    }
}

/* Extra large screens */
@media only screen and (min-width: 1200px)  {
    div[id="divBackgroundImage"] {
        height: 80vh;
    }

    div[id="divCodeBackground"] {
        padding: 6rem;
    }

    div[id="divConfirmationForm"] {
        padding: 8rem 4rem;
    }
}