@media (max-width: 635px) {
    #headerContent {
        flex-direction: column;
        align-content: center;
        flex-wrap: wrap;
        padding: 0;
    }

    main {
        padding: 0 30px;
        min-height: calc(100vh - 142px - 80px);
    }

    #mainContent {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }

    #cardOverlay {
        justify-content: unset;
        overflow-y: auto;
    }

    #box {
        /* margin-top: 20px; */
        width: 300px;
    }

    #box * {
        font-size: 16px;
    }

    #boxContent {
        height: 350px;
    }

    #cardNav {
        transform: scale(0.8)
    }

    #left {
        width: 50%;
    }

    #left #height{
        transform: scale(0.6)
    }

    .horiLine, .vertLine {
        display: none;
    }

    #XpWeight {
        width: auto;
        flex-direction: column;
        align-items: unset;
        padding: 20px;
    }

    #right {
        transform: scale(0.8)
    }

    #evoChain {
        flex-wrap: wrap;
        padding: 10px;
    }

    #evoChain .evo {
        margin: 10px;
    }

    #evoChain img{
        width: 100px;
        height: 100px;
    }
}