/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-condensed-300 - latin */
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'),
    url('../fonts/OpenSansCondensed-Light.ttf') format('truetype');
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-style: normal;
    text-align: center;
    margin: 0.25rem;
    font-size: 2rem;
    text-shadow: 0 0.4rem 0.3rem #aaa;
}

/* 32px @ 300px increasing to 64px @ 600px */
@media (min-width: 300px) {
    h1 {
        font-size: calc(2rem + ((1vw - 3px) * 10.6667));
        /* Where: * 10.6667 = 100 * font_Size_Difference / viewport_Width_Difference */
    }
}
/* Prevent font scaling beyond this breakpoint */
@media (min-width: 600px) {
    h1 {
        font-size: 4rem;
    }
}

h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-style: normal;
    text-align: center;
    margin: 0.75rem;
    font-size: 1.25rem;
}

/* 1.5rem @ 300px increasing to 2rem @ 600px */
@media (min-width: 300px) {
    h2 {
        font-size: calc(1.25rem + ((1vw - 3px) * 4));
        /* Where: * 4 = 100 * font_Size_Difference / viewport_Width_Difference */
    }
}
/* Prevent font scaling beyond this breakpoint */
@media (min-width: 600px) {
    h2 {
        font-size: 2rem;
    }
}

h3 {
    text-align: center;
    font-size: 0.8rem;
    margin: 0;
}

.main-column-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-column {
    max-width: 800px;
    border: 2px solid black;
    border-radius: 3rem;
    padding: 2rem;
    margin: 2rem;
    box-shadow: 0 1rem 0.5rem -0.5rem #777;
}

@media (min-width: 550px) {
    .main-column {
        padding: 4rem 4rem 2rem;
    }
}

.skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.skill {
    background-color: lightgray;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding: 0.1rem 1rem;
    margin: 0.3rem;
    box-shadow: 0 0.2rem 0.1rem -0.1rem #777;
    display: flex;
    flex: 0 0 auto;
}

.skillIcon {
    min-width: 64px;
    height: 64px;
    margin: 0.3rem;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.lastSkills {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.separator {
    width: 100%;
    height: 2px;
    border: 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.contact-possibilities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-possibility {
    margin: 0 0.3rem;
    text-align: center;
}

.impressum-container {
    font-size: 0.8rem;
    margin: 1.25rem 0 0 0;
}

.impressum {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.impressum__entry {
    margin: 0.1rem 0.3rem;
    text-align: center;
}

.email-icon-a {
    color: black;
}

.email-icon {
    font-size: 40px;
}