@media screen and (max-width: 650px) {
    #particles-js {
        display: none;
    }
    #particles-js-night {
        display: none;
    }
    .main {
        width: 100%;
    }
    #switch-DN {
        display: none;
    }
    #logo-main {
        width: 100%;
    }
    .main header:not(.Expertise) {
        box-shadow: #00000030 0px 20px 20px -10px;
    }
    #motivaiton .tilte summary {
        position: relative;
        margin: 0.5vh;
        margin-left: 5vh;
        user-select: none;
        cursor: pointer;
        font-size: x-large;
        font-family: Raleway;
    }
    summary:before {
        position: absolute;
        font-family: "Inter", sans-serif;
        top: 50%;
        transform: translateY(-50%);
        left: -4vh;
        content: "↓";
        width: 1.7rem;
        height: 1.73rem;
        background-color: #000;
        color: #FFF;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }


    #exper_class > div {
        flex: 1 1 100%;
        margin: 2%;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        height: 5rem;
    }

    #exper_class div div:nth-child(1) {
        width: 60%;
        height: 100%;
        clip-path: polygon(0 0, 100% 0, 73% 100%, 0% 100%);

    }

    #exper_class div div:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-items: center;
        height: 100%;
        width: 20%;
        margin-left: 1rem;
    }


    #exper_class div p {
        font-family: Raleway;
        margin: 0%;
        font-size: large;
    }

    button i {
        display: none;
    }
    
    #back {
        display: none;
    }
}