.section-clicked {
    border: 3px dashed;
    background-color: #FFE1D1;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}

mark {
    background-color: cyan;
}

.highlight {
    background-color: #ff0
}

.help-icon {
    font-size: 14px;
    color: #007bff;
    cursor: pointer;
    margin-left: -8px;
    vertical-align: middle
}

.tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    font-size: 12px;
    display: none
}

.skills-content {
    display: none;
    padding-left: 20px
}

header {
    display: flex;
    align-items: center
}

body {
    overflow-x: hidden
}

* {
    box-sizing: border-box
}

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

div,
section {
    max-width: 100%;
    overflow-x: hidden
}

.headerParent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    overflow: hidden
}

.child {
    flex: 1;
    min-width: 0
}

.profilephoto {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 150px
}

.profilephoto img {
    max-width: 100%;
    height: auto;
    display: block
}

#resume.dark-mode {
    background-color: #40484f;
    color: #eee
}

#resume.dark-mode a {
    color: #82caff
}

#resume.dark-mode #header,
#resume.dark-mode h2.label {
    color: #eee
}

#resume.dark-mode h2.section-title {
    background-color: #40484f
}

#resume.dark-mode .main-summary {
    background-color: #000;
    color: #eee
}

#resume.dark-mode .acc-title.highlight {
    background-color: #000;
    color: #fff
}

#resume.dark-mode button {
    background-color: #40484f;
    color: #82caff
}

#resume.dark-mode .fa-file-pdf-o,
#resume.dark-mode .github,
#resume.dark-mode .linkedin,
#resume.dark-mode .stack-overflow {
    color: #fff
}

#resume.dark-mode em {
    color: #fff
}

#resume.dark-mode .acc-active .acc-title,
#resume.dark-mode .acc-title:hover {
    background-color: #000
}

#resume.dark-mode ul.keywords li.inactive {
    background-color: #000;
    color: #000
}

#resume.dark-mode ul.keywords li.active {
    background-color: #000;
    color: #fff
}

#resume.light-mode {
    background-color: #fff;
    color: #40484f
}

#resume.light-mode a {
    color: #0095ff
}

#resume.light-mode .main-summary {
    background-color: #f1f8ff
}

a,
address,
b,
blockquote,
body,
code,
div,
em,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
img,
label,
li,
mark,
object,
p,
q,
ruby,
s,
section,
span,
strong,
summary,
table,
time,
ul {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline
}

header,
section {
    display: block
}

body {
    line-height: 1
}

ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

@font-face {
    font-family: Mulish, sans-serif;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/OpenSans-Regular.woff2) format("woff2");
    font-display: swap
}

html {
    font-size: 16px
}

body {
    font-family: Mulish, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-align: left;
    -webkit-text-size-adjust: 100%
}

button {
    border: none;
    background-color: #fff
}

button.dark-mode-btn {
    position: absolute;
    z-index: 1;
    top: 20;
    right: 20
}

span#salary {
    display: none
}

button#show {
    color: silver
}

p {
    display: block;
    margin-bottom: 1.3em
}

a {
    text-decoration: none
}

a:hover {
    color: #0c65a5;
    text-decoration: underline
}

li {
    list-style-type: square;
    list-style-position: outside;
    margin-left: 1.3em
}

.highlights>li>p {
    margin-bottom: .5em
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.67rem
}

h3 {
    font-size: 1.27rem
}

blockquote {
    margin-bottom: 1em
}

strong {
    font-weight: 700
}

.tool {
    margin-left: 5px
}

#resume {
    padding: 1rem;
    margin-top: 0;
    background-color: #fff;
    position: relative;
    filter: drop-shadow(5px 5px 10px #000)
}

.section {
    margin-bottom: 1rem;
    margin-top: 2rem
}

#profiles .item {
    padding: 0
}

#header>#pdf,
#header>#profiles {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
}

#interests,
#languages,
#skills {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

#header>div {
    line-height: 1.5
}

#header>div>div {
    margin-right: 15px
}

#header h1.name {
    font-size: 2.8rem;
    font-weight: 100;
    line-height: 100%
}

#header h2.label {
    color: #202931;
    font-size: 1.47rem;
    font-weight: 300
}

#header .picture {
    width: 11em;
    float: right;
    border-radius: 4px
}

.main-summary {
    background: #f1f8ff;
    padding: 1.2em 1em;
    margin-top: 1rem
}

.main-summary p {
    margin: .15em 0 0
}

h2.section-title {
    display: inline-block;
    background: #fff;
    padding: 0 1em .3em 0;
    color: #ff6d1f;
    font-weight: 600;
    border: none;
    font-size: 1rem
}

.section>header {
    position: relative;
    margin-bottom: .5em
}

.fa {
    margin-right: .25em
}

.fa-file-pdf-o {
    color: red
}

.fa-whatsapp {
    color: #25d366
}

.section>header::after {
    position: absolute;
    left: 0;
    top: .7em;
    height: 1px;
    background: #ccc;
    content: "";
    width: 100%;
    z-index: -100;
    display: block
}

.section.main-summary>section {
    margin: 0
}

.section>section>header {
    font-size: 1.38rem;
    position: relative;
    margin-top: .7em
}

.section>section>header:first-of-type {
    margin: 0
}

.company,
.date,
.position,
.title {
    display: inline
}

.language,
.name,
.position,
.title {
    font-weight: 600
}

.company::before {
    content: "at "
}

.company {
    color: #606d76;
    font-weight: 400
}

.section header .date {
    font-size: 1rem;
    display: inline-table;
    padding: .1em 0;
    font-weight: 600
}

ul.keywords {
    margin-top: .5em
}

ul.courses li,
ul.keywords li {
    display: inline-block;
    margin: 2px 2px 2px 0;
    padding: 4px 5px 5px;
    font-size: .9rem;
    line-height: 1;
    text-transform: lowercase;
    color: #3e6d8e;
    background-color: #dfeaf1;
    border: 0 solid #dfeaf1;
    white-space: nowrap
}

ul.keywords li.inactive {
    display: none
}

ul.keywords li:hover {
    background: #dfeaf0
}

.item {
    padding: 2em 0
}

.fa.social {
    font-size: 1.1em
}

.linkedin {
    color: #007bb6
}

.youtube {
    color: #b00
}

.github {
    color: #171515
}

.stack-overflow {
    color: #828386;
    position: relative
}

.stack-overflow::after {
    position: absolute;
    left: 0;
    content: "\f16c";
    color: #f68a1f;
    overflow: hidden;
    height: 100%
}

#interests .item,
#languages .item,
#skills .item {
    width: 15em;
    padding: 0 .5em .5em 0;
    border-bottom: none
}

#skills .item {
    width: 16em
}

#skills .item .keywords {
    width: 15em
}

.level {
    margin-bottom: .5em
}

#references .item {
    padding-left: .5em;
    border-left: 5px solid #ff6d1f
}

.toggle-item {
    visibility: hidden
}

.acc-container {
    max-width: 100%;
    padding-bottom: 10px;
    padding-left: 10px
}

.acc-title {
    max-width: 100%;
    border-radius: 4px;
    font-weight: 400;
    position: relative;
    transition: all .2s ease-in-out;
    font-size: 1em;
    text-underline-position: under
}

.acc-title.highlight {
    background-color: #f9f9c5
}

.acc-title.highlight2 {
    background-color: #b2ebf2
}

.acc-title.highlight3 {
    background-color: #ffb74d
}

.acc-active .acc-title,
.acc-title:hover {
    cursor: pointer
}

.acc-title:after {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -12.5px;
    width: 25px;
    height: 25px;
    display: inline-block
}

.acc-content p {
    margin-top: 10px
}

.acc-content {
    height: auto;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all .2s ease-in-out
}

.acc-active .acc-content {
    max-height: 800px;
    overflow-y: auto;
    opacity: 1
}

.clear::after {
    content: "";
    display: table;
    clear: both
}

.display {
    display: block;
    opacity: 1 !important
}

@media screen and (min-width:1280px) {
    li {
        margin-left: 1.5em
    }

    #resume {
        width: 820px;
        margin: 2rem auto
    }

    .section>section {
        margin-left: 1.67rem
    }

    .toggle-item {
        transform: translate(-9999px)
    }

    .toggle-item+label {
        display: block;
        margin-top: -16px
    }

    .toggle-item:checked+label:after {
        content: "\f0d7"
    }

    .toggle-item+label:after {
        float: left;
        cursor: pointer;
        margin-left: -20px;
        color: #aaa;
        font-size: 16px;
        content: "\f0da";
        font-family: Fontawesome
    }

    .toggle-item~.item {
        height: 0;
        opacity: 0
    }

    .toggle-item:checked~.item {
        height: auto;
        opacity: 1;
        transition: all .5s linear
    }

    .company::before {
        content: "| "
    }

    .header-left {
        float: left;
        width: 70%;
        word-break: normal
    }

    .section header .date {
        float: right;
        padding: .2em
    }

    .display {
        display: none;
        max-width: 190px
    }

    .display:not(.none) {
        display: block
    }

    .headerParent {
        width: 100%;
        display: flex;
        flex-flow: row nowrap
    }

    .headerParent>.child {
        flex: 0 30%
    }

    .headerParent>.wider {
        flex: 70% 0
    }

    .profilephoto {
        text-align: right
    }
}

@media screen and (max-width:460px) {
    #resume {
        margin: 0 auto
    }

    #header h1.name,
    #header h2.label {
        font-size: 1rem;
        font-weight: bolder
    }

    .profilephoto {
        display: none
    }

    .display {
        max-width: 150px
    }

    #interests,
    #languages {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        -webkit-justify-content: flex-start;
        justify-content: flex-start
    }

    #interests li,
    #languages li {
        width: 100%
    }
}

@media screen and (min-width:700px) and (max-width:1280px) {
    #resume {
        margin: 0 auto
    }

    .profilephoto {
        display: none
    }

    .display {
        max-width: 180px
    }
}

@media print {

    body,
    html {
        font-size: 13px;
        line-height: 1.5;
        color: #000;
        font-family: serif
    }

    .skill-alternate {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 2px !important;
        margin-bottom: 5px;
    }

    #experience .acc-container {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px
    }

    .recent-employment {
        page-break-before: always
    }

    #languages,
    #skills,
    #interests {
        display: block
    }

    .item {
        padding: 0 0 1em 0
    }

    .main-summary {
        padding: 0
    }

    h1.name,
    h2.label {
        font-size: 1rem !important
    }

    #resume {
        margin: 0;
        padding: 0;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        line-height: 1.3;
        filter: none;
        color: #000 !important;
        text-decoration: none !important
    }

    .fa,
    .linkedIn,
    .profilephoto,
    .stackOverFlow {
        display: none !important
    }

    @page {
        margin: 1cm 1cm
    }

    ul.keywords {
        margin-top: .4em
    }

    li,
    ul.keywords {
        padding: 0
    }

    ul.keywords li {
        margin: 0;
        padding: 0;
        font-size: .8rem;
        text-transform: lowercase;
        color: #000 !important
    }

    ul.keywords li.active:not(:last-child)::after {
        padding: 0 0 0 .1rem;
        content: " ,";
    }

    ul.keywords li.active:last-child::after {
        content: "";
    }

    ul.keywords li.active {
        border: 0 !important;
        color: #000 !important
    }

    li.inactive {
        display: none !important
    }

    .acc-content {
        height: auto !important;
        overflow: hidden !important;
        max-height: 1000 !important;
        opacity: 1 !important;
        color: #000 !important;
        padding: 0 0 !important
    }

    a,
    html {
        color: #000 !important;
        text-decoration: none !important
    }

    #preference {
        page-break-before: always
    }

    .main-summary {
        font-size: 85% !important
    }

    .acc-title {
        font-size: 13px !important
    }

    .sectionSkill,
    .sectionSkill * {
        display: none !important;
    }
}