responsivestyle.css

@media screen and (max-width:420px) {

    .content::-webkit-scrollbar {
        width: 0px;
    }

    .content .navigation-bar {
        background-color: rgba(25, 25, 25, 0.4);
        display: flex;
        flex-direction: row;
        width: 90%;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        left: 5%;
        bottom: 3%;
        z-index: 9;
        padding: 10px;
        border-radius: 10px;
    }

    .content .navigation-bar a {
        text-decoration: none;
        color: white;
        padding: 5px;
    }

    .active {
        background-color: black;
        border-radius: 10px;
    }

    .content .navigation-bar a i {
        font-size: 1.4em;
    }


    .page {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .imagebox {
        border-radius: 100%;
        height: 9em;
        width: 9em;
    }

    .sidebar1 {
        display: flex;
    }

    .home {
        display: flex;
        flex-direction: column;
    }

    .social-media-links {
        background-color: #0d020682;
        padding: 10px;
        border-radius: 5px;
        width: 80%;
    }

    .info {
        font-size: 1.1em;
        height: 20vh;
        text-align: center;
    }


    #aboutme {
        height: 190vh;
    }

    .meinfo h1 {
        text-align: center;
        padding: 10px;
    }

    .meinfo p {
        font-size: 13px;
        padding: 10px;
    }

    .key-points {
        flex-direction: column;
        gap: 20px;
    }

    .rating {
        height: 40vh;
        justify-content: center;
    }

    .key-point {
        width: 100%;
        height: 50vh;
        font-size: 15px;
    }

    .key-box {
        display: flex;
        flex-direction: column;
    }

    .logo {
        border-right: 0px solid gold;
        border-bottom: 2px solid gold;
        margin-bottom: 10px;
        padding: 0.5em;
    }

    .edu-logo {
        height: 100px;
        margin-bottom: 10px;
    }

    #skills {
        width: 95%;
        margin: 5% auto;
        height: 165vh;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .skill-type {
        width: 100%;
        height: 40vh;
    }

    .skill-info {
        font-size: 16px;
        padding: 10px;
    }

    .frontend-color {
        padding: 0;
        line-height: 40px;
    }

    #projects {
        height: 145vh;
        margin-bottom: 0px;
    }

    .one-pro {
        width: 100%;
        height: 16em;
    }

    .pro-description {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 0.7em;
        font-size: 0.8em;
    }

    .pro-description p {
        margin-bottom: 5px;
    }

    .more-pro {
        display: block;
        float: none;
        margin: 20px auto;
        text-align: center;
    }

    #contacts {
        margin-top: 0%;
        height: 100vh;
        padding: 6em 0px;
    }

    .name-email {
        flex-direction: column;
    }

    .contact-details {
        width: 100%;
    }

    #contacts form button {
        width: 90%;
    }

}