style.css

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Assistant';
    font-weight: 600;
    color: #DEDFE0;
    height: 100%;
    background-color: #14161C;
}

.top-bar {
    background-color: #313A43;
    height: 6rem;
}

.my-name {
    font-size: 50px;
    font-family: 'Oswald';
    font-weight: 500;
    color: #AEB6BC;
}

.career-title {
    font-family: 'Catamaran';
    font-weight: 400;
    font-size: 12px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: -.6rem;
    color: #AEB6BC;
}

.headshot {
    width: 102px;
    /* background-color: #10b1dd; */
    background: linear-gradient(to top left, #1FACDB, rgba(33, 175, 220, 0), #35D1EB), linear-gradient(to top right, #21B5DD, #28C5E0) rgba(37, 188, 224, 1);
    border: 1px solid #32d3ff;
    display: flex;
}

.headshot img {
    max-width: 100%;
    height: auto;
}

.dark-input-box {
    background-color: #14161c;
    border-radius: 4px;
    padding: .5rem;
}

.top-bar-right-section {
    font-size: 17px;
}

.top-bar-right-section div {
    background-color: #566069;
}

.space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.master-assistant-button {
    padding-left: .7rem;
    padding-top: calc(0.5rem - 2px);
    padding-bottom: calc(0.5rem - 2px);
    padding-right: 0.5rem;
    border: 2px solid #DEDFE0;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

.presets-button {
    padding: 0.5rem;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

.clock-n-gear {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    /* padding: 0.5rem; */
    /* border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem; */
    border-radius: 1.5rem;
}

.izotope-logo {
    filter: brightness(50%);
}

.resume-body {
    display: flex;
    flex-flow: column;
    height: 100%;
    /* width: 99rem; */
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    /* margin-top: 2px; */ /* Causing vertical scroll-bar */
    /* hacked in a 2px line (.hack-fix-me) */
    color: #80888F;
    background-color: #313A43;
}

.everything-else {
    height: calc(100vh - 6rem);
}

/*
 * would be great if I could figure out how to fix this properly
 * I think it's related to the calc(100vh - 6rem) from .everything-else
 */
.hack-fix-me {
    border: 1px solid #14161C;
}

.sb-col-container {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    padding: 1rem;
    /* height: 100%; */
    justify-content: space-between;
}

.sb-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* flex: 1 1 auto; */
    width: 100%;
}

.sb-links {
    /* padding: 0 0 1rem 1rem; */
    font-size: 20px;
    display: flex;
}

.sb-link {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    /* background-color: #566069; */
    color: #DEDFE0;

}

.sb-link img {
    width: 1.5rem;
}

.sb-link a {
    outline: none;
    text-decoration: none;
    display: flex;
    color: #DEDFE0;
}

.sb-link a:visited {
    text-decoration: none;
    color: #DEDFE0;
}

.sb-link-label {
    display: flex;
    align-items: center;
    padding-left: .75rem;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    font-weight: 400;
}

.jc-center {
    justify-content: center;
}

.no-piracy-container > .skull {
    width: 1em;
    margin-right: -1.75em;
    margin-bottom: -2.5em;
}

.no-piracy-container > .ban {
    width: 2em;
    margin-bottom: -3em;
}

.sidebar-heading {
    font-family: 'Catamaran';
    font-weight: 400;
    /* text-decoration: underline;
    text-underline-offset: 3px; */
    text-transform: uppercase;
    /* margin-bottom: .75em; */
}

.sb-separator {
    border-bottom: 1px solid #80888F;
}

.sb-entry {
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
}

.sb-entry > img {
    width: 1.5rem;
    margin-right: .5rem;
}

.sb-entries {
    /* display: inline-block; */
    /* flex-direction: column; */
    /* border-top: 1px solid #80888F; */
    padding-top: .5rem;
}

.college-skills {
    display: flex;
    flex-direction: row;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .5em;
    font-weight: 400;
}

.college-skill {
    /* color: #AEB6BC; */
    color: #80888F;
    width: 19rem;
    background: linear-gradient(to top left, #272D36, #313A43), linear-gradient(to top right, #2F363F, #293038) rgba(44, 51, 59, 1);
    padding: .5em .75em;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
}

.college-skill-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.college-skill-title {
    display: flex;
    justify-content: space-around;
}

.college-skill-icon {
    display: flex;
    justify-content: space-around;
    margin: .5em 0;
}

.college-skill-icon-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grip {
    display: flex;
    justify-content: center;
}

.grip > img {
    width: 1em;
}

.add-college-skill {
    /* flex: 1 1 auto; */
    width: 19rem;
    border-radius: 2px;
    border: dashed #566069 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.college-skill.active {
    border: solid #22AEDF 1px;
    color: #22AEDF;
}

.grey-text {
    color: #80888F;
}

.college-skill-r-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.v-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rotate-90 {
    transform: rotate(90deg);
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-fill {
    flex: 1 1 auto;
}

.align-baseline {
    align-items: baseline;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.ml-p5 {
    margin-left: .5rem;
}

.mb-p5 {
    margin-bottom: .5rem;
}

.mt-1 {
    margin-top: 1rem;
}

.pr-1 {
    padding-right: 1rem;
}

.mt-p25 {
    margin-top: .25rem;
}

.dark-bg {
    background-color: #14161C;
}

.v-progress-container {
    height: 100%;
    width: 3px;
    background-color: #5C676C;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.v-progress-container > div {
    background-color: #B5BCC3;
    width: 100%;
}

/* #B5BCC3 */

.right-align-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.work-experience-divider {
    margin-top: .75rem;
    border-top: 2px solid #2E373D;
    border-bottom: 2px solid #2E373D;
    height: 2rem;
    display: flex;
    justify-content: flex-end;
}

.work-experience {
    display: flex;
    flex-direction: column;
    color: #80888F;
    font-weight: 400;
    height: 100%;
    /* justify-content: stretch; */
}

.job-separator {
    border-right: 2px solid #2E373D;
}

.job-col {
    padding: .5rem 1rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.job .company-container {
    font-size: 25px;
    font-family: 'Catamaran';

    padding-top: 2px;
    padding-bottom: 2px;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    background: linear-gradient(to right, #14161C, #2e373d73);
}

.job .company {
    padding-right: 1rem;
    margin-right: 1px;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    background-color: #14161C;
    /* background: linear-gradient(to right, #14161C, #111318); */
}

.job-row {
    display: flex;
    justify-content: space-between;
}

ul {
    margin: 0;
    padding-left: 1.5em;
    text-align: justify;
}

ul > li {
    margin: .25em 0;
}

.hz-dots {
    flex: 1 1 auto;
    border-bottom: 2px dotted #2E373D;
    margin: 0 .5em;
}

.refresh-button-container {
    border-left: 2px solid #2E373D;
    display: flex;
    align-items: center;
    padding-left: .5rem;
    padding-right: .25rem;
}

.refresh-button-container > img {
    transform: scaleX(-1) rotate(120deg);
}

/* #F8F9F9 */