@media (max-width: 1280px) {
    .portrait-photo {
        height: 620px;
    }
     .hero-text h2 {
        font-size: 1.8rem;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .logo {
        width: 300px;
    }

    .nav-links {
        gap: 20px;
    }

    .skills-content {
        justify-content: space-around;
        gap: 40px;
    }
}

@media (max-width: 1025px) {
    .portrait-photo {
        height: 500px;
    }
    .logo {
        width: 300px;
    }  
    
     .hero-text h2 {
        font-size: 1.2rem;
    }

    .hero-text h1 {
        font-size: 1.5rem;
    }

    .logo {
        width: 300px;
    }
    
    .skills-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    }

    .skill-item img {
    width: 4rem;
    height: 4rem;
    }
    
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .skill-item img {
        width: 3rem;
        height: 3rem;
    }
    .contact-content {
        flex-direction: column;
        align-items: center;
        align-content: center;
    }

    .contact-left{
        align-content: center;
        align-items: center;
    }
}

@media (max-width: 830px) {
    .why-me-content {
        flex-direction: column;
        gap: 20px;
    }

     .why-me-left {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

     .typewriter-text {
        text-align: center;
    }

    .skills-content {
        display: flex;
        flex-direction: column;
    }

}

@media (max-width: 768px){

    .hero-header {
        flex-direction: column;
        gap: 20px;
    }

    .hero-text h2 {
        font-size: 1.2rem;
    }

    .hero-links {
        flex-direction: row;
        gap: 20px;
        margin-bottom: 20px;
    }

     .nav-links {
        gap: 20px;
    }

    .project-panels{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    
    .project-panel.active  {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

}

@media (max-width: 600px) {

    .hero{
        margin-top: -80px;
    }

    .portrait-photo {
        height: 400px;
    }

    .typewriter-text{
        font-size: 1rem;
    }

    .scroll-btn {
        display: none;
    }

     .why-me-content {
        flex-direction: column;
        gap: 20px;
    }

     .why-me-left {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

     .typewriter-text {
        text-align: center;
    }

    .skills-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }
    .why-me{
        padding: 0 20px;
    }

    .skills-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .skills-circle {
        width: 280px;
        height: 280px;
        padding: 20px;
    }

    .skills-circle p {
        line-height: 0.9;
    }


    .project-tab{
        font-size: 0.9rem;
        padding: 14px 15px;
    }

    .projects{
        padding: 80px 10px;
    }

    .project-right {
        width: 230px;
    }
    .project-screenshot {
        height: 150px;
    }
    .btn-primary{
        padding: 15px 20px;
    }

    .contact-form-row {
        flex-direction: column;
        gap: 20px;
    }

     .contact-form-row input, .contact-form-row textarea {
        width: 100%;
     }

    .scroll-top-btn {
        display: none;
    }

    .impressum-back {
        display: block;
    }

    .impressum-nav {
        padding: 16px 16px;    
        justify-content: space-around;  
    }

    .impressum-nav .nav-links {
        display: none;
    }

    .impressum-nav .impressum-close {
        display: none;
    }

    .impressum-hamburger {
        display: flex;
    }

    .impressum-content {
        padding: 20px 20px 40px;
    }

    .impressum-content h1 {
        font-size: 2rem;
    }

    .impressum-page footer {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        text-align: center;
    }


    .footer-left{
        flex-direction: row;
        align-items: center;
    }

    .impressum-page .footer-left {
        flex-direction: row;
        align-items: center;
    }

    .impressum-page .footer-right {
        justify-content: center;
    }
}