header, #popup, #scroll, #aboutme, #lebenslauf-p, #cv-request-btn, #cv-request, #cv-request-close, #cv-request-form, #cv-request-send, #print-button, #lebenslauf-close-button, #referenzen, #freizeit, #galerie, #kontakt-close-button, footer {
    display: none !important;
    width: 100%;
}

@page {
    size: A4 portrait;
}
@page :left {
    margin-left: 1cm;
}
@page :right {
    margin-left: 1cm;
}



/* Written and designed by Yves Daetwyler */

/********** Basic **********/

/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

/* Typography */

h1 {
    text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	/* line-height: 2; */
	color: black;
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    letter-spacing: 4px;
    opacity: .8;
    max-width: 100%;
    margin: 0 auto;
    white-space: nowrap;
}

.title h2 {
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 400;
    font-size: 1.35rem;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
    page-break-after: avoid;
}

.white-title {
    max-width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

h3 {
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    margin: 30px auto 0 auto;
    max-width: 95%;
    text-align: center;
}

p {
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    padding-top: 15px;
    text-align: center;
    max-width: 90%;
    line-height: 140%;
    opacity: .9;
}

.white-welcome p {
    width: 100%;
    max-width: 600px;
    text-align: block;
}

.li-main b {
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
}

.curriculum-ul li {
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 400;
    font-size: .95rem;
    text-align: left;
}

.curriculum-ul li small {
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-align: left;
    margin-right: 10px;
}

.curriculum-ul span {
    font-weight: 400;
    font-size: .9rem;
    text-align: left;
    padding-bottom: 5px;
}

.curriculum-ul em {
    font-style: italic;
    font-size: .8rem;
    margin-left: 5px;
}

.curriculum-ul p {
    font-family: 'Trebouchet MS', sans-serif;
    font-weight: 300;
    font-size: .9rem;
    text-align: block;
    padding-left: 35px;
    opacity: .8;
    width: 80%;
    max-width: 800px;
    margin-top: -30px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.contact-icons span {
    font-family: Arial;
    font-weight: 300;
    font-size: .8rem;
    white-space: nowrap;
    width: 99%;
    margin: 20px auto 0 auto;
    text-align: center;
}

/* Font smoothing */

body {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Welcome */

#welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95%;
}

/* main flex container and bg-color */

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 0 auto;
}

#start-spacer {
    margin-top: 5px;
}


.white-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.white {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
    background-color: white;
    color: black;
    padding-top: 0;
}

.link {
    color: black;
}

/* welcome */

#figure-portrait {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#portrait {
    border-radius: 180px;
    width: 75%;
    max-width: 210px;
    height: auto;
    margin: 0 auto;
}

h1 {
    border-bottom: 1px solid black;
    padding: 0 15px;
    max-width: 95%;
}



/* Sections and Articles */

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 45px auto 0 auto;
    padding: 8px 0;
}

article {
    display: flex;
    flex-direction: column;
    align-items: center;
    column-width: 17em;
    column-gap: 3em;
}

.title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* hidden divs */

#lebenslauf {
    width: 100%;
    max-width: 250px;
}

#kontakt {
    width: 100%;
    max-width: 250px;
    margin-bottom: 80px;
}

#kontakt-hidden {
    display: flex;
    flex-direction: column;
}

/* Lebenslauf */

.curriculum-ul {
    list-style-position: outside;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 10px;
}

.curriculum-ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    page-break-inside: avoid;
}

.li-main {
    margin-top: 10px;
}

.curriculum-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    page-break-inside: avoid;
}

.curriculum-inner-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    margin-bottom: 5px;
    page-break-inside: avoid;
}

.diamond {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: rgb(102, 153, 153);
    position: relative;
    top: -20px;
    margin-right: 10px;
}
.diamond:after {
    content: '';
    position: absolute;
    left: -20px;
    top: 20px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: rgb(102, 153, 153);
}

.circle {
    width: 20px;
    height: 20px;
    margin: 15px 20px 15px 10px;
    background: rgb(179, 204, 204);
    border-radius: 50%;
}

.triangle-right-cv {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-left: 18px solid rgb(255, 144, 40);
    border-bottom: 9px solid transparent;
    margin: 15px 18px 15px 15px;
}

#codecademy-icon {
    width: 120px;
}

/* Kontakt */

.contact-container {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
}

.contact-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    margin: 30px;
}

#mail-icon {
    width: 60px;
}

#linkedin-icon {
    width: 75px;
}

#phone-icon {
    width: 45px;
}