* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root{
    --main-color: #BCCAF5;
    --sec-color: #FE5F36;
    --ter-color: #163480;
}

@font-face {
    font-family: "LUMINA";
    src: url("https://db.onlinewebfonts.com/t/fd0bed3329533c35b056272f69814c47.eot");
    src: url("https://db.onlinewebfonts.com/t/fd0bed3329533c35b056272f69814c47.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/fd0bed3329533c35b056272f69814c47.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/fd0bed3329533c35b056272f69814c47.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/fd0bed3329533c35b056272f69814c47.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/fd0bed3329533c35b056272f69814c47.svg#LUMINA")format("svg");
}  
  
@font-face {
    font-family: "Bauhaus Std Light";
    src: url("https://db.onlinewebfonts.com/t/7b4071bb14a623689a665a5058b6edd6.eot");
    src: url("https://db.onlinewebfonts.com/t/7b4071bb14a623689a665a5058b6edd6.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/7b4071bb14a623689a665a5058b6edd6.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/7b4071bb14a623689a665a5058b6edd6.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/7b4071bb14a623689a665a5058b6edd6.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/7b4071bb14a623689a665a5058b6edd6.svg#Bauhaus Std Light")format("svg");
}


/* albert-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300;
  src: url('Fonts/albert-sans300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* albert-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400;
  src: url('Fonts/albert-sans400.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body{
    width: 70%;
    margin: 0 auto;
}

h1{
    font-family: "LUMINA"; 
    font-weight: normal;
    font-size: 10vw;
    left: 0%;
    color: #BCCAF5;
}

h2{
    font-family: "LUMINA";
    font-weight: normal;
    font-size: 4vw;
    color: #FE5F36;
}

h3{
    font-family: "LUMINA";
    font-weight: normal;
    font-size: 2.5vw;
    transform: rotate(90deg);
    color: #163480;
    padding-top: 4vw;
    left: 0%;
}

h4{
    font-family: "LUMINA"; 
    font-weight: normal;
    font-size: 10vw;
    color: #BCCAF5;
}

h5{
    font-family: 'Albert Sans';
    font-weight: 300;
    color: #FE5F36;
    font-size: 1.2vw;
}

h6{
    font-family: 'Albert Sans';
    font-weight: 300;
    color: #163480;
    font-size: 1.5vw;
    margin: 1vw 0 1vw 0;
}
/* section eins*/

section#eins{
    float: left;
    position: absolute;
}

div.float{
    padding-top: 3vw;
    width: 50%;
    display: flex;
    justify-content: flex-start;
}

/* section zwei*/
section#zwei{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative; 
}

div#B{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 31vw;
    right: 31.5vw;
}

div#B img{
    width: 1vw;
    margin-top: 1vw
}

img#karo{
    width: 40%;
    position: absolute;
    z-index: -1;
    right: 3vw;
    top: 8vw;
}

div#name{
    font-family: "Bauhaus Std Light";
    color: #FE5F36;
    position: absolute;
    top: 18vw;
    right: -18vw;
}

div#name p{
    font-size: 3.5vw;
    width: 30%;
}


/* FLY*/
div#fly{
    position: absolute;
    right: -17vw;
    top: 36vw;
}

div#fly img{
    width: 8vw;
}

/* section drei*/
section#drei{
    font-family: "Bauhaus Std Light";
    color: #BCCAF5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    left: 0%;
    padding: 1vw;
    position: absolute;
    top: 45vw;
}

section#drei div.flex{
    display: flex;
}

section#drei div.flex p{
    font-size: 1vw;
    margin: 0 1vw 0 1vw;
}

section#drei div.flex img{
    width: 2vw;
    padding-right: 0.3vw;
}

p#font{
    margin-left: 1vw; 
    font-size: 0.9vw;
}

/**************** MAIN ****************/


/* About */
main section#about{
    padding-top: 55vw;
}

div.HEAD1{
    display: flex;
    justify-content: flex-end;
}
div.HEAD1 h2{
    position: absolute;
    right: 51vw;
    padding: 6vw;
}
div p.txtL{
    width: 76%;
    font-family: 'Albert Sans';
    font-weight: 300;
    font-size: 1.2vw;
    color: #163480;
    padding: 8vw 0vw 8vw 0vw;
}

/* Education */
section#Education{
    width: 80vw;
    font-family: 'Albert Sans';
    font-weight: 300;
    font-size: 1.2vw;
    color: #163480;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

section#Education p{
    width: 50%;
}

#Education h2{
    transform: rotate(270deg);
    position: relative;
    top: 7vw;
    right: -4vw;
}


/* Lebenslauf */
section#Lebenslauf{
    padding: 10vw 0 6vw 0;
}

#Lebenslauf p{
    font-family: 'Albert Sans';
    font-weight: 300;
    font-size: 1.2vw;
    color: #163480;
    width:65%;
}

#Lebenslauf div.flex{
    position: absolute;
    margin: -16vw 0 15vw -25vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.flex h2{
    margin: 1vw 0 0 1vw;
}

div.flex img{
    width: 17vw;
}


img#pos{
    width: 6vw;
    position: absolute;
    margin: -12vw 0 8vw 12vw;
}

/* Sprachen */

section#Sprachen{
    font-family: 'Albert Sans';
    font-weight: 300;
    font-size: 1.2vw;
    margin: -20vw -6vw 1vw 55vw;
    color: #FE5F36;
    display: flex;
    flex-direction: column;
}

#Sprachen div.flex{
    width: 20vw;
    display: flex;
    justify-content: space-around;
}

#Sprachen h5{
    margin: 0 0 2vw 1.6vw;
}
section img#three{
    width: 30vw;
    position: absolute;
    margin: -10vw 0 0 -3vw;
}

/* Skills */

section#Skills{
    font-family: 'Albert Sans';
    font-weight: 300;
    font-size: 1.2vw;
    color: #163480;
    width: 50vw;
    margin-left: 20vw;
    display: flex;
    flex-direction: column;
}

#Skills h2{
    margin: 15vw 0 4vw 0;
}

div.flex{
    display: flex;
    margin-bottom: 5vw;
}

div.flex p{
    padding-right: 3vw;
}

#Skills div.fl{
    width: 40%;
    display: flex;
}

#Skills img{
    width: 7vw;
}

#Skills div p{
    margin: 2vw 0 1vw 0;
}

/* VIE */

div#ex{
    margin: -1vw 0 5vw -16vw;
}

div#ex h2{
    margin: -3vw 0 0 3vw;
}


#VIE p{
    font-family: 'Albert Sans';
    font-weight: 300;
    font-size: 1.2vw;
    color: #163480;
    width:65%;
}

/* Visuals */

section#Visuals{
    margin-top: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Visuals img{
    width: 19%;
    margin-left: 2vw;
}

div#Ll{
    margin-left: -4%;
    border-bottom: 0.2vw solid #FE5F36;
}


span#bor{
    border-bottom: 0.2vw solid #FE5F36;
    padding-top: 0.2vw;
    width: 60vw;
    display: flex;
    flex-direction: row-reverse;
}

span#bor p{
    font-family: "LUMINA";
    font-weight: normal;
    font-size: 2vw;
    color: #FE5F36;
}

div#M{
    border-bottom: 0.2vw solid #FE5F36;
}

.zoomable {
  transition: transform 0.3s ease; 
  cursor: pointer;
}

.zoomed {
  transform: scale(2.5);
  z-index: 1000;
  position: relative;
}

div#moody{
    width: 50vw;
    margin-left: 7vw;
}

hr.L1{
    width: 0px;
    height: 118vw;
    border: 0.15vw solid #FE5F36;
    position: absolute;
    left: 27.8vw;
    margin-top: -2vw;
}

hr.L2{
    width: 0px;
    height: 70vw;
    float: right;
    border: 0.15vw solid #FE5F36;
    color: #FE5F36;
    position: absolute;
    left: 30vw;
    margin-top: -4vw;
}

hr.L3{
    width: 0px;
    height: 55vw;
    border: 0.15vw solid #FE5F36;
    position: absolute;
    float: left;
    left: 57.5vw;
    margin-top: -2vw;
}

hr.L4{
    width: 0px;
    height: 50vw;
    float: left;
    border: 0.15vw solid #FE5F36;
    color: #FE5F36;
    position: absolute;
    left: 59.5vw;
}

/* F */

div#foody{
    display: flex;
    flex-direction: column;
    padding-left: 7.2vw;
}

div#foody img{
    padding-right: 0.2vw;
    width: 12vw;
    margin-bottom: 1vw;
}

section#F{
    margin: 0 0 1vw -6vw;
    font-family: "LUMINA";
    font-weight: normal;
    font-size: 2vw;
    color: #FE5F36;
}
#F p{
    padding: 0.2vw 0 0 0.5vw;
    border-bottom: 0.2vw solid #FE5F36;
}

/* FUN FACTS */

section#FUN{
    position: absolute;
    right: 0.5vw;
    top: 316vw;
}

div#H{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

img#hubby{
    width: 13vw;
    position: relative;
    right: -4vw;
}

img#funny{
    width: 50vw;
}

div#T{
    font-family: 'Albert Sans';
    font-weight: 300;
    font-size: 1.2vw;
    color: #163480;
}

/* GiT */

section#GiT{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 15vw;
    top: 360vw;
}

#GiT img{
    width: 30vw;
}

#GiT p{
    margin-top: 2vw;
    font-family: "Lumina";
    color: #163480;
    font-size: 1.4vw;
}

#GiT p#link{
    cursor: pointer;
    text-decoration: none;
    background-image: linear-gradient(to right, #fe5f36);
    background-position: left bottom;
    background-size: 0% 2px;
    background-repeat: no-repeat;
    transition: background-size 0.3s;
}

#GiT p#link:hover {
     background-size: 100% 2px;
}

/* FIN */

div#FIN{
    width: 100%;
    padding: 35vw 0 10vw 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div#FL{
    width: 23%;
    display: flex;
    justify-content: space-around;
}

#FL a{
    border-bottom: 0.3vw solid #BCCAF5;
    font-family: "Bauhaus Std Light";
    font-size: 1.4vw;
    text-decoration: none;
    color: #BCCAF5;
}


#FL a:hover{
    color: #FE5F36;
}

/* DEVICES */
@media(max-width:428px){
body{
    width: 100%;
    padding-left: 5vw;
}

h1{
    font-size: 15vw;
}

h2{
    font-size: 5.5vw;
}

h3{
    font-size: 3vw;
}

img#karo{
    width: 70%;
    right: 5vw;
    top: 18vw;
}

div#fly{
    right: -10vw;
    top: 106vw;
}

div#fly img{
    width: 20vw;
}

div#name p{
    font-size: 12vw;
    padding-top: 75vw;
}

main section#about{
    padding-top: 155vw;
}

section#drei{
    top: 125vw;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    left: 0%;
}

p#font{
    font-size: 1vw;
    margin-top: -0.5vw;
}

section#drei div.flex p{
    font-size: 2.5vw;
    margin: 0 1vw 0 1vw;
}

section#drei div.flex img{
    width: 6vw;
    padding-right: 0.3vw;
}

div.HEAD1 h2{
    right: 35vw;
}

div p.txtL{
    width: 100%;
    font-size: 2vw;
}

section#Education{
    margin-top: 5vw;
    width: 90%;
    font-size: 2vw;
}

#Lebenslauf div.flex {
    margin: -24vw 0 15vw -15vw;
}

img#pos{
    width: 8vw;
} 

#Lebenslauf p{
    width: 100%;
    font-size: 2vw;
    padding-top: 5vw;
} 

div.flex img{
    width: 20vw;
}

section#Sprachen{
    width: 50;
    font-size: 2vw;
    margin: 10vw 0 1vw 50vw;
}

section img#three{
    width: 40vw;
} 

#Sprachen h5{
    font-size: 2vw;
    margin: 0 0 2vw 0;
}

section#Skills{
    font-size: 2vw;
    width: 60%;
} 

div#ex{
    margin: 2vw 0 7vw -6vw;
} 

#VIE p{
    font-size: 2vw;
    width: 100%;
} 

section#Visuals{
    margin-top: 15vw;
}

.zoomable {
  transition: transform 0.3s ease; 
  cursor: pointer;
}

.zoomed {
  transform: scale(3);
  z-index: 1000;
  position: relative;
}

hr.L1{
    display: none;
} 

hr.L2{
    display: none;
} 

hr.L3{
    display: none;
} 

hr.L4{
    display: none;
}

div#moody{
    margin-left: 2vw;
    width: 60vw;
}

div#M{
    border-bottom: none;

}

span#bor{
    border-bottom: none;
    width: 80vw;
}

span#bor p{
    font-size: 4vw;
}

div#foody{
    padding-left: 17vw;
} 

div#foody img{
    width: 15vw;
}

section#F{
    font-size: 4vw;
} 

#F p{
    padding: 0.2vw 0 0 4.5vw;
    border-bottom: none;
} 

div#Ll{
    margin-left: 3vw;
    border-bottom: none;
} 

div#T{
    font-size: 2vw;
}

img#funny{
    width: 60vw;
}

img#hubby{
    width: 16vw;
    right: -6vw;
} 

section#FUN{
    top: 585vw;
}

section#GiT{
    top: 665vw;
} 

#GiT img{
    width: 40vw;
}

#GiT p{
    font-size: 2vw;
} 

div#FIN{
    padding: 65vw 0 10vw 0;
} 

#GiT p#link{
    font-size: 2vw;
} 

div#FL{
    width: 30vw;
}

#FL a{
    font-size: 2vw;
}

}


/********************/