/*-------------Willkommenssektion-------------*/



/*------Typing Animation------*/
.wrapper{
    display: flex;
    flex-direction: column;
}



.wrapper .static-txt{
    color: white;
    font-size: 40px;
    font-weight: 400;
    z-index: -1;
    text-align: center;
    
}

.wrapper .dynamic-txts{
    padding: 0;
    margin-top: 0;
    line-height: 90px;
    height: 90px;
    overflow: hidden;
    text-align: center;
    gap: 5px;
}


.dynamic-txts li {
    list-style: none;
    font-size: 60px;
    font-weight: 500;
    top: 0;
    position: relative;
    z-index: -1;
    animation: slide 12s steps(4)
    infinite;
}
.dynamic-txts li span{
    color: rgb(102, 252, 241);
}

.dynamic-txts li::after {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    border-left: 2px solid var(--main-brand-color);
    animation: typing 3s steps(19)
    infinite;
}

@keyframes typing {
    40%, 60%{
        left: calc(100% + 30px);
    }
    100% {
        left: 0;
    }
}


@keyframes slide{
    100%{
        top: -360px
    }

}


/*---Scroll Down Animation---*/

.scroll-container{
    width:40px;
    height:40px;
    position: absolute;
    justify-self:flex-end;
    margin-top: 200px;



}

.scroll-down{
    position:relative;
    width:100%;
    height:100%;
    z-index: -1;
    
    
    
    transform:rotate(45deg);
    span{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      box-sizing:border-box;
      border:none;
      border-bottom:3px solid #fff;
      border-right:3px solid #fff;
      animation:animate 1s linear infinite;
      &:nth-child(1){
        top:-30px;
        left:-30px;
        animation-delay:0s;
      }
      &:nth-child(2){
        top:-15px;
        left:-15px;
        animation-delay:0.2s;
      }
      &:nth-child(3){
        top:0;
        left:0;
        animation-delay:0.4s;
      }
      &:nth-child(4){
        top:15px;
        left:15px;
        animation-delay:0.6s;
      }
      &:nth-child(5){
        top:30px;
        left:30px;
        animation-delay:0.8s;
      }
    }
  }

@keyframes animate{
    0%{
      border-color:rgb(102, 252, 241);
      transform:translate(0,0);
    }
     20%{
      border-color:rgb(102, 252, 241);
       transform:translate(15px,15px);
    }
     20.1%,100%{
      border-color:#fff;
    }
  }



/*-------------Vorstellung-------------*/



#contact-start{
    display: flex;
    gap: 5%;
}

#contact-start .box-application-image {
    width: 185px;
    height: 250px;
    max-width: 80vw;
    max-height: 80vw;
    margin: 0;
}

#contact-start .box-application-image .application-image {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

#contact-start .contact-start-text h2 {
    color: var(--main-brand-color);
    font-size: 35px;
    margin: 0;
}

#contact-start .contact-start-text span {
    font-size: 20px;
    margin: 0;
}

#contact-start .contact-start-text {
    width: 80%;
}


.btn {
    width: 200px;
    height: 50px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.btn div {
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 10px;
    display: flex;
    position: relative;
    padding: 15px 0;
    justify-content: center;
}

/*----Animation-Button---*/

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.btn::after,
.btn::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle), #006aff, #00ff99, var(--main-brand-color), #000061);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -2;
    padding: 3px;
    border-radius: 10px;
    animation: 3s spin linear infinite;
}

.btn::before {
    filter: blur(1.5rem);
    opacity: 0.5;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}



/*-------------Skill-Sektion-------------*/

#skill-set{
    width: 100%;
    height: 100%;
}

#skill-set .skill-label{
    margin-top: 50px;
    display: flex;
    justify-content:space-evenly;
    flex-wrap: wrap;


}

#skill-set .skill-collection-one{
    display: flex;
    flex-direction: column;
}

#skill-set .skill-collection-one .one{
    display: flex;
    gap: 40px;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
}

#skill-set .skill-collection-one .one-picture{
    width: 75px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#skill-set .skill-collection-one .one-picture p{
    margin: 0;
}


#skill-set .skill-collection-two{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#skill-set .skill-collection-two .two{
    display: flex;
    gap: 40px;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
}

#skill-set .skill-collection-two .two-picture{
    width: 75px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#skill-set .skill-collection-two .two-picture p{
    margin: 0;
}


#skill-set .skill-collection-one .one .progressbar-box{
    width:max-content;


}

#skill-set .skill-collection-two .two .progressbar-box{
    width: max-content;
}


#skill-set .progressbar-box .progressbar .html{
    background-color: rgb(102, 252, 241);
    width: 40%;
    height: 20px;
    border-radius: 10px;
}

#skill-set .progressbar-box .progressbar .css{
    background-color: rgb(102, 252, 241);
    width: 35%;
    height: 20px;
    border-radius: 10px;
}

#skill-set .progressbar-box .progressbar .javascript{
    background-color: rgb(102, 252, 241);
    width: 10%;
    height: 20px;
    border-radius: 10px;
}

#skill-set .progressbar-box .progressbar .python{
    background-color: rgb(102, 252, 241);
    width: 10%;
    height: 20px;
    border-radius: 10px;
}




#skill-set .progressbar-box .progressbar {
    background-color: black;
    border-radius: 13px;
    padding: 3px;
    height: 25px;
    width: 300px;
    max-width: 80vw;
}

/*-------------Projects-------------*/

#projects{
    height: 100%;
    width: 100%;
    z-index: -1;
}

#projects .project-row-one{
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

#projects .project-pictures-box{
    width: 30vw;
}

#projects .project-pictures-box img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

#projects .project-description-box{
    background-color: var(--primary-color);
    border-radius: 10px;
    min-height: 30vw;
    max-height: max-content;
    width: 40%;
    padding: 5px 10px;
}

#projects .project-description-box .project-text p{
    font-size:15px;
}
#projects .project-description-box .project-text span{
    color: rgb(102, 252, 241);
    font-size: 18px;
    font-weight:bold;
    text-align: center;
}

#projects .project-description-box .links-boxen{
    display: flex;
    width:max-content;
    height: 50px;
    align-items: center;
    border-radius: 10px;
    border: 2px solid var(--main-brand-color);
    gap: 20px;
    padding: 15px;
    z-index: 5;

}

#projects .project-description-box .links-github{
    width: 100px;
    height: 41px;
}

#projects .project-description-box .links-github img{
    width: 100%;
    height: 100%;

}

#projects .project-description-box .links-youtube{
    width: 100px;
    height: 22px;

}

#projects .project-description-box .links-youtube img{
    width: 100%;
    height: 100%;

}

#projects .project-description-box .links-youtube a{
    height: 100%;
    width: 100%;
    display: block;
}



/*-------------Kontakt-------------*/


.section-boxes-end {
    width: 50%;
    background-color: var(--secondary-color);
    min-height: 500px;
    max-height: max-content;
    margin: 30px auto;
    padding: 25px;
    border-radius: 10px;
    z-index: -1;
}


#contact-end{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 30px;
}

#contact-end .contact-end-data{
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.contact-end-data .email {
    width: 200px;
    justify-content: center;
    background-color: var(--primary-color);
    border-radius: 10px;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-end-data .email div{
    width: 150px;
    max-width: 10vw;
    max-height: 20vh;
    justify-content: center;
    align-items: center;
}

.contact-end-data .email div img{
    width: 100%;
    height: 100%;
}

.contact-end-data .phone {
    width: 200px;
    justify-content: center;
    background-color: var(--primary-color);
    border-radius: 10px;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-end-data .phone div{
    width: 150px;
    max-width: 10vw;
    max-height: 20vh;
    justify-content: center;
    align-items: center;
}

.contact-end-data .phone div img{
    width: 100%;
    height: 100%;
}



/*-------------Footer-------------*/

footer{
    background-color: var(--secondary-color);
    width: 100%;

    max-height: max-content;
    margin-top: 30px;
    padding: 25px;
    position: relative;
    z-index: 1;
}

footer .information-footer{
    width: 90%;
    height: max-content;
    text-align: center;
    margin: 0 auto;
    position: relative;
    align-items: center;
    justify-content:space-between;
    display: flex;
}

.information-footer .imprint{
    position: relative;


}

.information-footer .copyright{
    position: relative;

}




footer div a{
    width: 90%;
    text-align: center;
    margin: 0 auto;
    z-index: 5;
    width: max-content;
    height: max-content;
}

footer .socials-logo{
    width: 50px;
    height: max-content;
    position: relative;
    z-index: 5;

}

footer .socials-logo a{
    width: 100%;
    height: 100%;
}

footer .socials-logo a img{
    width: 100%;
    height: 100%;
}