/* CTRL + F5 to Update CSS!!!!! */

/* Entferne alle margins und paddings und zähle diese, zur gesamten Grösse */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Setze das Scrollverhalten auf Smooth, damit beim Betätigen von Links
die Seite zum Ziel scrollt und nicht dort hin springt. */
html {
    scroll-behavior: smooth;
}
/* Schriftart für die gesamte Seite */
body {
    font-family: Consolas, monospace;
}

/* Styles für die Navigation */
.navigation {
    display: flex;
    align-items: center;
    background-color: #000;
    /* position: -webkit-sticky; */
    position: sticky;
    top: 0;
    z-index: 999;
    font-size: 14pt;
    border-bottom: #0f0 solid 0.15em;
    border-bottom: #0a0 solid 0.15em;
}
/* Light style für die Navigation */
body.light .navigation {
    background-color: #fff;
}
/* Styles für die einzelnen Knöpfe */
.nav_btn {
    padding: 0.5em;
    text-align: center;
}
a.nav_btn {
    float: left;
    color: #080;
    text-decoration: none;
    transition: 500ms;
}
/* Styles für das Logo */
.nav-svg {
    width: 10%;
    text-align: left;
}
img {
    width: 16pt;
    height: 16pt;
}

a.nav_btn:hover:not(.nav-svg) {
    background-color: #080;
    color: #000;
    text-decoration: underline;
}
i.nav_btn {
    cursor: pointer;
    color: #fff;
}
.nav_right {
    float: right;
    margin-left: auto;
}
/* Light Style für den Light-Mode Knopf */
body.light i.nav_btn {
    color: #000;
}
/* Styles für das Dropdownmenü */
#Dropdown {
    display: none;
}
/* Media Queries damit das Dropdown-Menü funktioniert */
@media screen and (max-width: 950px) {
    .navigation a:not(:first-child) {
        display: none;
    }
    #Dropdown {
        display: block;
        float: left;
    }
    .navigation.dropdown {
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .navigation.dropdown #Dropdown {
        position: absolute;
        right: 0;
        top: 0;
    }
    .navigation.dropdown .nav_btn {
        float: none;
        display: block;
        text-align: left;
    }
}
/* Styles für die Container, welche die einzelenen Abschnitte beinhalten */
.Container {
    min-height: 100vh;
    border-bottom: #080 solid 0.25em;
}
.Container h1 {
    padding: 50vh 50px;
    align-self: center;
    color: #fff;
}
.Content {
    padding: 2em 20em;
    color: #fff;
    text-align: justify;
    background-color: #303541;
}
.Content p {
    padding: 0.5em 0;
}
/* Light style für den Content */
body.light .Content {
    color: #000;
    background-color: #fff;
}
/* Passe den Content an die Bildschirmgrösse an */
@media screen and (max-width: 1500px) {
    .Content {
        padding: 2em 15em;
    }
}
@media screen and (max-width: 1100px) {
    .Content {
        padding: 2em 10em;
    }
}
@media screen and (max-width: 950px) {
    .Content {
        padding: 2em 5em;
    }
}
@media screen and (max-width: 600px) {
    .Content {
        padding: 2em 2.5em;
        font-size: 10pt;
        text-align: left;
    }
}
/* Style für die Startseite */
#Video_Header {
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    position: fixed;
}
.Container#home {
    position: relative;
}
.Header_Content {
    text-align: center;
    padding: 50vh 5em;
}
#home h1 {
    color: #fff;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 5px;
}
/* Styles für die "Über Mich" Seite */
#ueber_mich h1 {
    background: url(images/Portrait\ 1920x1080.png) no-repeat center fixed;
    background-size: cover;
}
/* Lade ein kleineres Bild für mobile Bildschirme */
@media screen and (max-width: 800px) {
    #ueber_mich h1 {
        background: url(images/Portrait\ 800x1080.png) no-repeat center fixed;
        background-size: cover;
    }
}
/* Hintergrund für die Hobbys Überschrift */
#hobbys h1 {
    background: url(images/Coding\ 1920x1200.jpg) no-repeat center fixed;
    background-size: cover;
}
/* Hintergrund für die Skills Überschrift */
#skills h1 {
    background: url(images/Background\ Skills\ 1920x1080.png) no-repeat center fixed;
    background-size: cover;
}
/* Lade kleinere Bilder für kleinere Bildschirme */
@media screen and (max-width: 1200px) {
    #skills h1 {
        background: url(images/Background\ Skills\ 1200x1080.png) no-repeat center fixed;
        background-size: cover;
    }
}
@media screen and (max-width: 800px) {
    #skills h1 {
        background: url(images/Background\ Skills\ 800x1080.png) no-repeat center fixed;
        background-size: cover;
    }
}
/* Styles für den Content, der Skills */
#skills {
    margin-left: auto;
    margin-right: auto;
}
#skills h2,
#skills i {
    margin-bottom: 1em;
}
#skills i {
    margin-right: 0.5em;
}
#skills h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
/* Styles für die Leisten */
.bar_out {
    border: 1pt solid #000;
    border-radius: 5pt;
    background-color: #aaa;
    width: 85%;
    margin-bottom: 1em;
}
.bar {
    border-radius: 5pt;
    color: #fff;
    text-align: right;
    padding: 10pt;
    font-weight: bold;
}
/* Färbung für die individuellen Leisten */
.Word {
    background-color: #35f;
}
.Excel {
    background-color: #282;
}
.PowerPoint {
    background-color: #e50;
}
.Outlook {
    background-color: #16f;
}
.HTML {
    background-color: #f60;
}
.CSS {
    background-color: #26f;
}
.Javascript {
    background-color: #cc0;
}
.Python {
    background-color: #05a;
}
.InDesign {
    background-color: #c04;
}
.Illustrator {
    background-color: #d80;
}
.Photoshop {
    background-color: #07f;
}
.Social_Media {
    background-color: #a0f;
}
/* Styles für die Icons, bei den Sprachen, welche wie Sterne agieren */
.check {
    color: #0f0;
}
body.light .check {
    color: #0a0;
}
.uncheck {
    color: #fff;
}
body.light .uncheck {
    color: #000;
}
/* Hintergrund für die Überschrift, des Bildungsweges */
#bildungsweg {
    background: url(images/AI-Path\ 1920x1080\ dark.jpg) no-repeat center fixed;
    background-size: cover;
}
/* Hintergrund für die Überschrift, der Berufserfahrung */
#berufserfahrung {
    background: url(images/Computer\ 1920\ x\ 1280.jpg) no-repeat center fixed;
    background-size: cover;
}
/* Styles für die Timelines, welche bei dem Bildungsweg
und der Berufserfahrung eingesetzt werden */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.timeline::after {
    content: "";
    position: absolute;
    width: 6px;
    background-color: #000;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}
.tl-container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}
.tl-container::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: #000;
    border: 4px solid #0f0;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}
body.light .tl-container::after {
    border-color: #080;
}
.tl-left {
    left: 0;
}
.tl-right {
    left: 50%;
}
.tl-left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid #0f0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #0f0;
}
body.light .tl-left::before {
    border-color: transparent transparent transparent #080;
}
.tl-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid #0f0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #0f0 transparent transparent;
}
body.light .tl-right::before {
    border-color: transparent #080 transparent transparent;
}
.tl-right::after {
    left: -16px;
}
.tl-content {
    padding: 20px 30px;
    background-color: #000;
    position: relative;
    border-radius: 6px;
}
body.light .tl-content {
    background-color: #fff;
    border: #000 solid 3pt;
}
/* Media Queries damit der Content der Timeline auf mobilen Bildschirmen
rechts angezeigt wird */
@media screen and (max-width: 900px) {
    .timeline::after {
        left: 31px;
    }
    .tl-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    .tl-container::before {
        left: 60px;
        border: medium solid #0f0;
        border-width: 10px 10px 10px 0;
        border-color: transparent #0f0 transparent transparent;
    }
    body.light .tl-container::before {
        border-color: transparent #080 transparent transparent;
    }
    .tl-left::after,
    .tl-right::after {
        left: 15px;
    }
    .tl-right {
        left: 0%;
    }
    .tl-content h2 {
        padding: 0.5em 0;
    }
    .tl-content p {
        text-align: left;
    }
}
/* Media Queries um die Schriftgrösse, der Bildschirmgrösse anzupassen */
@media screen and (max-width: 1400px) {
    .tl-content h2 {
        font-size: 16pt;
    }
}
@media screen and (max-width: 1300px) {
    .tl-content h2 {
        font-size: 14pt;
    }
}
@media screen and (max-width: 800px) {
    .tl-content h2 {
        font-size: 12pt;
    }
}
@media screen and (max-width: 800px) {
    .tl-content h2 {
        font-size: 9pt;
    }
    .tl-content p {
        font-size: 8pt;
    }
}
/* Styles für die Fusszeile (Kontakt & Diverses) */
#kontakt {
    display: flex;
    width: 100%;
}
body.light #kontakt .Content {
    background-color: #aaa;
}
#kontakt .Content {
    width: 50%;
    text-align: center;
    display: block;
    white-space: nowrap;
    background-color: #000;
    /* Linke und Rechte Paddings werden auf 0 gesetzt,
    da der Text Zentriert ist, damit dieser auch korrekt angezeigt wird */
    padding: 2em 0;
}
#kontakt h1 {
    margin-bottom: 1em;
}
#kontakt h2 {
    font-size: 16pt;
    margin-bottom: 0.5em;
}
#kontakt i {
    margin-right: 0.5em;
}
#kontakt a,
#kontakt p {
    position: static;
    margin-bottom: 0.5em;
}
#kontakt a {
    color: #080;
    margin-left: auto;
    margin-right: auto;
}
/* Staple die beiden Content-Blöcke aufeinander,
wenn der Bildschirm kleiner als 800px ist */
@media screen and (max-width: 800px) {
    #kontakt {
        display: block;
    }
    #kontakt .Content {
        width: 100%;
    }
    .Content #credits {
        text-align: center;
        margin: 0;
        margin-top: 2em;
    }
}
#credits {
    font-size: 8pt;
    text-align: right;
    margin-right: 2em;
    margin-top: 3em;
}