:root {
    --dark-section: #111D27;
    --nav-btn-light: #326598;
    --nav-btn-strong: #112726;
    --nav-btn-font: #a5c5e6;
    --nav-btn-font-selected: #38958C;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.agency {
    font-family: 'Agency FB', sans-serif;
}

.twCen {
    font-family: 'Tw Cen MT Std', sans-serif;
}

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

#container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 150px auto 80px;
    grid-template-areas:
        'header nav nav'
        'main main main'
        'footer footer footer';
    height: 100%;
}

/*Flexboxes--------------------------------------------------------------*/

header,
main,
nav,
footer,
.flexbox,
a {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
/*---------------------------------------------------------------------*/

header {
    grid-area: header;
    background-color: var(--dark-section);
}

nav {
    grid-area: nav;
    background-color: var(--dark-section);
    justify-content: space-evenly;
    flex-wrap: wrap;
}

main {
    grid-area: main;
    background-image: url(../Images/background_main.png);
}

footer {
    grid-area: footer;
    background-color: var(--dark-section);
}

/*Header---------------------------------------------------------------*/
#logo-container {
    height: 100%;
    width: 100%;
}

#logoDiv {
    height: 100%;
    width: 25%;
    padding-left: 30px;
}

#logo {
    height: 150px;
    width: 250px;
}

#navDiv {
    height: 100%;
    width: 75%;
    justify-content: space-evenly;
}

/*Nav-------------------------------------------------------------------*/

.nav-btn {
    height: 50px;
    margin: 15px;
    margin-bottom: 25px;
    width: 120px;
    font-size: 16px;
    color: var(--nav-btn-font);
    border: solid #404C5D 1px;
    border-radius: 5px;
    background: var(--dark-section);
    box-shadow: 0px 0px 20px 5px var(--nav-btn-light);
    transition: 0.5s;
    --btn-animation-duration: 1.5s;
    text-align: center;
}

.nav-btn:hover {
    box-shadow: 0px 0px 15px 1px var(--nav-btn-light);
}

.nav-btn:active {
    box-shadow: 0px 0px 20px 10px var(--nav-btn-light);
}

.nav-btn-selected{
    color: var(--nav-btn-font-selected);
}

#cv-btn::after{
    content: "Lebenslauf";
}

#cv-btn:hover::after{
    animation: loadingCV linear both 1.5s;
    color:var(--nav-btn-font-selected);
}

@keyframes loadingCV {
    0% {
        content: "¿/*#¦-±}$°";
    }

    10% {
        content: "L@}-?/*#¦ç";
    }

    20% {
        content: "Le?{,^!4@%";
    }

    30% {
        content: "Leb\;1}]f[4";
    }

    40% {
        content: "Lebe'1_0<}";
    }

    50% {
        content: "Leben=.,^!";
    }

    60% {
        content: "Lebens@}-?";
        right: 0;
    }

    70% {
        content: "Lebensl#{+";
        right: 0;
    }

    80% {
        content: "Lebensla@/";
    }

    90% {
        content: "Lebenslau*";
    }

    100% {
        content: "Lebenslauf";
    }
}

#portfolio-btn::after{
    content: "Portfolios";
}

#portfolio-btn:hover::after{
    animation: loadingPortfolios linear both 1.5s;
    color:var(--nav-btn-font-selected);
}


@keyframes loadingPortfolios {
    0% {
        content: "¿/*#¦-±}$°";
    }

    10% {
        content: "P@}-?/*#¦ç";
    }

    20% {
        content: "Po?{,^!4@%";
    }

    30% {
        content: "Por\;1}]f[4";
    }

    40% {
        content: "Port'1_0<}";
    }

    50% {
        content: "Portf=.,^!";
    }

    60% {
        content: "Portfo@}-?";
    }

    70% {
        content: "Portfol#{+";
    }

    80% {
        content: "Portfoli@/";
    }

    90% {
        content: "Portfolio*";
    }

    100% {
        content: "Portfolios";
    }
}

#project-btn::after{
    content: "Projekte";
}

#project-btn:hover::after{
    animation: loadingProjects linear both 1.5s;
    color:var(--nav-btn-font-selected);
}


@keyframes loadingProjects {
    0% {
        content: "¿/*#¦-±}";
    }

    12.5% {
        content: "P@}-?/*#";
    }

    25% {
        content: "Pr?{,^!4";
    }

    37.5% {
        content: "Pro1}]f4";
    }

    50% {
        content: "Proj'1_0";
    }

    62.5% {
        content: "Proje=^!";
    }

    75% {
        content: "Projek@-";
    }

    87.5% {
        content: "Projekt#";
    }

    100% {
        content: "Projekte";
    }
}

#skill-btn::after{
    content: "Fähigkeiten";
}

#skill-btn:hover::after{
    animation: loadingSkills linear both 1.5s;
    color:var(--nav-btn-font-selected);
}

@keyframes loadingSkills {
    0% {
        content: "¿/*#¦-±}$°";
    }

    10% {
        content: "Fäh@}-?/*#¦ç";
    }

    20% {
        content: "Fähi?{,^!4@%";
    }

    30% {
        content: "Fähig\;1}]f[4";
    }

    40% {
        content: "Fähigk'1_0<}";
    }

    50% {
        content: "Fähigke=.,^!";
    }

    60% {
        content: "Fähigkei@}-?";
        right: 0;
    }

    70% {
        content: "Fähigkeit#{+";
        right: 0;
    }

    80% {
        content: "Fähigkeit@/";
    }

    90% {
        content: "Fähigkeite*";
    }

    100% {
        content: "Fähigkeiten";
    }
}

/*----------------------------------------------------------------------*/

@media screen and (max-width: 1050px) {
    #container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px max-content auto 80px;
        grid-template-areas:
            'header'
            'nav'
            'main'
            'footer';
        height: 100%;
    }

    #logoDiv {
        width: 200px;
        padding-left: 0;
    }
}