@media only screen and (max-width: 480px) {
    body {
        margin: 12px;
        display: flex;
        justify-content: center;
        align-content: center;
        margin-bottom: 0;
    }
    .hr {
        width: 100%;
    }
    .subhr {
        width: 30%;
    }
    .overview, .about, body {
        flex-direction: column;
    }
    .about img {
        width: 100%;
    }
    button.Resume_btn {
        font-size: 13px;
    }
    button.Resume_btn > .button-span {
        font-size: 8px;
    }
    .numbers {
        display: flex;
        justify-content: space-evenly;
    }
    .numbers p {
        font-size: 30px;
        margin-right: 0;
        gap: 0;
        align-items: flex-start;
    }
    .numbers p::after {
        font-size: 8px;
    }
    /* contact */
    .contactsection {
        border: .1rem solid var(--border-color, #ccc); 
    }
    .contactinitials {
        grid-template-columns: repeat(1, 1fr);
    }
    /* footer */
    footer {
        font-size: 8px;
        margin: 20px auto;
        margin-bottom: 0;
    }
    /* skills page */
    /* skills page */
    .skillsbtn p {
            font-size: 12px;
    }
    .tab-navigation {
        flex-direction: row;
      }
    .tab-btn {
        border-bottom: none;
        font-size: 13px;
      }

    .tab-btn.active {
       border-bottom: 4px solid var(--accent-blue);
    }

    /* projects of mine */
    /* projects of mine */

        .pt-tab-navigation { /* Renamed */
            gap: 0px;
        }
        .pt-tab-btn {
            width: 100%;
        }
        #pt-tab-header h2 { /* Renamed */
            font-size: 20px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        #pt-tab-caption {
            font-size: 12px;
        }
        .webprojects {
            width: 100%;
        }
        .pt-content-container h3 {
            font-size: 2rem;
            font-weight: normal;
        }  
        .dialog-box {
            padding: 10px;
        }
        .image-box, .image-box img, .dialog-box, .dialog-box img {
            width: 300px;
            object-fit: cover;
        }
        /* animation */
        @keyframes slide {
            0% { transform: translateX(0); }
            20% { transform: translateX(-20%); }
            40% { transform: translateX(-40%); }
            60% { transform: translateX(-60%); }
            100% { transform: translateX(-20); }
        }
        .animation_card {
            width: 120px;
        }
        .animation_discription p {
            font-size: 10px;
        }
}