html, body {
    height: 100%; width: 100%;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
html::-webkit-scrollbar{
    display: none;
}

.bg-primary{
    background-color:#0FC2C0 !important; ;
}
body{
    /* background: linear-gradient(#015958,#0CABA8) !important; */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;


}
.example::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
nav{
    /*background: linear-gradient(#023535,#015958) !important;*/
    background: linear-gradient(#015958,#008F8C) !important;
}

.main h3{
    font-size: 4.4rem;
    font-weight: 700;
    color: #023535;
}

.main h3 small{
    font-weight: initial;
    color: #023535 ;
}
.btn{
    background-color :#0FC2C0 ;
    border-color: #023535;
    color: #023535;
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .open>.dropdown-toggle.btn {
    color: #fff;
    background-color: #0CABA8;
    border-color: #0FC2C0; /*set the color you want here*/
}
.my-button:not(:disabled):not(:disabled):active {
    background-color: #0FC2C0;
}
#profilbild{
    height: 80%;
    width: 60%;

}
#bild2{
    height: 85%;
    width: 70%;
    border: #0f5132 0.1vw solid;

}
.about h1{

    font-size: 4rem;
    font-weight: 500;
    color: #023535;

}
.portfolio h1{
    font-size: 4rem;
    font-weight: 500;
    color: #023535;
}
.hobbies h1{
    font-size: 3rem;
    font-weight: 400;
    color: #023535;
}

.progress{
    background-color:#0CABA8;
    justify-content: flex-start;
    border-radius: 1vw;
    align-items: center;
    position: relative;
    display: flex;
    height: 2vw;
    width: 100%;

}
.progress p{
    color: white;
    padding: 0.4vw;
    padding-bottom: 2vw;
    font-size: 0.8vw;
}
.pro-value1{
    animation: load1 3s normal forwards;
    border-radius: 1vw;
    background-color: #023535;
    height: 2vw;
    width: 10%;

}

@keyframes load1 {
    0%{
        width: 10%;
    }
    100%{
        width: 87%;
    }
}

.pro-value2{
    animation: load2 3s normal forwards;
    border-radius: 1vw;
    background-color: #023535;
    height: 2vw;
    width: 10%;

}

@keyframes load2 {
    0%{
        width: 10%;
    }
    100%{
        width: 30%;
    }
}

.pro-value3{
    animation: load3 3s normal forwards;
    border-radius: 1vw;
    background-color: #023535;
    height: 2vw;
    width: 10%;

}

@keyframes load3 {
    0%{
        width: 10%;
    }
    100%{
        width: 42%;
    }
}

.pro-value4{
    animation: load4 3s normal forwards;
    border-radius: 1vw;
    background-color: #023535;
    height: 2vw;
    width: 10%;

}

@keyframes load4 {
    0%{
        width: 10%;
    }
    100%{
        width: 69%;
    }
}

.about h2{
    font-size: 3rem;
    font-weight: 400;
    color: #023535;
}
.about h3{
    font-size: 2rem;
    font-weight: 300;
    color: #023535;

}

.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #015958;
        width: 3.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #015958;
        width: 3.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
}

.timeline-steps .timeline-content {
    width: 10rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #015958
}

.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    background-color: #015958;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}

.card{

    border-color: #023535;
    background-color: #0CABA8;

}


#audiocontrol{

    background-color:#015958;
    color: #015958;

    border-color: #015958;
}
audio::-webkit-media-controls-panel{
   background-color: #015958; /* Hintergrundfarbe der Steuerelemente */

}

.modal-content{
    background-color:whitesmoke;

}
.modal-content button{
    background-color:whitesmoke;

}
.uiuiui{
    width: 100%;
}

.about a i {
    color: white;
}