@charset "UTF-8";
/* CSS Document */

*{
    font-family: Helvetica Neue, 'Raleway', sans-serif;
    font-size: 25px;
    color:#FFF;
    box-sizing: border-box;
    }

body{
    background-color: #000;
    margin:0;
}

/* Titelbild*/

#Titelbild{
    margin:0;
    width:100%;
    height: 100vh;
    background-image: url(Titelbild2.jpg);
    background-size: cover;
    background-position: center;
    z-index: 95;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
    
    
}
#Logotitel{
    
   
     z-index: 96;
}

#headerueberschrift{
    
    font-weight: 100;
    font-size: 2em;
    margin:0;
    max-width: 90%;
}

.X{
    
    font-weight: 300;
    font-size: 1em;
}

#scrolldown{
    position:absolute;
    
    bottom: 3%;
    font-weight: 100;
}

#scrolldown p {
    
    margin: 0;
    padding: 0;
    font-size: 1.8em;
}

@media only screen and (max-width: 915px){
    #Titelbild {
        font-size: 0.9em ;  
        }
    #scrolldown {
        font-size: 0.95em; 
    }
}

@media only screen and (max-width: 825px){
    #Titelbild {
        font-size: 0.8em;   
        }
    #scrolldown {
        font-size: 0.9em; 
    }
}


@media only screen and (max-width: 730px){
    #Titelbild {
        font-size: 0.7em;  
        
        }
    #headerueberschrift{ 
        font-weight: 200;
        margin-bottom: 70px;
        max-width: 95%}
    
    .X { font-weight: 400;}
    
    #scrolldown {
        font-size: 0.85em; 
        font-weight:200;
    }
    
    #headerueberschrift{
        
            
    }
}


/*navigation*/

.fixedsticky{
    height:120px;
    position:sticky;
    top:0px;
    padding-top: 10px;
    padding-bottom: 10px;
    width:1;
    background: linear-gradient(to top, rgba(0,0,0,0)1%, rgba(0,0,0,1) 40%);
    
    z-index: 100;
   
    
}

#logonav {
    
    display: block;
    margin: 0 auto;
    position:relative;
    justify-content: center;
    align-items: center;
    text-align: center;
     z-index: 999;
}
.sociallogos {
    display:block;
    top: 10px;
    position:absolute;
    right:1px;
     z-index: 999;
}
.sociallogos a {
    height:60px;
    width:60px;
    background-size: contain;
    float: left;
    margin:10px;
    margin-top: 0px;
   

    
}



#facebookicon{
    background-image: url(facebook_black.png);
}
#facebookicon:hover{
   background-image: url(facebook_white.png); 
}


#soundcloudicon{
    background-image: url(soundcloud_black.png);
}
#soundcloudicon:hover{
    background-image: url(soundcloud_white.png);
}


#instagramicon{
    background-image: url(instagram_black.png);
}
#instagramicon:hover{
    background-image: url(instagram_white.png);
}

#log2{display:none}

@media only screen and (max-width: 750px){
    
    .fixedsticky{    display: flex;
    text-align: center;
        height: 95px;
            padding-top:5px;
        }

 
    .sociallogos{
       top:50px;
        display: flex;
        width:100%;
        justify-content: center;
        
    }
    .sociallogos a{
        height:40px;
        width:40px;
       
}
    #log1{display:none;}
    
    
    #log2{display:inline;}
}






.content{
    text-align: center;
}

h2{font-size: 2em;
    font-weight:400;
    margin-top:30px;

}
h3{
    font-weight:300;
    margin-bottom: 20px;
        font-size:1.3em;
}

h4{
    font-size:1.3em; 
    font-weight:400;
    margin-bottom: 40px;
    
}

h5{
    font-weight:400;
    
    
}


.content p{
    font-weight:100;
    max-width: 90%;
    margin: 0 auto;
}

.elementsborder
        {border:solid 1px #FFF;
            margin: 15px auto;
            padding: 20px;
            max-width: 70%;
        
}

.elementsborder h4{ margin-top: 0px;}

.elementsborder h5{ margin-top: 0px;
                    margin-bottom: 10px;}

#aboutmeblock{
    display: flex;
    align-items: center;
}

#aboutmepic1{
   /* border: 1px solid white;*/
    width:50%;
    
}

#aboutmepic2{
    display:none;
}

#aboutmefill{
    /*border: 1px solid white; */
    width:50%;
    
}
#aboutmetext{
    max-width:90%;
    margin:0 auto;
    }
    
#aboutmetext p{
    margin-bottom: 20px;font-size:1.4em;
}


@media only screen and (min-width: 1400px){
    
    #aboutmepic1{
        display: none;
    }
    
    #aboutmepic2{
        display:inline;
    }
    #aboutmeblock{
        max-width: 80%;
        margin: 0 auto;
    }
}



#musictext{
    margin-bottom: 30px;
}


    
#musictext{
    margin-bottom: 80px;
}




#Contact{
    margin-bottom: 300px;
}
#Contact a{
    font-weight: 100;
    font-size:1.5em;
    text-decoration:none;
    border-bottom: solid 1px #fff;
    
}

#Contact a:hover{
    font-weight:200;
}


#scalt{ display: block; 
    position:relative;
    
    width:1%;
height:1px;
    
    }


@media only screen and (max-width: 750px){
    .elementsborder{
        max-width: 90%;
    }
       
    #aboutmeblock{
        display:block;
        transform: scaleY(-1);
    }
    #aboutmefill{
           transform: scaleY(-1);
        width:100%;
    }
    #aboutmepic1{
        width: 70%;
        margin: 0 auto;
        transform: scaleY(-1);
    }
    #about me h2{
        margin-bottom: 0 px
    }
}
    
}

@media only screen and (min-width: 750px){
    
    h2{font-size: 2.5em;}
    
    h4{font-size: 1.6em;}
    
    h5{font-size: 1.2em;}
p{
        font-size: 1.2em;
    }