body {
    margin: 0 10%;
    font-family: var(--body-font-family);
    --dark-blue: #003d5e;
    --light-blue: #1FBDC7;
    --dark-teal: #15706d;
    --orange: #f48f00;
    --pink: #e100d9;
    --mint: #53BF8F;
    --yellow: #F5D35D;
    --sand: #ECCC98;
    --light-red: #ec4b54;
    --body-font-family: DM Sans;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.content {
    background-color: #000;
    color: orange;
}

.container {
    border: 2px solid #000;
    border-radius: 25px;
    margin: 30px auto;
    overflow: hidden;
    background-color: #ddd;
    box-shadow: 10px 10px 5px gray;
    --dark-blue: #003d5e;
    --orange: #f48f00;
}

/* h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 3em;
} */

h2 {
    font-family: Palatino, 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 2em;
}

.bold {
    font-weight: 700;
}

.italic {
    font-style: italic;
}

.regular {
    font-style: normal;
}

.underline {
    text-decoration: underline;
}

.font-panel {
    width: 45%;
    display: inline-block;
}

.font-label {
    font-size: 20px;
    text-decoration: underline;
}

.color-panel {
    display: inline-block;
    width: 20%;
    text-align: center;
    margin: 20px auto;
    min-height: 100px;
}

.color-container {
    display: inline-flex;
    width: 100%;
}

.grey-bg {
    background-color: #ddd;
}

.grey-box {
    border: 1px solid #000;
    background-color: #ddd;
}

.white-text {
    color: #fff;
}

.white-box {
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
}

.black-text {
    color: #000;
}

.black-bg {
    background-color: #000;
}

.black-box {
    border: 1px solid #fff;
    background-color: #000;
    color: #fff;
}

.green {
    border: 1px solid #000;
    background-color: #02c91b;
}

.dark-green-bg {
    background-color: #008612;
}

.dark-green-box {
    border: 1px solid #000;
    background-color: #008612;
    color: #fff;
}

.light-blue-bg {
    background-color: #02b0c9;
    color: #fff;
}

.light-blue-box {
    border: 1px solid #000;
    background-color: #02b0c9;
}

.light-blue-text {
    color: #02b0c9;
}


.dark-blue-bg {
    background-color: var(--dark-blue);
}

.dark-blue-text {
    color: var(--dark-blue);
}

.dark-blue-box {
    border: 1px solid #000;
    background: var(--dark-blue);
    color: #fff;
}

.dark-teal-bg {
    background-color: #007889;
    color: #fff;
}

.dark-teal-box {
    border: 1px solid #000;
    background-color: #007889;
    color: #fff;
}

.dark-teal-text {
    color: #007889;
}

.pink {
    border: 1px solid #000;
    background-color: var(--pink);
}

.dark-pink-bg {
    background-color: #50004d;
    color: #fff;
}

.dark-pink-box {
    border: 1px solid #000;
    background-color: #50004d;
    color: #fff;
}

.dark-pink-text {
    color: #50004d;
}

.orange-text {
    color: var(--orange);
}

.orange-bg {
    background-color: var(--orange);
    color: #fff;
}

.orange-box {
    border: 1px solid #000;
    background-color: var(--orange);
    color: #fff;
}

/* name */

.name {
    font-size: 4em;
}

.first-name {
    font-weight: 800;
}

.last-name {
    font-weight: 50;
}

.text-shadow {
    text-shadow: 2px 2px #000;
}

.tagline {
    padding: .25rem !important;
    font-size: 1rem;
    /* font-style: italic; */
    border-bottom: 2px solid var(--dark-blue);
}

.badge-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

._badge {
    font-size: 1em;
    font-style: italic;
    font-weight: 500;
    border: 1px solid var(--orange);
    border-radius: 15px;
    padding: 10px;
    background-color: #fff;
    color: var(--dark-blue);
    max-width: 300px;
    display: inline;
    box-shadow: 3px 3px 3px var(--orange);
}

._badge > i, li i {
    color: var(--mint);
    padding-right: 10px;
}

a._badge {
    text-decoration: none;
}

.progress {
    box-shadow: 3px 3px 3px #666;
}

.section-title-left {
    font-weight: 500;
    font-size: 2em;
    margin-top: 20px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--orange);
}

.section-title-right {
    font-weight: 500;
    font-size: 2em;
    margin-top: 20px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--dark-blue);
}

.section-title-orange {
    font-weight: 500;
    color: var(--orange);
    font-size: 2.5rem !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px #000;
}

.section-title-dark-blue {
    font-weight: 500;
    color: var(--dark-blue);
    font-size: 2rem !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px var(--orange);
}

.text-left {
    color: #fff;
}

/* contact list */

.headshot {
    display: block;
    height: 10rem;
    width: 10rem;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 5px 5px 5px gray;
}

.list {
    text-align: left;
    list-style: none;
    color: var(--sand);
}

.list a {
    color: var(--sand);
}

.list-skills li {
    margin-top: 10px;
    text-transform: uppercase;
}

.left {
    overflow: hidden;
    color: #fff;
}

.left a, .left a:visited, .left a:hover {
    color: #fff;
}

/* text styling */

.skill-bar {
    background-color: var(--orange) !important;
}

.contact-list {
    display: flex;
    justify-content: space-around;
}

.contact-list i {
    color: var(--mint);
}

/* Roles */

.role, .education {
    color: var(--mint);
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.role-info, .education-info {
    font-weight: 600;
}

.role-title, .education-concentration {
    color: var(--orange);
    margin-bottom: .25rem;
}

.role-company, .education-location {
    font-style: italic;
    margin-bottom: .25rem;
}

.role-info, .education-info {
    list-style: none;
    text-align: left;
    padding-left: 0;
}

.company-desc {
    color: var(--sand);
}

.role-duties, .education-points {
    text-align: left;
    list-style: none;
    color: var(--sand);
}

.about {
    color: var(--sand);
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.mini-bio {
    color: var(--sand);
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.mini-bio li:not(:last-child):after {
    content: ' \00b7';
    display: inline-flex;
    margin: 0 0.375rem;
}

.list-inline-item:not(:last-child) {
    margin-right: 0 !important;
}

.location {
    color: var(--mint);
}

.pt-10 {
    padding-top: 5rem !important
}

.btn-contact {
    background-color: var(--mint) !important;
    color: var(--dark-blue) !important;
    border-radius: 15px !important;
    /* border: solid 2px #000; */
    box-shadow: 5px 5px 5px gray;
    padding: 1rem !important;
    width: 150px;
    font-weight: 800;
}