.chart {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
      #4caf50 calc(var(--percentage) * 1%), 
      #ccc calc(var(--percentage) * 1%)
    );
}
  
.label {
    position: absolute;
    font-size: 1.2rem;
    font-weight: bold;
}

.block1 {
    padding-top: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.leftbl {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
}

.imgcont {
    width: fit-content;
}

.myimg, .myimg5 {
    filter: drop-shadow(5px -5px 10px cyan);
    transition: filter 0.5s;
}

.imgcont:hover .myimg, .imgcont:hover .myimg5 {
    filter: drop-shadow(10px -5px 60px cyan);
}

.mainh1 {
    font-size: 2.5rem;
    text-wrap: pretty;
    text-shadow: -2px -2px 10px cyan;
    white-space: nowrap;
}

.clip-text {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: fit-content;
    animation: clipDisappear 5s ease-in-out 5;
}

@keyframes clipDisappear {
    0% {
        clip-path: inset(0 0 0 0);
    }
    50% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

.clip-text2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: fit-content;
}

.visible {
    animation: topan 1.3s linear forwards;
}

.visible2 {
    animation: topan1 1.3s linear forwards;
}

@keyframes topan {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes topan1 {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.inl {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    width: fit-content;
}

.text1, #icon1, #changet {
    font-size: 1.5rem;
    text-shadow: -2px -2px 10px cyan;
    white-space: nowrap;
}

.nachdiv {
    align-items: flex-start;
    flex-direction: column;
    animation: none;
}

.ic {
    width: 1.5rem;
}

.myimg2 {
    animation: shade 1.2s linear forwards;
    transition: filter 0.5s;
}

@keyframes shade {
    0% {
        filter: drop-shadow(5px -5px 10px cyan);
    }
    100% {
        filter: drop-shadow(10px -5px 60px cyan);
    }
}

.block2 {
    display: flex;
    justify-content: space-between;
    margin: 150px 0px;
}

.myimg3, .myimg00 {
    filter: drop-shadow(5px -5px 10px cyan);
    transition: filter 0.5s;
}

.imgcont:hover .myimg3, .imgcont1:hover .myimg00 {
    filter: drop-shadow(10px -5px 60px cyan);
}

.rightbl2 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    width: 40vw;
    max-width: 700px;
}

.title-about, .skills-title {
    font-size: 2rem;
    text-shadow: -2px -2px 10px cyan;
}

.quote {
    font-size: 2.2rem;
    color: #FFFFFF;
    text-shadow: -2px -2px 10px cyan;
}

.text-about {
    font-size: 1rem;
    text-shadow: -2px -2px 10px cyan;
}

.diag {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: fit-content;
    gap: 20px;
    transition: scale 0.5s ease-in;
}

.diag:hover {
    scale: 1.1;
}

.diag-txt {
    font-weight: 500;
}

.block3 {
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    flex-direction: column;
}

.block-block3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chart {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(
        rgba(0, 255, 255, 0.9) 0deg,
        rgba(53, 53, 53, 1) 0deg
    );
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: black;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center p {
    font-size: 500;
    width: fit-content;
}

.leftbl3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 660px;
    gap: 70px;
}

.otvet {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    
}

.show {
    width: 20vw;
    height: 10px;
    border-radius: 10px;
    background: linear-gradient(to right, rgba(0, 255, 255, 0.9) 100%, rgba(53, 53, 53, 1) 0%);
}

.allotvet {
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: scale 0.5s ease-in;
}

.allotvet:hover {
    scale: 1.1;
}

.rightbl3 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}
.block4 {
    margin: 150px 0px;
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    flex-direction: column;
}

.allprj {
    width: 70%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}

.prj {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projbl {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 20px;
    cursor: pointer;
    border-bottom: 0.4px solid cyan;
}

.objed {
    display: flex;
    align-items: center;
    gap: 20px;
}
.projimg {
    width: 65px;
    height: 65px;
    transition: all 0.5s ease-in;
}

.projtittext {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-in;
    gap: 10px;
}

.aproj {
    color: cyan;
    text-decoration: underline;
}

.projtit {
    font-size: 1.7rem;
    text-shadow: -2px -2px 10px cyan;
}

.projtxt {
    font-size: 1rem;
    text-shadow: -2px -2px 10px cyan;
    
}

.projbl:hover .projtittext {
    max-height: 300px;
    margin-bottom: 10px;
}

.block5 {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 10px;
}

.bl15 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}

.podtitle5 {
    font-size: 1.2rem;
    font-weight: 400;
    text-shadow: -2px -2px 10px cyan;
}

.text5 {
    font-size: 1rem;
    text-shadow: -2px -2px 10px cyan;
    text-wrap: pretty;
}

.myimg00 {
    transform: rotateY(180deg);
}

.bl5leftright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.bl5contact {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.bl5contact p {
    transition: color 0.5s ease-in;
}

.bl5contact:hover p, .bl5contact:hover i {
    color: cyan;
}

.bl5contact i {
    color: cadetblue;
    transition: color 0.5s ease-in;
}

.copyright {
    font-size: 0.7rem;
    font-weight: 300;
    text-align: center;
}

@media screen and (min-width: 768px) and (max-width: 1500px) {
    .maincent {
        width: 95vw;
    }

    .header {
        padding: 20px 40px;
    }

    .mainh1 {
        font-size: 2.2rem;
    }

    .myimg2, .myimg3, .myimg {
        width: 40vw;
    }

    .myimg5 {
        width: 30vw;
    }

    .block2 {
        margin: 90px 0px;
        align-items: center;
        gap: 40px;
        width: 100%;
    }

    .rightbl2 {
        width: 100%;
    }

    .block-block3 {
        gap: 60px;
    }

    .leftbl3 {
        gap: 40px;
    }

    .block4 {
        margin: 90px 0px;
    }

    .prj { 
        gap: 40px;
    }
}

@media screen and (max-width: 923px) {
    .chart {
        width: 120px;
        height: 120px;
    }
}

@media screen and (max-width: 795px) {
    .leftbl3 {
        gap: 29px;
    }
}

@media screen and (max-width: 767px) {
    
    .chart {
        width: 150px;
        height: 150px;
    }
}

@media screen and (max-width: 767px) {
    .header {
        padding: 20px 20px;
    }

    .block-block3, .block1 {
        flex-direction: column;
        gap: 40px;
    }

    .indicator {
        display: none;
    }

    .navigation {
        position: absolute;
        top: 100%;
        right: -110vw;
        width: 100vw;
        background-color: #000000;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px 0px 20px 20px;
        border-radius: 0px;
        box-shadow: 0px 5px 15px cyan;
        transition: right 1s ease-in-out;
    }

    .navigation ul {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        padding: 0px;
        width: 100%;
    }

    .navigation a, #language-sw {
        flex-direction: row;
        gap: 10px;
    }

    .li {
        width: fit-content;
    }

    .li .icon i, .navigation a .text, .navigation div .text {
        color: #FFFFFF;
    } 

    .navigation a .text, .navigation div .text {
        opacity: 1;
        transform: translateY(0px);
        position: static;
    }

    .navigation a .icon, .navigation div .icon {
        line-height: normal;
    }

    .navigation li.active a .icon, .navigation li.active div .icon {
        transform: translateY(0px);
    }

    .navigation li.active a .text, .navigation li.active div .text {
        transform: translateY(0px);
    }

    .navigation.gedruckt {
        right: 0px;        
    }

    .switch {
        top: 34px;
    }

    .myimg, .myimg2 {
        width: 60vw;
    }

    .myimg3, #notd, #notd2, .imgcont1 {
        display: none;
    }

    .skills-title, .title-about {
        text-align: center;
    }

    .prj, .block2, .block3 {
        align-items: center;
        flex-direction: column;
    }

    .bl5leftright, .rightbl2, .block-block3, .rightbl3 {
        max-width: 420px;
    }

    .rightbl2 {
        width: 100%;
    }

    .leftbl3 {
        justify-content: flex-start;
    }

    .chart {
        width: 190px;
        height: 190px;
    }

    .center p {
        font-size: 1.5rem;
    }

    .show {
        width: 100vw;
        max-width: calc(400px - 4ch );
    }

    .block2, .block4 {
        margin: 70px 0px;
    }

    .bl5contact {
        margin: 0 auto;
    }

    .projtit {
        white-space: nowrap;
    }

    .allprj {
        width: inherit
    }
}

@media screen and (max-width: 595px) {
    .projtit {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 500px) {
    .chart {
        width: 20vw;
        height: 20vw;
    }
    
    .mainh1 {
        font-size: 2.2rem;
    }
    
    .text1, .ic {
        font-size: 1.3rem;
    }

    .show {
        width: calc(100vw - 60px - 4ch)
    }

    .leftbl3 {
        justify-content: space-between;
    }

    .projimg {
        width: 40px;
        height: 40px;
    }

    #myimg {
        width: calc(100vw - 40px);
    }
}

@media screen and (min-width: 415px) {
    .noshow {
        display: none;
    }
}

@media screen and (max-width: 390px) {
    .mainh1 {
        font-size: 1.7rem;
    }

    .text1, .ic, #changet, #icon1 {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 1440px) {
    .header {
        border-radius: 0px;
    }
}

@media screen and (min-width: 768px) {
    #buttonhere {
        display: none;
    }
}