@font-face {
    font-family: "Gotham Bold";
    src: url(fonts/Gotham-Bold.otf);
}

@font-face {
    font-family: "Gotham Book";
    src: url(fonts/GothamBook.ttf);
}

@font-face {
    font-family: "Gotham Medium";
    src: url(fonts/GothamMedium.ttf);
}

body {
    height: 100vh;
    box-sizing: border-box;
    margin: 0 20%;
    max-width: 950px;
    margin: 0 auto;
}

h1,
h2,
h3 {
    font-family: "Gotham Bold", Arial, Helvetica, sans-serif;
}

h1,
h2 {
    text-transform: uppercase;
}

p {
    font-family: "Gotham Book", Arial, Helvetica, sans-serif;
    font-size: large;
    margin: 0;
    padding: 0;
    line-height: 1.4em;
}

a {
    text-decoration: none;
    color: black;
}

.mainBlock {
    padding: 25px 25px;
}

.mainBlock:last-child {
    padding: 0 25px 25px 25px;
}

h1 {
    font-size: xx-large;
    margin: 0;
    margin-bottom: 10px;
}

h2 {
    margin: 0 0 15px 0;
    font-size: large;
}

h3 {
    margin: 10px 0;
}

#main-nav__picture {
    pointer-events: none;
}

.download-section {
    display: flex;
    justify-content: center;
}

.horizontalDivider {
    border-width: 10px;
    border-top-style: dotted;
    border-color: #dec706;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 30%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.verticalDivider {
    border-width: 10px;
    border-left-style: dotted;
    border-color: #dec706;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    margin-left: 1%;
}

.yellowTitle {
    background-color: #dec706;
    padding: 5px 15px;
    display: inline-block;
}

.listContainer {
    display: flex;
}

.list {
    padding-left: 1em;
    padding-bottom: 0.5em;
}

.list h3:first-child {
    margin-top: 0;
}

.darken {
    filter: invert(7%) sepia(9%) saturate(167%) hue-rotate(314deg) brightness(94%) contrast(85%);
}

.greyed {
    filter: grayscale(100%);
}

.blacked {
    filter: invert(7%) sepia(9%) saturate(100%) hue-rotate(314deg) brightness(30%) contrast(85%);
}

.disclaimer {
    font-family: "Gotham Book", Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: small;
    text-align: center;
    color: #d3d3d3;
}

/* Header ------------------------------------------------ */

#headerContainer {
    display: flex;
    background-image: linear-gradient(to right, rgb(255, 255, 255) 20%, 70%, rgba(255, 255, 255, 0) 90%), url(../img/work-pic.jpg);
    background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right;
}

#headerLeft {
    flex: 0 1 70%;
}

#jobTitle {
    font-family: "Gotham Book", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: x-large;
    margin-bottom: 15px;
}

/* #headerIntro {
    border-width: 10px;
    border-top-style: dotted;
    border-color: #dec706;
} */

#headerIntro p {
    margin: 15px 0;
}

#headerContact {
    display: flex;
    flex-direction: column;
    justify-content: end;
    flex: 0 1 30%;
}

#headerContact div {
    display: flex;
    align-items: center;
    padding-left: 10%;
}

.contactIcon {
    display: block;
    height: 30px;
    margin: 5px 10px;
}

/* Skills ---------------------------------------- */

#skillsContainer {
    background-color: #ebe8e8;
    display: flex;
}

#skillsLeft {
    flex: 0 1 65%;
    padding-right: 1em;

}

#skillsRight {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 2em;
}

#languageContainer,
#toolsContainer {
    margin-bottom: 15px;
}

#languageContainer h2 {
    margin-top: 0;
}

#skillsRight p {
    line-height: 1.4em;
}

.languageIcon {
    font-family: "Gotham Bold", Arial, Helvetica, sans-serif;
    font-size: smaller;
    margin-right: 15px;
    filter: invert(7%) sepia(9%) saturate(167%) hue-rotate(314deg) brightness(94%) contrast(85%);
}

.toolsContainer {
    display: flex;
    flex-direction: column;
}

.toolsContainer div {
    display: flex;
    align-items: center;
}

.toolsContainer img {
    height: 20px;
    margin-right: 15px;
}

.toolsContainer p {
    display: inline;
}

/* Experience ----------------------------------------------- */

.date {
    font-family: "Gotham Book", Arial, Helvetica, sans-serif;
    font-weight: 500;
}

/* Training --------------------------------------------------- */

.specialInfo {
    display: inline-block;
    margin: 0 0 1em 0.5em;
}

.specialInfo img {
    height: 25px;
    vertical-align: middle;
}

.specialInfo p {
    display: inline;
    vertical-align: middle;
}

/* Media queries ------------------------------------------------- */

@media screen and (max-width: 1200px) {
    body {
        margin: 0 10%;
    }

    #headerContainer {
        background-size: cover;
    }

    #headerLeft {
        flex: 0 1 60%;
    }

    #skillsContainer {
        flex-wrap: wrap;
    }

    #skillsLeft {
        flex: 0 0 100%;
    }

    #skillsRight {
        flex: 0 0 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        border-width: 10px;
        border-left-style: dotted;
        border-color: #d3d3d3;
        margin-top: 1em;
        margin-left: 1%;
        padding-left: 1em;
    }

    .toolsContainer {
        margin-right: 25px;
    }
}

@media screen and (max-width: 900px) {
    body {
        margin: 0 5%;
    }

    #headerContainer {
        flex-wrap: wrap;
    }

    #headerLeft {
        flex: 0 1 100%;
    }

    #headerContact div {
        padding-left: 0;
    }
}