:root {
    
    font-family: 'Open Sans';
    --text-primary: #b6b6b6;
    --text-secondary: #ececec;
    --bg-primary: #23232e;
    --bg-secondary: #141418;
    --transition-speed: 600ms;

}
  
body {

    margin: 0;
    padding: 0;
    overflow: hidden;
    scrollbar-width: 0;

}

html, body {

    overflow-x: hidden;
    scroll-behavior: smooth;

}

::-webkit-scrollbar {

    width: 12px;
    height: 0;

}

::-webkit-scrollbar-thumb {

    background: linear-gradient(transparent, #6649b8);
    border-radius: 6px;

}
  
body::-webkit-scrollbar-track {
    background: #1e1e24;
}

.navbar {

    animation: loadNav 0.7s linear;

}

.nav-item {

    animation: loadNavItem 1.5s linear;

}

.otherText {

    animation: loadOtherText 1s linear;

}

#Ueberschrift {

    padding-top: 10px;
    text-align: center;
    line-height: 60px;

}

.mainPageHeader {

    font-size: 64px;
    padding-left: 10px;
    padding-right: 10px;
    animation: loadMainPageHeader 1s linear;

}

.underMainPageHeader {

    font-size: 32px;
    font-weight: normal;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -25px;
    animation: loadMainPageHeader 1.5s linear;

}

#pianoImage {

    max-width: 80%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    display: inline-block;
    filter: grayscale(0.8);
    transition: 1s;
    animation: loadPianoImage 1s linear;

}

#pianoImage:hover, #pianoImage:active {

    filter: grayscale(0);
    transition: 1s;

}

.middleHeader {

    font-size: 40px;
    font-weight: bold;
    text-align: center;
    margin-top: -5px;

}

.middleHeaderSmall {

    font-size: 32px;
    max-width: 1000px;
    padding-bottom: 10px;
    font-weight: bold;
    width: auto;
    margin: auto;

}

.middleText {

    max-width: 1000px;
    width: auto;
    margin: auto;
    font-size: 20px;
    line-height: 25px;

}

.multiline {

    white-space: pre-wrap;

}

strong {

    font-weight: bolder;
    color: rgb(178, 120, 245);

}

.clickLink {

    color: rgb(144, 229, 255);
    font-weight: bold;

}

.clickLink:hover, .clickLink:active {

    color: rgb(177, 144, 255);

}

#vitaImage {

    display: block;
    max-width: 165px;
    max-height: 165px;
    max-width: calc(5vw + 5vh + 3vmin);
    max-height: calc(5vw + 5vh + 3vmin);
    padding-top: 10px;
    width: auto;
    height: auto;
    float: left;
    object-fit: cover;
    padding-right: 10px;
	overflow: hidden;

}

.DokumenteImages {

    display: block;
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;

}

@keyframes loadOtherText {

    0% {

        transform: translateY(-10vw);
        opacity: 0%;

    }

    100% {

        transform: translateY(0%);
        opacity: 100%;

    }

}

@keyframes loadPianoImage {

    0% {

        transform: scale(0%);

    }

    100% {

        transform: scale(100%);

    }
    
}

@keyframes loadMainPageHeader {

    0% {

        opacity: 0%;
        transform: translateY(-50%);

    }

    100% {

        transform: translateY(0%);
        opacity: 100%;

    }
    
}

/* Small screens */
@media only screen and (max-width: 600px) {

    @keyframes loadNav {

        0% {
    
            transform: translateY(100%)
    
        }
    
        100% {
    
            transform: translateY(0%)
    
        }
    
    }

}
  
/* Large screens */
@media only screen and (min-width: 600px) {

    @keyframes loadNav {

        0% {
    
            transform: translateY(-100%)
    
        }
    
        100% {
    
            transform: translateY(0%)
    
        }
    
    }

}

@keyframes loadNavItem {
    
    0% {

        opacity: 0%;

    }

    100% {

        opacity: 100%;

    }

}