/* css variables */
:root {
    --main: #EF6461;
    --secondary: white;
}

/* main section */
main {
    min-height: 95vh;
}

/* Bootstrap Default Resets */
.container-fluid {
    padding: 0;
    margin: 0;
    width: 100%;
}

.row {
    padding: 0;
    margin: 0;
}
.col {
    padding: 0;
    margin: 0;
}

/* navigation */
.navbar {
    background-color: var(--main);
}

/* jumbotron */
.jumbotron {
    background: url('https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80');
    background-size: cover;
    height: 30vh;
    background-position: center;
    margin: 0;
}

.jumbotron-text {
    color: white;
    text-shadow: 1px 2px black;
}

/* form */
.form-row {
    background-color: var(--secondary);
    width: auto;
}

.form-col {
    margin: 0 auto;
    color: var(--main);
    text-transform: uppercase;
    text-shadow: 1px 1px 1px black;
    padding: 2% 0px 0px 0px;
}

.form-col button {
    background: var(--main);
    color: white;
    margin: 10px 0px 0px 0px;
    padding: 3%;
    box-shadow: 1px 2px 2px black;
}

/* employee section */
#employee-card {
    display: flex;
    flex-direction: row;
    background: var(--secondary);
    text-align: center;
    justify-content: center;
}

.cards {
    margin: 1% 0 1% 0;
}

.employee {
    border: 4px solid var(--main);
    border-radius: 10px;
}

.button {
    margin-left: 2%;
}

/* footer */
footer {
    display: flex;
    height: 5vh;
    background: var(--main);
    align-items: center;
    justify-content: center;
    color: white;
    width: 100%;
}