@media (max-width: 800px) {
    /*group css*/
    .nav {
        display: none;
    }
    .about, .contactMe {
        width: 100%;
        flex-direction: column;
        height: auto;
    }
    .aboutme, .aboutText, .aboutTrading, .updates, .bookUpdate {
        min-width: 100%;
        height: auto;
    }
    /*end of group css*/
    body {
        overflow-x: hidden !important;
        overflow-y: auto;
        width: 100vw;
        max-width: 100vw ;
    }
    .content {
        overflow-x: hidden !important;
        overflow-y: auto;
        width: 100vw;
        max-width: 100vw ;
        padding: 10px;
    }
    .homepage {
        height: auto !important;
        max-height: fit-content;
    }
    .homepageStage  {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        align-content: start;
        height: auto;
    }
    .portrait {
        width: 100%;
        justify-content: center;
    }
    .homepageStage {
        gap: 0px;
    }
    .introCard {
    width: 100%;
    justify-content: center;
    }
    .introName {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .introName p {
        font-size: 89px
    }
    .services {
        width: 100%;
        overflow-x: scroll;
        min-height:450px;
        overflow-y: visible;
        padding: 10px;
    }
    .contactMe {
        height: auto;
    }
    .card {
        overflow-y: visible;
        z-index: 200;
        min-height: fit-content;
        max-width: 400px;
        min-width: 200px;
    }
    .cmInput {
        width: 100%;
        padding: 10px 0px;
    }
}